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

Question

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 d

Answer 1

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)

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

(Update 2)

7. 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.