Label for each data set in pie chart

[jibaku]

I would like to know if it's possible to specify different labels for multiple data set in pie chart in the 2.0 alpha 3 version. If not, is it a contribution that would be interesting for the project ?

[tannerlinsley]

Yeah, that's interesting. We didn't see much use of the multiple dataset pie in the first place, we just kinda put it in as an experiment and novelty and it worked great!
I think this would be a good feature. If you have it coded, PR it!.

Not really a breaking API change, so there's no rush. Really, a good idea.

[jibaku]

I've no code for the moment. The idea is to allow for labels in data.datasets.labels rather than data.labels.

[etimberg]

Adding data.dataset.labels to override data.labels is not hard at all. :)

[etimberg]

Turns out we already had this functionality in Controllers.Doughtnut.js however the tooltip did not use the element label. All we need to do is have the tooltip look for the label in the element.

@jibaku you can set data.dataset.label to an array of labels. These will have precedence over data.labels. If data.dataset.label is not specified, it will fall back to data.labels. You will need to rebuild from the current v2.0-dev branch code to get the latest changes. Do an NPM install before building to get the latest dependencies.

[gentisaliu]

It is still not possible to display which pie corresponds to which dataset (like in this picture).

This would be very useful.

[Erdou]

@gentisaliu Looks like it has only been done for the Doughnut chart.
If you followed what @etimberg said, add this to chart.options to make it work:

tooltips: {
    callbacks: {
        label: function(item, data) {
            return data.datasets[item.datasetIndex].label[item.index]
                        + ": " + data.datasets[item.datasetIndex].data[item.index];
        }
    }
}

[jbuchert50]

I know this is closed but this accomplishes what you are asking
I am posting this here because I spent quite a while struggling with it.

      tooltips: {
      callbacks: {
      label: function(tooltipItem, data) {
            var dslabels = data.labels[tooltipItem.index];
            var dataset = data.datasets[tooltipItem.datasetIndex];
            var dslabelamt = dataset.data[tooltipItem.index];";
            return dslabels + '-' + data.datasets[tooltipItem.datasetIndex].label + ': ' + dslabelamt;
            }
        }
   }

[GammaGames]

I discovered you can put whatever arbitrary values in the dataset, so I just added a labels attribute to each dataset and updated the label callback. The legend is broken, but I would need to update how hiding works to remove data from the other data set when one slice is hidden anyway for full functionality. So hovering to see what the values are works well for me!

this.multiPie= new Chart($(#selector), {
  type: 'pie',
  data: {
    datasets: [
      {
        data: data1,
        label: 'Data 1',
        labels: data1Labels
      },
      {
        data: data2,
        label: 'Data 2',
        labels: data2Labels
      }
    ],
  },
  options: {
    tooltips: {
      callbacks: {
        label: function(tooltipItem, data) {
          var label = data.datasets[tooltipItem.datasetIndex].labels[tooltipItem.index];
          var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
          return label + ': ' + value;
        }
      }
    }
  }
});

And a preview of the chart:

Now if only I could set the cutoutPercentage for each dataset as well...

[dangkhoa12pfiev3]

Hi.
I follow @etimberg and @GammaGames's code.
My problem is that when I hover a segment, it pops up label of items in two datasets which has the same index.
Here's my code
`

            var ctx = document.getElementById("myChart");

            var data = {
                // labels: ["a","b","c","d","e","f"],
                datasets: [
                    {
                        data: [10, 20, 20, 30],
                        label: 'Data 1',
                        labels: ["a", "b", "c", "d"],
                        backgroundColor : ['#ff6384','#36a2eb','#cc65fe','#ffce56']
                    },
                    {
                        data: [30, 50],
                        label: 'Data 2',
                        labels: ["e", "f"],
                        backgroundColor : ['#ffffbb','#0000aa']
                    }
                ],
            };

            var options = {
                tooltips: {
                    callbacks: {
                        label: function (item, data) {
                            console.log(item)
                            var label = data.datasets[item.datasetIndex].labels[item.index];
                            var value = data.datasets[item.datasetIndex].data[item.index];
                            return label + ': ' + value;
                        }
                    }
                }
            };

            var pieChart = new Chart(ctx, {
                type: 'pie',
                data: data,
                options: options
            })` 

For example, when i hover the yellow segment (belongs to the second dataset), 2 labels correspond with first item in 2 datasets appear.
I only want, in this case, label of the second dataset. How can I achieve it ?
Thank you.

[GammaGames]

@dangkhoa12pfiev3 What version of chartjs are you using? I copied your code and put it in this jsfiddle and it's working fine for me in both chrome and firefox

[dangkhoa12pfiev3]

Hi,
Thank you for your answer. I discovered that it's the problem when I use ChartJS with AngularJS directive, when I remove the script angular-chartjs it worked.

[andersonJordan]

Hi,

Recently I updated Chart.js and everything broke. Can someone help me with the below code.

Here is an Example of old version : http://jsfiddle.net/x7q5tav6/1/

Old Version

tooltips: {

  callbacks: {

    label: function(tooltipItem, data) {

      var label = data.datasets[tooltipItem.datasetIndex].labels[tooltipItem.index];

      var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];

      return label + ': ' + value;

    }

  }

} 

---

New version

label: function (context){

      var datasets = context.myChart.data.datasets;

      var contextdatasetindex = context.datasetIndex;

      var index = context.dataIndex;

      var label =  datasets[contextdatasetindex].label[index];

      var value = datasets[contextdatasetindex].data[index];
      
      return label + ": " + value;

}

Thank you.

[kurkle]

@andersonJordan please read the v3 migration guide

[andersonJordan]

I have tried to understand but couldn't figure out. I did try and wrote the new version that is compatible with 3.2.0 or should I say at least I thought it was compatible. Any help would be appreciated. Thank you.

[LeeLenaleee]

@andersonJordan idk where you got the property myChart from since it does not exist on the context. You should call the chart property

[andersonJordan]

I have tried calling chart, it still hasn't worked for me. IDK where I'm going wrong.

[siamchen]

The correct configuration is:

	stats_consents_chart = new Chart(stats_consents, {
		type: "doughnut",
		data: @Html.Raw(ViewData["StatsConsents"]),
		options: {
			plugins: {
				legend: { display: false },
				title: {
					display: true,
					text: "Patient by Consent Status (Total @ViewData["PtCount"])",
					padding: { top: 0, bottom: 4 }
				},
				tooltip: {
					callbacks: {
						label: function(context) {
							let label = context.dataset.labels[context.dataIndex] + ": " + context.dataset.data[context.dataIndex];
							return label;
						}
					}
				}
			},
			layout: {
				padding: 8
			}
		}
	});