Radar chart formatting

4 posts, 0 answers
  1. Karl
    Karl avatar
    4 posts
    Member since:
    Jan 2013

    Posted 13 Dec 2016 Link to this post

    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.

  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2606 posts

    Posted 15 Dec 2016 Link to this post

    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.
  3. Karl
    Karl avatar
    4 posts
    Member since:
    Jan 2013

    Posted 16 Dec 2016 Link to this post

    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.

  4. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2606 posts

    Posted 20 Dec 2016 Link to this post

    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.
Back to Top