Skip to content
Advertisement

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

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

Advertisement

Answer

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 [];
        }
      }
    }
  }
}
User contributions licensed under: CC BY-SA
8 People found this is helpful
Advertisement