Chartjs-How to create a biaxial pie chart using chart.js in Node-RED

by

0👍

You can use chartjs-plugin-datalabels and define a dataset with weight: 0 for displaying the numbers.

{
  data: [...Array(24)].map(v => 1),
  weight: 0,        
  rotation: -7.5,
  borderWidth: 20,
  datalabels: {
    formatter: (v, ctx) => ctx.dataIndex
  }
}

For improving the positioning of the numbers, please consult the chartjs-plugin-datalabels documentation here.

Please take a look at the runnable code below and see how it works.

Chart.register(ChartDataLabels);
new Chart('myChart', {
  type: 'pie',
  data: {
    labels: ['red', 'blue', 'green', 'gray'],
    datasets: [{
        data: [...Array(24)].map(v => 1),
        weight: 0,        
        rotation: -7.5,
        borderWidth: 20,
        datalabels: {
          formatter: (v, ctx) => ctx.dataIndex
        }
      },
      {
        label: 'My Dataset',
        data: [48, 56, 33, 44],
        backgroundColor: ['rgba(255, 0, 0, 0.2)', 'rgba(0, 0, 255, 0.2)', 'rgba(0, 255, 0, 0.2)', 'rgba(124, 124, 124, 0.2)'],
        datalabels: {
          textAlign: 'center',
          formatter: (v, ctx) => {
            const dataset = ctx.chart.data.datasets[1];
            return ctx.chart.data.labels[ctx.dataIndex] + ': ' + dataset.data[ctx.dataIndex];
          }
        }
      }
    ]
  },
  options: {
    responsive: false,
    plugins: {
      legend: {
        display: false
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>
<canvas id="myChart" height="300"></canvas>

Leave a comment