Search code examples
javascriptchart.jsradar-chart

What's the most effective way to implement a radar plot with 50 points at arbitrary locations using chart.js

Consider a sequence of data along the following lines:

data = [{angle:1.2,value:1.2},...,{angle:355.2: value:5.6}];

I'd like to display this data on a radially scaled plot (i.e. circular bands indicating how high the value of each point is) to show angle vs value. Angles will change by a small but uncontrollable quantity for each data set but there will always be ~50 of them spaced fairly evenly around the chart.

It looks like chart.js has two options which don't quite fit the bill:

  • A Radar plot which appears to require a label per point but without an obvious way to control where those labels are applied.
  • An x-y scatter which I could calculate x/y co-ordinates for but which doesn't have the radial scale to help visualise the value of each point.

Is there a way to combine the two perhaps or some option I've missed to control them to achieve the result I'm looking for here?

Edit - for example, this shows the data but lacks a radial scale:

https://jsfiddle.net/7d7ghaxx/4/

**Edit2 - This is the sort of thing I Would expect to see as a result:

enter image description here

Solution

  • Demo & Code :

    https://stackblitz.com/edit/js-jp4xm4?file=index.js

    Explanation:

    1. Used a scatter chart to plot points
    2. Added (wrote) a chartjs plugin that converts points from polar to cartesian on beforeUpdate so you don't have to worry about converting before every update
    3. Made x & y grid (not axes through origin) hide by adding gridLines: { color: 'transparent' } and ticks: { display: false }
    4. Made min and max (options in ticks) of both axes equal so that the orgin is at the center
    5. Added a radialLinear scale for the polar grid

    (Update 1)

    1. Added a tooltip label callback to show tooltip as (r,θ) instead of default (x,y)

    (Update 2)

    1. Added (wrote) a beforeDraw plugin to fill the ctx with light blue color as the OP wanted

    PS: (Pointing out just to be a little competitive) I have used chartjs (unlike other answers) because the OP wants a chartjs solution as it's clearly written in the question: "using chart.js". There might be solutions better than chartjs but that's irrelevant.