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

chart.js npm (2)

You can use D3 js Charts is usefull for radar chart check the example link bellow :

        //////////////////////// Set-Up ////////////////////////////// 

        var margin = {top: 100, right: 100, bottom: 100, left: 100},
            width = Math.min(700, window.innerWidth - 10) - margin.left - margin.right,
            height = Math.min(width, window.innerHeight - - margin.bottom - 20);

        ////////////////////////// Data ////////////////////////////// 

        var data = [
                  [//Yourchart values
        //////////////////// Draw the Chart ////////////////////////// 

        var color = d3.scale.ordinal()

        var radarChartOptions = {
          w: 500,
          h: 300,

          maxValue: 0.15,
          levels: 5,
          roundStrokes: true,
          color: color
        //Call function to draw the Radar chart
        RadarChart(".radarChart", data, radarChartOptions);

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:

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

Answer #1

Demo & Code :


  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.