Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature Request: Add Tooltip Value to dataset configuration #6009

Closed
devvythelopper opened this issue Jan 23, 2019 · 2 comments
Closed

Feature Request: Add Tooltip Value to dataset configuration #6009

devvythelopper opened this issue Jan 23, 2019 · 2 comments

Comments

@devvythelopper
Copy link

devvythelopper commented Jan 23, 2019

Feature Proposal

The tooltip on a pie chart consists of label and the number (XYZ: 100). It would be nice if there was an easy way to change it. I'm thinking of something along the following lines:

         {
		type: 'pie',
		data: {
			labels: ['A', 'B'],
			datasets: [
				{
					data: [360, 720],
					dataLabels: ["6 minutes", "12 minutes"],
					backgroundColor: colors
				}
			]
		}
	}

which should result in a tooltip of A: 6 minutes. This example is also my usecase. The numbers I'm displaying in the pie chart are time durations.

To make it more general you could add a formatTooltip function instead of dataLabels and optionally allow arbitrary DOM and not just text (unless you are drawing the tooltip on the canvas of course).

Feature Use Case

see example above

Possible Implementation

defaults._set('doughnut', {
        // HERE I LEFT OUT A LOT OF CODE

	tooltips: {
		callbacks: {
			title: function() {
				return '';
			},
			label: function(tooltipItem, data) {
				var dataLabel = data.labels[tooltipItem.index];

                                // CHANGE STARTS HERE
				var dataSet = data.datasets[tooltipItem.datasetIndex];

				var value;
				if(dataSet.dataLabels)
				{
					value = ': ' + dataSet.dataLabels[tooltipItem.index];
				}else{
					value = ': ' + dataSet.data[tooltipItem.index];
				}

                                // ENDS HERE

				if (helpers.isArray(dataLabel)) {
					// show value on first line of multiline label
					// need to clone because we are changing the value
					dataLabel = dataLabel.slice();
					dataLabel[0] += value;
				} else {
					dataLabel += value;
				}

				return dataLabel;
			}
		}
	}

@etimberg
Copy link
Member

@k44me I'm not sure if we'd want to add that into the default tooltip callback since you could easily change the default for your use case.

In terms of the tooltip content, we draw the tooltip on the canvas so we are limited in the API that we expose. We do have some samples though that show how to create an HTML tooltip.

@etimberg
Copy link
Member

Closing per my comment from 2019. I don't think we want to ship this in the core. A good solution might be to have a separate lib that provides a more advanced tooltip config function. This would make a good opt-in piece of functionality for users who need it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants