score:2
for versions > 3.x you find the target under native
options: {
plugins : {
legend: {
labels: {
onhover: function (e) {
e.native.target.style.cursor = 'pointer';
},
onleave: function (e) {
e.native.target.style.cursor = 'default';
}
}
}
}
}
score:5
based on @luca fagioli answer, in my case, i didn't want to disable the click events in my chart so i added:
events: ['mousemove', 'click'],
onhover: (event, chartelement) => {
event.target.style.cursor = chartelement[0] ? 'pointer' : 'default';
}
now that you have a cursor on the chart you want the cursor in the legend too - if they are clickable - so in the legend settings toy hold add:
onhover: (event) => {
event.target.style.cursor = 'pointer';
}
score:12
not sure if it applies to your case, but with chart.js 2.x i use this approach, which does not use the options.hover
property. just add this in the options:
onhover: (event, chartelement) => {
event.target.style.cursor = chartelement[0] ? 'pointer' : 'default';
}
hope it helps.
Source: stackoverflow.com
Related Query
- Changing cursor to pointer on Chart.js bar chart when hover (mousemove) event is disabled?
- How to change the cursor to a pointer when I hover over a bar in a ChartJS bar chart?
- ChartJS bar chart - trigger hover even when the cursor is outside of the bar
- Chartjs Bar Chart showing old data when hovering
- Chart.js how to show cursor pointer for labels & legends in line chart
- Changing fontFamily on ChartJS bar chart
- Chart.js: Dynamic Changing of Chart Type (Line to Bar as Example)
- Click event on stacked bar chart - ChartJs
- ng2-charts customize data and whole html content of tooltip displayed when hovering on bar chart
- Chartjs - show elements in all datasets on hover using bar chart
- Chart js shows old chart data when hover
- Chartjs numbers on bar chart flash on hover
- Chart.js bar chart label gets hidden on hover
- Bar Chart Not Stacking When Using ChartJs
- How can I change the cursor on pie chart segment hover in ChartJS 3?
- Artefacts when showing compact vertical bar chart in chart.js
- Want to show small part of js Bar Chart when value is zero
- Chartjs : Can I overwrite bar value on hover for every bar chart
- ChartJS: Highlight dataset in a stacked bar chart when hovering over the legend?
- Chartjs bar chart appears empty when page loads
- Chartjs Bar Chart showing old data when hovering when use of ajax
- Angular-Charts bar chart does not update when I change the data, series, labels
- Bar Chart not displaying when using chart.js
- ChartJS Bar Chart not respecting disabled legend when using cdn
- data in charts of charts.js is changing when I click in the line chart
- Drawing a horizontal line on a stacked bar chart on hover (chart js)
- Chartjs 2.x - Dataset color changing when redrawing chart
- Firefox is not responding when loading 800+ data sets in Bar Chart with Charts.Js
- How to limit chart JS hover to take only one value from each line chart when zoomed out?
- Chart.js doughnut chart isn't showing tooltip when you hover over the left/right of the doughnut
More Query from same tag
- Getting access to already created Chart.js chart
- Chartjs.org Chart only displaying in one page
- chart.js - Add corporate design to chart
- Chart js always show labels on a doughnut chart
- Adding Vertical scroll bar in a bar-chart (chartjs)
- How to display only one label in a multi line char?
- Unwanted comma in the tooltips when line breaking a label in ChartsJS
- Can I add a callback function to the legend while keeping the original functionality?
- (Laravel) How to pull data from API Controller so that it will display in vue-chartjs
- Uncaught TypeError: lineChart.Line is not a function in chart.js
- Angular PrimeNG p-chart chartsjs is not showing
- Angular-Charts bar chart does not update when I change the data, series, labels
- How can I display the percentage inside the graph and on hover?
- Chart.js - Datalabels not showing using formatter
- format y axis labels in bold
- ChartJS:align zeros on chart with multi axes
- Provide Chart.js with data via AJAX JSON not working?
- Chart.js - (intermediate value).Doughnut is not a function
- Chartjs 2.0 alpha, how to have a static scale for y-axis
- Chart js show/hide legend during runtime via buttonClick
- Add dynamic dataset to chart.js
- Chart.js v2.0: Tooltip only for one dataset
- Chart.js Point image on hover
- ChartJS not updating
- Angular chart.js chart scale
- How to display chart using Chartjs with JSON data in Laravel
- Showing a duration of time within a Chart.js chart
- Chart.js Label Issue
- Creating Stacked chart.js graph from array
- How to create two x-axes label using chart.js