How can I implement Polar area charts with Chart.js and Canvas

user_11431143 0
Viewed 130

Now,I would like to implement a polar area chart like following picture with Chart.js and Canvas.

How should I do to implement it?

enter image description here

So far,I tried the following code but it does not work.

<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <style media="screen" type="text/css">#container{width:100%;height:100%;top:0;left:0;right:0;bottom:0;position:absolute;}</style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
    <script>
      document.addEventListener("DOMContentLoaded", function() {
        const canvas = document.getElementById('chart')
        const ctx = canvas.getContext('2d');
        const gradient = ctx.createRadialGradient(75, 50, 5, 90, 60, 100)
        const [ w , h ] = [ canvas.clientWidth , canvas.clientHeight ];
        gradient.addColorStop(0.0 , 'rgb(255,0,0)');
        gradient.addColorStop(0.5 , 'rgb(0,255,0)');

        const data = {
          backgroundColor: [gradient,gradient,gradient,gradient,gradient],
          labels: ['First label', 'Second label', 'Third label', 'Fourth label', 'Fifth label'],
          datasets: [
            {
              label: 'First dataset',
              backgroundColor: gradient,
              data: [50, 20, 40, 50, 22]
            }
          ]
        };

        const options = {
          tooltips: {
            mode: 'label'
          },

        };

        const myRadarChart = new Chart(ctx, {
          type: 'polarArea',
          data,
          options
        });
    });
    </script>
</head>
<body>
    <canvas id="chart" width="${width}" height="${width}" />
</body>
</html>
chart.js canvas javascript
1 Answers

Try like this:

<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <style media="screen" type="text/css">#container{width:100%;height:100%;top:0;left:0;right:0;bottom:0;position:absolute;}</style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
    <script>
      document.addEventListener("DOMContentLoaded", function() {
        const canvas = document.getElementById('chart')
        const ctx = canvas.getContext('2d');
        const [ w , h ] = [ canvas.clientWidth , canvas.clientHeight ];
        const r = 300;
        const gradient = ctx.createRadialGradient(w, h*1.2, 0, w, h, r * 0.6);
        gradient.addColorStop(0.0 , 'rgb(255,0,0)');
        gradient.addColorStop(1 , 'rgb(0,255,0)');

        const data = {
          backgroundColor: [gradient,gradient,gradient,gradient,gradient],
          labels: ['First label', 'Second label', 'Third label', 'Fourth label', 'Fifth label'],
          datasets: [
            {
              label: 'First dataset',
              backgroundColor: gradient,
              data: [50, 20, 40, 50, 22]
            }
          ]
        };

        const options = {
          tooltips: {
            mode: 'label'
          },

        };

        const myRadarChart = new Chart(ctx, {
          type: 'polarArea',
          data,
          options
        });
    });
    </script>
</head>
<body>
    <canvas id="chart" width="${width}" height="${width}" />
</body>
</html>

The code is good! It's only a case of using the canvas width, height and radius of the chart's largest circle to position the gradient correctly. Minor adjustments can also be made if the final chart position in the canvas shifts (e.g. where a different canvas aspect ratio is used).

From there, it is simple to create a new gradient in the same way for each combination of colours you wish to use.

user_26872040
Related