This is a migrated thread and some comments may be shown as answers.

Radar chart formatting

3 Answers 48 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Karl
Top achievements
Rank 1
Karl asked on 13 Dec 2016, 01:05 PM

I am trying to make the chart attached, and there are two main problems.

1. Is it possible to position the labels? The defaults have them overlapping (this is also clear on the demo chart at http://demos.telerik.com/jsp-ui/radar-charts/index)

2. Is it possible to add background colours per the attached?  These are basically for grouping. I tried adding another series, but as a radarArea it doesn't apply the colours except to the tooltips (and overlaps the blue area of the first series), and as a radarColumn chart is conceals everything else (even if that is the first series).

Can you help me?

 

Note: I have no idea why the percentages are backwards in the screenshot - please disregard that.

3 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 15 Dec 2016, 07:51 AM
Hi Karl,

Straight to the questions

1. You could customize labels appearance via their configuration options - step, template, visual etc.;

2. To achieve this one you could set categoryAxis.plotBands. Take a look at this dojo: http://dojo.telerik.com/@Iliana/OkuJa

Regards,
Iliana Nikolova
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Karl
Top achievements
Rank 1
answered on 16 Dec 2016, 10:19 AM

Thank you for your reply.

I hadn't thought of plot bands, although I had achieved a similar result using a radarColumn series.  I don't suppose there's any way to only colour the parts outside of the blue area series  (aside from making the series opaque, which works but hides the grid)?

For the labels, they are mostly ok, except for near the top and bottom.  The ones to the left of the chart need to end at the grid point, the ones on the right need to start at it (as they do everywhere except near the top/bottom).. and the top one will need to move up a bit.

Presumably I need to use the visual config option for this, but I'm not really sure how to go about it.

0
Iliana Nikolova
Telerik team
answered on 20 Dec 2016, 07:57 AM
Hi Karl,

You could try rendering custom plotBands or drawing on the surface of the chart via the drawing API. Take a look at the following examples: 

http://docs.telerik.com/kendo-ui/controls/charts/how-to/draw-on-scatter-plots

http://docs.telerik.com/kendo-ui/controls/charts/how-to/custom-plot-bands

Regarding the labels, there is no built-in solution for this case. What you could try is using categoryAxis.labels.template and trim the labels after specific length.

Regards,
Iliana Nikolova
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Charts
Asked by
Karl
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Karl
Top achievements
Rank 1
Share this question
or