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

by

8đź‘Ť

âś…

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.

6đź‘Ť

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.top - margin.bottom - 20);

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

        var data = [
                  [//Yourchart values
                    {axis:"",value:0.052},
                    {axis:"",value:0.052},
                    {axis:"",value:0.012},
                    {axis:"",value:0.012},
                    {axis:"",value:0.022},
                    {axis:"",value:0.052},
                    {axis:"",value:0.052},
                    {axis:"",value:0.021}           
                  ]
                ];
        ////////////////////////////////////////////////////////////// 
        //////////////////// Draw the Chart ////////////////////////// 
        ////////////////////////////////////////////////////////////// 

        var color = d3.scale.ordinal()
            .range(["#6cbb69","#CC333F","#00A0B0"]);

        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);

https://codepen.io/Nighamza/pen/bKmjGE

Leave a comment