score:2
Accepted answer
according to events from chart.js documentation, onhover
is invoked with the following arguments: the event
, an array
of active elements (bars, points, etc), and the chart
. therefore, your onhover
function could be written as follows:
onhover: (e, activeelements, chart) => {
if (activeelements[0]) {
let ctx = activeelements[0].element.$context;
let label = chart.data.labels[ctx.dataindex];
let value = chart.data.datasets[0].data[ctx.dataindex];
console.log(label + ': ' + value);
}
}
please take a look at your amended code below and see how it works.
new chart('tot_pop_chart', {
type: 'doughnut',
data: {
labels: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'],
datasets: [{
data: [1, 2, 3, 4, 5, 6, 7, 8],
backgroundcolor: ['rgba(200,88,120, 1)',
'rgba(205,81,54, 1)',
'rgba(200,134,68, 1)',
'rgba(153,154,62, 1)',
'rgba(87,169,91, 1)',
'rgba(69,178,196, 1)',
'rgba(114,120,203, 1)',
'rgba(184,94,188, 1)'
],
borderwidth: 1,
bordercolor: '#fff3e3'
}
]
},
options: {
animation: {},
plugins: {
title: {
display: true,
text: "chart",
font: {
size: 16
}
},
legend: {
display: false
},
tooltip: {
enabled: true,
},
},
onhover: (e, activeelements, chart) => {
if (activeelements[0]) {
let ctx = activeelements[0].element.$context;
let label = chart.data.labels[ctx.dataindex];
let value = chart.data.datasets[0].data[ctx.dataindex];
console.log(label + ': ' + value);
}
}
}
}
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.5.0/chart.min.js"></script>
<canvas id="tot_pop_chart"></canvas>
score:1
from chartjs v2.5 onwards the onhover() parameters have changed.
you can access the active element like onhover: (e, activeelements) => {}
onhover: (e, activeelements) => {
// console.log("hovering1", e);
if (activeelements[0] != undefined){
console.log(activeelements[0].element.$context);
// print label and data here
}
}
Source: stackoverflow.com
Related Query
- chartjs: doughnut graph onHover get labels and data
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- Graph streaming real-time data with react and chartjs
- How to reuse a Chartjs Chart component in with different Data and get past the **Canvas is already in use** error?
- ChartJS have xAxes labels match data source
- ChartJS AJAX load labels and data
- Many Flots using ChartJS and Ajax get data values
- How to get rid of old data and of old graph in Chart.js?
- Chartjs create chart with big data and fixed labels
- ChartJS - Returning labels and data from server on different calls
- How to implement doughnut ChartJS with CodeIgniter 3 and display data from database
- make chartJS labels clickable and get label details
- Show and plot zero values on ChartJS line graph when no data
- ng2-charts update labels and data
- Chartjs v2 - format tooltip for multiple data sets (bar and line)
- Chartjs hide data point labels
- How to remove gridlines and grid labels in Chartjs Radar?
- How to show data values or index labels in ChartJs (Latest Version)
- How to feed hour and minute data into chartJS
- Create a rounded bar graph with Angular and chartJS
- React ChartJS 2 : Get data on clicking the chart
- Chartjs : data labels getting overlapped in smaller datasets using chartjs-plugin-datalabels
- Show Data labels on Bar in ChartJS
- How to get onClick Event for a Label in ChartJS and React?
- How do I get tool tips to work on 2 data set half doughnut chart?
- Chart JS: Ignoring x values and putting point data on first available labels
- Change font family of labels in piechart and linechart in chartjs
- Chartjs: Is it possible to hide the data labels on the axis but show up on the graph on hover?
- ChartJS multiple X axis and extra labels in y axis
- In Chart.js >3.0, on axis of type time, how to show labels and ticks only for existing data points (make labels reflect data)?
More Query from same tag
- Mapping data (from getJSON response) in Chart.js
- How can I scale my dataset values as a percentage of the index in chart.js?
- syntax to loop through docs send from express router and use it to plot chart js
- Chart.JS Multiline Chart with unknown numbers of Lines from JSON
- Converting JSON data into Chart.js array from strings
- How to print angular-chart
- how can i grab a property from an array of JSON objects to use the values of that property as a labels in my chart?
- Angular-Chart-JS - Line chart with different fill colors according to points' range
- ChartJS Doughnut Charts Gradient Fill
- How to append text or symbol to tooltip of chart.js
- Chart js custom datalabel from array
- Can I use a variable as index in for loop in python?
- Growing chart value - chart.js
- Have all label in Chartjs be at fixed positions
- ChartJS: Full Date for xAxis Labels?
- how can plot graph using json data
- Make labels of ChartJS radar in a few rows
- Change the font size of chart.js with chartkick
- How to use ChartJS object in a click event handler?
- ChartKick - ChartJs - Legend onClick override with default behaviour
- How to change color of column in chart js
- Multiple charts in one page - Chartjs
- Chart.js doubles in size each time user scrolls to it
- How to change the color of the bar in barchart if the data is negative - Angular Charts
- Not able to change chart.js x and y font colors
- Different amount of label and data in Chart.js
- Uncaught TypeError: Cannot read property 'offsetWidth' of undefined - chart.js
- Dynamic chart codeigniter
- How can I show chartjs datalabels only last bar?
- Control which lines have points?