Home > OS >  How add the sizes of the slices in the pie chart (at the top) in Chart.js?
How add the sizes of the slices in the pie chart (at the top) in Chart.js?

Time:10-26

I am starting to learn the chart.js library.

I drew a pie chart (like "pie"). When you hover over the slices of the diagram, a number appears in the pop-up window that sets the size of the sector.

   new chart(
      document.getElementById('diagram_1').getContext('2d'), {
         type: 'pie',
         data: {
            labels: [
               'Завершенная задача',
               'Новая задача',
               'Ошибка выполнения'
            ],
            datasets: [{
               label: '# of Votes',
               data: [@successful_tasks, @new_tasks, @error_tasks],
               backgroundColor: [
                  'rgba(54, 162, 235, 0.2)',
                  'rgba(255, 206, 86, 0.2)',
                  'rgba(255, 99, 132, 0.2)'
               ],
               borderColor: [
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(255, 99, 132, 1)'
               ],
               borderWidth: 1
            }]
         },
         options: {
            scales: {
               y: {
                  beginAtZero: true
               }
            },
            responsive: false
         }
      }
   )

How can you make this number still displayed at the top, where the sectors are listed (I marked this place with a red circle in the picture)?

enter image description here

I can add the required number to the labels array

...
data: {
   labels: [
      'Завершенная задача: '   @successful_tasks,
      'Новая задача: '   @new_tasks,
      'Ошибка выполнения: '   @error_tasks
   ],
...

But then this number will appear twice in the tooltip

enter image description here

CodePudding user response:

You can use the plugin system for this:

var options = {
  type: 'pie',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]
    }]
  },
  options: {
    plugins: {
      customNumber: {
        textColor: 'red',
        xOffset: 10,
        yOffset: 0,
        font: '24px  Comic Sans MS'
      }
    }
  },
  plugins: [{
    id: 'customNumber',
    afterDraw: (chart, args, opts) => {
      const hoveredSlice = chart._active[0];
      const {
        ctx,
        chartArea: {
          right
        }
      } = chart;

      if (!hoveredSlice) {
        return;
      }

      ctx.font = opts.font || '24px verdana, sans-serif'
      ctx.fillStyle = opts.textColor || 'black'

      const val = chart.data.datasets[hoveredSlice.datasetIndex].data[hoveredSlice.index];
      const meassures = ctx.measureText(val);
      const height = ctx.measureText('M').width;

      ctx.fillText(val, (right - meassures.width - (opts.xOffset || 0)), height   (opts.yOffset || 0))
    }
  }]
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script>
</body>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response:

I found the answer. My project is written in CoffeeScript, but I think it would be more useful for the StackOverflow community to post the code in JS.

options: {
  legend: {
    labels: {
      generateLabels: function(chart) {
        var data = chart.data;
        if (data.labels.length && data.datasets.length) {
          return data.labels.map(function(label, i) {
            var meta = chart.getDatasetMeta(0);
            var ds = data.datasets[0];
            var arc = meta.data[i];
            var custom = arc && arc.custom || {};
            var getValueAtIndexOrDefault = Chart.helpers.getValueAtIndexOrDefault;
            var arcOpts = chart.options.elements.arc;
            var fill = custom.backgroundColor ? custom.backgroundColor : getValueAtIndexOrDefault(ds.backgroundColor, i, arcOpts.backgroundColor);
            var stroke = custom.borderColor ? custom.borderColor : getValueAtIndexOrDefault(ds.borderColor, i, arcOpts.borderColor);
            var bw = custom.borderWidth ? custom.borderWidth : getValueAtIndexOrDefault(ds.borderWidth, i, arcOpts.borderWidth);
            var value = chart.config.data.datasets[arc._datasetIndex].data[arc._index];

            return {
                text: label   ": "   value,
                fillStyle: fill,
                strokeStyle: stroke,
                lineWidth: bw,
                hidden: isNaN(ds.data[i]) || meta.data[i].hidden,
                index: i
            };
          });
        } else {
          return [];
        }
      }
    }
  }
}
  • Related