Chartjs-Polar Area Chart with equal sized section

by

0👍

✅

I think you don’t need a polar area but a pie chart should fit better the picture you posted.

You could define a data array with all the same value "1 / labels.length" where labels are the months of the posted picture.

Then you should use Datalabels plugin in order to set the real number to show in the chart.

const labels = ['January', 'Fabruary', 'March', 'April', 'May', 'June', 'July'];
const data = [65, 8, 90, 81, 56, 55, 40];
const value = 1 / labels.length;
const colors = [
  'rgb(53, 152, 219)',
  'rgb(46, 204, 113)',
  'rgb(155, 89, 182)',
  'rgb(241, 196, 15)',
  'rgb(189, 195, 199)',
  'rgb(203, 184, 214)',
  'rgb(216, 252, 207)'
];

const ctx = document.getElementById("myChart");
const polarChart = new Chart(ctx, {
  type: 'pie',
  plugins: [ChartDataLabels],
  data: {
    labels: labels,
    datasets: [{
      data: labels.concat().fill(value),
      backgroundColor: colors,
    }]
  },
  options: {
    plugins: {
      legend: {
        position: 'right'
      },
      datalabels: {
        color: 'black',
        font: {
          size: 24,
          weight: 'bold'
        },
        formatter: (value, context) => data[context.dataIndex]
      }
    },
  }
});
.myChartDiv {
  max-width: 600px;
  max-height: 400px;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.1.0/dist/chartjs-plugin-datalabels.min.js"></script>
<div class="myChartDiv">
  <canvas id="myChart" width="600" height="400"></canvas>
</div>

Leave a comment