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

Radar chart formatting

3 Answers 226 Views

Charts

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

Karl asked on 13 Dec 2016, 01:05 PM

screen-shot-2016-12-13-at-13-01-08.png

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

answered on 16 Dec 2016, 10:19 AM

screen-shot-2016-12-16-at-10-16-46.png

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.

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.