score:10
Accepted answer
you can control the label of the tooltip with it's callback
.
if you just want to display the text of the label add this to your options
:
tooltips: {
callbacks: {
label: function(tooltipitems, data) {
return data.labels[tooltipitems.index];
}
}
}
by the way: your snippet is not working because you didn't include chart.js. i've copied your snippet and added my change below:
var canvasp = document.getelementbyid("piechart");
var ctxp = canvasp.getcontext('2d');
var mypiechart = new chart(ctxp, {
type: 'pie',
data: {
labels: ["värde 1", "värde 2", "värde 3", "värde 4", "värde 5", "värde 6", "värde 7"],
datasets: [{
data: [1, 5, 10, 20, 50, 70, 50],
backgroundcolor: ["#64b5f6", "#ffd54f", "#2196f3", "#ffc107", "#1976d2", "#ffa000", "#0d47a1"],
hoverbackgroundcolor: ["#b2ebf2", "#ffccbc", "#4dd0e1", "#ff8a65", "#00bcd4", "#ff5722", "#0097a7"]
}]
},
options: {
legend: {
display: true,
position: "right"
},
tooltips: {
callbacks: {
label: function(tooltipitems, data) {
return data.labels[tooltipitems.index];
}
}
}
}
});
canvasp.onclick = function(e) {
var slice = mypiechart.getelementatevent(e);
if (!slice.length) return; // return if not clicked on slice
var label = slice[0]._model.label;
switch (label) {
// add case for each label/slice
case 'värde 5':
alert('clicked on slice 5');
window.open('www.example.com/foo');
break;
case 'värde 6':
alert('clicked on slice 6');
window.open('www.example.com/bar');
break;
// add rests ...
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.7.1/chart.min.js"></script>
<canvas id="piechart" width="400" height="400"></canvas>
Source: stackoverflow.com
Related Query
- Charts.js - Need to remove the data value from the Tooltip
- I need a PHP query to grab data from the database and use in my bar charts for results
- How do you remove the data value from the mouse-over result in radar chart?
- Chart.js – how to remove data entries from the tooltip?
- How do I customize y-axis labels and randomly pick the value from the data range for x-axis in Chart js
- Change the hover data value from to string
- How to show tooltip value of all data falling on the same axis in chart js?
- Is there anyway to remove the dots for points from angularjs charts
- How to create a charts in Razor Pages pulling data from the database?
- ChartJS tooltip values aren't matching the data after updating multiple charts
- getting additional value fields from data source for dx.chartjs doughnut chart
- Get data from SQLite as an array and generate charts with the data using Chart.js in an HTML
- So, I'm fetching my data from phpMyAdmin MySQL to the chart.js, but I need it with AJAX, but how AJAX works with Chart.js?
- How to remove square label from tooltip and make its information in one line?
- chart js tooltip how to control the data that show
- Move tooltip further from data point for Chart.js?
- Add all data in the tooltip of Chart JS
- How can I remove extra whitespace from the bottom of a line chart in chart.js?
- Why can I not see a data value when hovering over a point on the radar chart?
- Remove the label and show only value in tooltips of a bar chart
- How to access specific data values from tooltip - Chart.js
- How to hide zero data value from chartjs?
- Chart JS display Data Value on the top of the Bar
- How do I keep chart.js charts in one JS file, and not get errors when the ID from the JS file don't exist on one specific html page?
- Charts.js - Display data label only for the last value
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- Angular chart how to show the legend data value by default along with legend name
- How to achieve the best possible performance with mutable data and real-time charts in React?
- How to remove background color and color example from tooltip in Chart.js?
- How can I load multiple Chartjs charts with different data on the same page?
More Query from same tag
- Trying to have Doughnut chart with dql result chartjs
- Remove zeroline in chartJS Horizontal Bar chart
- Ng2-charts set color for one specific value in dataset
- Chart JS - How to output JSON objects into PIE variant
- How to custom index label on each bar chart using chartjs?
- Cycle through finite set of colours for indefinite set of data in Javascript
- Chart.js date formatting use for
- Have the time on x axes to show the last 24 hours from current time
- Line graph in Angular 7 not working - is data type proper?
- Change axes position in line chart
- Unable to make y-axis to begin at zero on Charts.js v2.1.4
- How I can add some horizontal padding to x-axis tick values in Chart.js?
- Create data in data with Chartjs
- Changing style of individual point Chart.js
- Why isn't my X axes on my bar chart starting from zero?
- chart.js scatter chart - displaying label specific to point in tooltip
- How to set a time scale to a ChartJS chart from JSON?
- How can i add multiple dataset in chart.js package in Laravel
- Chart.js in Vue defining multiple datasets
- How to take a set of Date objects and display the frequency based on time of day using ChartJS
- Bold text inside doughnut chart (chart.js)
- ChartJS - Custom tooltip with icon
- How to add symbols in angular charts?
- How to change the z-index of chartjs annotations label?
- how to filter dataset from labels using ChartJS
- Chat.js, Codeigniter and MySQL. Something wrong on recover data
- onZoom not triggered when zooming
- Using click event handler prevents tooltips from displaying on hover
- Updating chart.js bar graph in real time
- Execute SQL prepared statement in AJAX