[Chartjs]-How can I implement Polar area charts with Chart.js and Canvas

by

0👍

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.

Leave a comment