Polar Area Chart with equal sized section

Question

I would like to create an Polar Area Chart with equal size sections (not based on the actual value) like this with ng2-charts: Example

I thought that using the scales.r.max setting at 1 will create the effect I need, but any data that exceeds the max value overflow outside the bound of the chart instead of clipping it.

Does anybody have an idea how to achieve this?

Thanks in advance for your help,

user2057925 · Answer

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

Polar Area Chart with equal sized section

1 Answers