CODEWITHSUNDEEP
javascriptchart.js
Nar Jovan
Nar Jovan

Reputation: 234

Show Labels on Pie pieces instead of Data values Chart.js

I use Chart.js for making charts. I discovered today new plugin for the original Chart.js.

Plugin

After i added <script> tags with the plugin, it applied automatically values to all my charts. It looks great, but it shows number values. How do i make it show labels instead of values on the pieces of the pie? I have found some posts about the subject, but they contain different commands, and i tried all i could but it didn't change anything. Also for the future, tell me please how to turn off showing values for specific chart :)

fillPie()
{
    // Three arrays have same length
    let labelsArr = [];    // Array with some names
    let values  = [];   // Array with values
    let randomColor  = [];

    var ctx = document.getElementById('pie-chart').getContext('2d');
    var chart = new Chart(ctx, {

        // The type of chart we want to create
        type: 'pie',

        // The data for our dataset
        data: {
            labels: labelsArr,    // I want it to show these labels
            datasets: [{
                backgroundColor: randomColor, 
                data: values,     // It shows these values
                hoverBackgroundColor: "#fba999"
            }]
        },

        // Configuration options go here
        options: {
            legend: {
                display: false
            }
        }
    });
}

enter image description here

Upvotes: 0

Views: 1385

Answers (1)

HeadhunterKev
HeadhunterKev

Reputation: 1788

You can find the answer in the docs of the plugin: https://chartjs-plugin-datalabels.netlify.com/guide/formatting.html#custom-labels

options: {
  plugins: {
    datalabels: {
      formatter: function(value, context) {
        return context.chart.data.labels[context.dataIndex];
      }
    }
  }
}

The dev simonbrunel explained on GitHub how you can disable the plugin globally or for specific datasets. The following is a quote from the GitHub link:

That should be possible by disabling labels for all datasets via the plugin options at the chart level using the display option, then enable labels per dataset at the dataset level (dataset.datalabels.*):

new Chart('id', {
  data: {
    datasets: [{
      // no datalabels for this dataset
    }, {
        datalabels: {
          // display labels for this specific dataset
          display: true
        }
    }
  },
  options: {
    plugins: {
      datalabels: {
         // hide datalabels for all datasets
         display: false
      }
    }
  }
})

You can also globally disable labels for all charts using:

// Globally disable datalabels
Chart.defaults.global.plugins.datalabels.display = false

Upvotes: 1

Related Questions