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
- How to change the z-index of chartjs annotations label?
- VueJs and ChartJs - Chart is responsive in width, but not height?
- Is it possible to create different stepsize for different yAxis intervals on chartJs?
- Zoom is very slow in ChartJS Zoom Plugin
- How to create a chart that uses strings for both the X and Y axes?
- change axis scale to be round numbers instead of decimal - chart.js
- How to Render Chart Datasets in Vue?
- how to remove duplicate data set labels in chartjs
- Chart.js how to change width of color
- Is there a way to display legend's data over the chart in chart.js?
- how to add FAHRENHEIT symbol in chart js donut chart
- Chart.js line split color
- Dollar sign on y-axis with ChartJS
- Canvas is not defined for simple chart
- How to externally trigger datalabels-plugin (active) - ChartJS
- Chart JS Fill Between two lines
- How can I add user inputted values to my chart.js line graph?
- Chart.js not appearing in tabs
- ChartJS - Uncaught SyntaxError: Unexpected number
- How to use php variables in a chart js chart
- Dropdown component not having effect in Chromium browser
- How to differentiate the data of one topic or another coming from Mercure hub if the client is suscribed to two topics
- Time series data visualization using JSON
- On click event to show name of pie chart slice in chartsJS
- How to access the Chart object in Javascript DOM?
- ChartJS rotate label value vertical
- Radar chart Display legend
- Chart.js showing x-axis ticks even though set to false
- Not sure how to rerender chart in the app
- ChartJS in Datatable cell performance