Progress® Kendo UI® for jQuery Feedback Portal
Back to Feed
Request a Feature Report a Bug
Unplanned
Last Updated: 22 Jan 2020 13:37 by ADMIN
Anuradha
Created on: 28 May 2019 09:18
Category: Chart
Type: Feature Request
5
Kendo Radar Chart - Align the ValueAxis on top of RadarArea series

Please provide a property that will enable the ValueAxis of Radar Chart to be visible on top of the RadarArea series.

Currently, if the RadarArea Series has the opacity property set to 1.0, it masks the ValueAxis. To make the ValueAxis visible, the RadarArea's opacity should be reduced and this in turn makes the color of RadarArea less appealing.

Please provide a feature whereby we can make the ValueAxis visible through the RadarArea series without compromising on the opacity.

15 comments
ADMIN
Alex Hajigeorgieva
Posted on: 15 Jul 2019 08:14
Hello, Anuradha,

Thank you for sharing that with the Kendo UI community. I can see that a lot of thought and care has gone into adding the gridlines on top.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Anuradha
Posted on: 15 Jul 2019 06:21

Sure Alex.

The idea is to attach a dataBound event to the Chart object.

<kendo-chart ref="radarChart"
:data-source="[]"
:title-text="'Kendo Chart Example'"
:title-font="'24px sans-serif'"
:chart-area-height="475"
:value-axis-visible="false"
:value-axis-major-unit= 0.5
:category-axis-labels-font="'16px sans serif'"
:series="series"
:tooltip-visible="true"
:tooltip-format="'{0}'"
:transitions="true"
:axis-defaults-major-grid-lines-visible="true"
:axis-defaults-major-grid-lines-color="'rgba(0, 0, 0, 0.1)'"
:theme="'default'"
@dataBound="dataBound"
>
</kendo-chart>

In this dataBound event, invoke the functionality to render gridlines.

dataBound: function(arg) {
setTimeout(() => {
this.gridLineShow(arg);
}, 1000);
},
gridLineShow: function(arg) {
const paths = arg.sender.element[0].querySelectorAll("path[fill-opacity='1']");
if (paths != undefined && paths.length > 0 && paths[0].parentNode!=undefined
&& paths[0].parentNode.parentNode!=undefined && paths[0].parentNode.parentNode.parentNode!=undefined) {
paths[0].parentNode.parentNode.parentNode.setAttribute("class", "upjp1");
paths[0].parentNode.parentNode.parentNode.parentNode.insertBefore(paths[0].parentNode.parentNode.parentNode, paths[0].parentNode.parentNode.parentNode.parentNode.childNodes[0]);
}
}

 

Ensure that the opacity of the series matches the opacity defined in the gridLineShow().

The dataBound event gets fired when a data is bound to the Chart as in:

mounted(){
var radarChart = this.$refs.radarChart.kendoWidget();
radarChart.setDataSource(this.localDataSource);
radarChart.resize();
}

 

This should render the chart as in the attached "Chart with GridLines.jpg" attachment. We prefer subtle gridlines, so used rgba(0, 0, 0, 0.1).

If you want gridlines to render bolder lines, use rgb(0,0,0) so it will render as in "GridLines2.jpg"

I have shared the solution in the below link:

https://stackblitz.com/edit/qnruem-lr5ffp

 

Best regards

Anuradha

 

Attached Files:
ADMIN
Alex Hajigeorgieva
Posted on: 11 Jul 2019 14:39
Hi, Anuradha,

Thank you for letting us know.

It would be fantastic if you share the workaround that met your expectations for now with the Kendo UI community while this feature request is still waiting to gain popularity.

Thank you very much in advance.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Anuradha
Posted on: 10 Jul 2019 07:22

Hi Alex,

We have developed a workaround for this case wherein we are manually rendering the grid-lines on top of the chart area.

Since our objective is primarily achieved, we would prefer to wait for a release from Telerik as per your development cycle and implement the solution when it is released.

Thanks for your time.

 

Best regards

Anuradha

Anuradha
Posted on: 08 Jul 2019 13:51

Hi Alex,

We are discussing on this and will get back to you once we have reached a decision.

 

Regards

Anuradha

ADMIN
Alex Hajigeorgieva
Posted on: 02 Jul 2019 08:17
Hi, Anuradha,

The Professional Services department gathers a team that takes on the task at hand, in this case a Feature Acceleration. They estimate the resources and timeframe necessary to deliver the finished result as soon as possible and will be able to give you a quote precisely of time and cost.

If you like, I can get a colleague from that department to get in touch with you with an estimate.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Anuradha
Posted on: 25 Jun 2019 10:17
Hi Alex,
Thank you so much for the follow-up and contribution towards the votes.

Yes, this feature does add value for our client. We would also like to know if there is an additional cost involved in the Feature Acceleration Program. Please do update us.

We highly appreciate all your efforts towards multiple alternative solutions and suggestions, Alex.

Best regards
Anuradha
ADMIN
Alex Hajigeorgieva
Posted on: 25 Jun 2019 07:49
Hi, Anuradha,

Thank you for the shared forum thread and further explanations regarding the feature.

I have added one more vote to this feature request on behalf of the customer who posted the forum thread in 2013.

If this feature request gains popularity, it will definitely be considered for future implementation. However, if the availability of this feature is important for the success of the project that you are working on, you could consider our Feature Acceleration Programme instead. This is a separate offering whereby clients are able to negotiate a feature to become available sooner than planned.

If you are interested in checking out such possibility, I can get someone from that department to contact you. Let me know if you would like that.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Anuradha
Posted on: 18 Jun 2019 14:47

Thank you, Alex for the time taken to provide workarounds. My client is keen on having the gridlines visible and feels it adds more value, which is why we wanted to raise this feature request. We wanted to have a checkbox in the user interface that would enable toggling the gridlines on and off once this feature was made available for added flexibility.

 

We have also noticed that this feature was being anticipated by other developers for a few years now (since 2013). Please refer below forum where this has been discussed.

https://www.telerik.com/forums/show-radar-chart-grid-through-area-or-lines

 

While you may choose not to make this a default property that should be enabled by default, this feature could just be a switch to turn on for those who want the gridlines visible. We feel it adds more value if this flexibility is provided.

 

Regards

Anuradha

ADMIN
Alex Hajigeorgieva
Posted on: 18 Jun 2019 13:30
Hello, Anuradha,

If you wish to have both the valueAxis and the grid likes black, then add the axisDefaults.majorGridLines.color configuration:

axisDefaults:{
  majorGridLines:{
    color:"black"
  },
},

As far as placing the chart series underneath them, this is not something that is available or planned. The team which develops the charts engines does not have enough evidence to understand any value that such addition adds and it is believed that it would lead to poorer UX.

An alternative would be to change the opacity on seriesOver event to the currently hovered series. Unfortunately, the seriesOver event is missing from the Vue suite and I have added an issue in our private repository 5 days ago:




This is what it looks like with jQuery:

https://dojo.telerik.com/@bubblemaster/opIcOxix/2

So as an alternative, you can use the seriesClick event for Vue instead:

https://www.telerik.com/kendo-vue-ui/components/charts/api/chart/Chart/#toc-seriesclick

Kind Regards,
Alex Hajigeorgieva
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Anuradha
Posted on: 11 Jun 2019 14:11

Thanks Alex, for your inputs. 

However I use a radarArea and not radarLine. My issue like I mentioned in the original request,  because the opacity of radarArea is 1.0, the LineAxis and MajorGridlines were not visible. 

I want the MajorGridLines of both CategoryAxis as well as ValueAxis for this requirement to work.

  1. Please check attachment "Chart1.jpg". This is the basic chart with the gridLines when the series is not plotted. This is achieved by setting the MajorGridLines of both the ValueAxis and CategoryAxis.
  2. Now check "Chart2.jpg". This is how the chart gets rendered at the moment. We must get the GridLines over the RadarArea.

Thanks to your solution, now I get the valueAxis visible. It would be great to have the gridlines working in this way as well.

Please use this code:

SeriesDefaults:

seriesDefaults:{
type:"radarArea",
opacity: 1.0
}

 

ValueAxis:

valueAxis: {
  zIndex:1,
labels: {
format: "{0}%"
},
line: {
visible: true
},
majorGridLines: {
width: 1,
color: "black"
}
}

 

CategoryAxis:

categoryAxis: {
categories: [
"Experience", "Communication", "Friendliness",
"Subject knowledge", "Presentation", "Education"
],
majorGridLines: {
width: 1,
color: "black"
}
}

 

Much appreciate your time and support.

 Regards

Anuradha

Attached Files:
ADMIN
Alex Hajigeorgieva
Posted on: 11 Jun 2019 08:51
Hello, Anuradha,

The zIndex works in exactly the same way for the Vue.js wrappers, there is no need to translate it:

<kendo-chart :title-text="'Kendo Chart Example'"
    :series="series"
    :series-defaults="seriesDefaults"
    :value-axis="valueAxis"
</kendo-chart>             
 
new Vue({
 el: "#vueapp",
 data: function() {
 return {
  valueAxis: {
    zIndex:1
   }
  }
})

The majorGridLines of the categoryAxis are visible by default, they provide the spiderweb look:

https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/categoryaxis.majorgridlines#categoryaxismajorgridlinesvisible

The image referenced here resembles series type radarLine. Here is a runnable Kendo UI RadaLine Chart in a Vue.js application. Let me know if there is anything that you would like different than the provided demo. It seems to me that it has all that is pictured in the image:

https://stackblitz.com/edit/qnruem

- the majorGridLines are visible
- the categories are visible
- the type is radarLine
- the valueAxis has a higher zIndex than the series



Look forward to hearing back from you.


Kind Regards,
Alex Hajigeorgieva
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Anuradha
Posted on: 04 Jun 2019 09:57

Thanks Alex,

While your example works for jQuery Chart, I am unable to translate into VueJS. 

1. How to get the zIndex working in VueJS?

2. How do I get the gridlines visible? (Please refer attachment.) We also want the grildlines (resembline spiderweb in the picture) to be visible.

Please advise. Appreciate your time.

 

Regards

Anuradha

 

 

Attached Files:
ADMIN
Alex Hajigeorgieva
Posted on: 04 Jun 2019 08:48
Hi, Anuradha,

The Kendo UI Chart valueAxis already has the capability to be drawn on top of the area, however this property is not documented as it is used internally - as part of the private chart API.

Could you try the following and let us know if it helps in your scenario:

valueAxis: {
   zIndex:1,
   /* other config */
}

https://dojo.telerik.com/@bubblemaster/ohaRoXOz

Kind Regards,
Alex Hajigeorgieva
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Anuradha
Posted on: 28 May 2019 11:50

Request this ValueAxis feature along with the base gridlines to be available when rendered. Please refer attachment.

I want the gridlines also to overlay the RadarArea series when rendered.

 

Attached Files:
Create an account Log In
View
Type
Status
Category