score:6
you were certainly on the right track, but let me help you along with a working example for a bar chart along with some explanation.
to implement this behavior, you definitely want to make use of the legend onhover
property (just like you did). however, once you update the hover style you must re-render the chart for the change to take effect. here is an example.
legend: {
labels: {
usepointstyle: true
},
onhover: function(event, legenditem) {
var options = this.options || {};
var hoveroptions = options.hover || {};
var ci = this.chart;
hovereddatasetindex = legenditem.datasetindex;
ci.updatehoverstyle(ci.getdatasetmeta(hovereddatasetindex).data, hoveroptions.mode, true);
ci.render();
}
}
with that working, now we need a way to unset or clear the hover style once the legend item is no longer hovered. otherwise, each time the user hovers over a legend item the series in the graph will get darker and darker until its just black.
so we need some way to clear the hover style. it would have been great if there was a legend onmouseleave
property, but alas...there isn't. so to get around this we end up having to "trick" chart.js to doing what we want. the trick is to use the tooltips custom
function. here is an example below.
tooltips: {
mode: 'index',
intersect: false,
custom: function(tooltip) {
if (hovereddatasetindex != -1) {
var options = this.options || {};
var hoveroptions = options.hover || {};
var ci = this._chartinstance.chart.controller;
ci.updatehoverstyle(ci.getdatasetmeta(hovereddatasetindex).data, hoveroptions.mode, false);
hovereddatasetindex = -1;
ci.render();
}
}
}
what this is doing is clearing the hover style (by passing in false
to the last argument of updatehoverstyle
). since we are outside of the context of the legend, i simply used a variable external to my callbacks to store the previously hovered dataset index.
the reason this 'hack' works is because the tooltips callback is called each time the mouse is moved anywhere on the entire chart (but not the legend). so it represents everything except the legend. because of this, we can use it just like we would have used the non-existent but handy legend onmouseleave
callback.
hopefully this all makes sense. here is a working codepen to demonstrate the full solution.
score:0
there is only one thing missing in your code: chart refresh using ci.render();
legend: {
labels: {
usepointstyle: true
},
onhover: function(event, legenditem) {
var me = this;
var options = me.options || {};
var hoveroptions = options.hover;
var index = legenditem.datasetindex;
var ci = this.chart;
var elements = ci.getdatasetmeta(index).data;
ci.updatehoverstyle(elements, hoveroptions.mode, true)
ci.render(); // <<---- commit changes
}
}
but this will end up highlighting all the traces: you must remove highlight of all other traces before highlighting the hovered one, bt cycling through them:
legend: {
labels: {
usepointstyle: true
},
onhover: function(event, legenditem) {
var me = this;
var options = me.options || {};
var hoveroptions = options.hover;
var index = legenditem.datasetindex;
var ci = this.chart;
for (var i=0; i < ci.datasets.length-1; i++) {
var elements = ci.getdatasetmeta(i).data;
ci.updatehoverstyle(elements, hoveroptions.mode, false) ; // <<<--- turn off higlight
}
var elements = ci.getdatasetmeta(index).data;
ci.updatehoverstyle(elements, hoveroptions.mode, true) // <<-- turn on
ci.render();
}
}
Source: stackoverflow.com
Related Query
- Highlight Line Series on legend hover
- chartjs show dot point on hover over line chart
- Chart.js: hiding series by clicking on legend
- How to render a vertical line on hover in chartjs
- Draw a horizontal and vertical line on mouse hover in chart js
- How can I create a time series line graph in chart.js?
- ChartJs line chart - display permanent icon above some data points with text on hover
- Chart.js: How can a line series (out of many) change line color and thickness upon mouse hover?
- Chart.JS - Polar area - Legend hover style and margin
- How to add a vertical line on Chart.js when hover a point?
- Time series line chart is not displayed
- Time Series Line chart js in react not working
- Chart Js update legend boxes of graph with graph line style
- ChartJS Version 3 - common legend for multiple line charts
- how to highlight a specific area on chartjs line chart
- Legend not displaying on Line or Bar chart - React-Chartjs-2
- Chart.js - Styling Legend - ONE legend entry per line
- how can i use chart.js to create a chart that has one time series line and one linear line on it at the same time?
- Highlight chart element when hovering over its corresponding legend Item
- Highlight date in Chart.js line graph
- Is there a way to highlight a line on a line graph with hover?
- Chartjs / ng2-charts line on hover does not work
- Chart Js Line chart with fill on click with full information of its legend text
- Change legend style from bar to line chart.js 2.4.0
- Chart.js not rendering properly until window resize or toggling line in legend
- Custom Legend ChartJS not showing the text decoration: line through
- ChartJS: Draw line between two data points on hover
- how to highlight the bars in stacked bar chart of chart.js on clicking a legend
- Drawing a horizontal line on a stacked bar chart on hover (chart js)
- My ChartJS Line needs to click the color legend first before it plots the data
More Query from same tag
- destroy multiple charts on same page
- generate color from number
- How to always show line chart tooltip in ionic-angular.?
- Chart.js creating multiple Charts in Angular in same Component
- ChartJS: How to dynamically create data arrays
- How to display datasets correctly on a graph using Chart.js
- How to show both overlapping lines in in chartjs
- how can i use chartjs-plugin-annotation?
- Chart.js - cannot fetch result from MySQL via PHP
- Chart.js Mouse Over Show Old Chart Data
- Chartjs defaults deprecation warning
- Chart.js do not display in Boostrap tabpanel
- Passing data from Python to JavaScript to plot Chart.js
- Reference Javascript variable in JSON
- chartjs creating equilvant background like in chartjs.org
- ChartJS 2.0 differences in code help needed
- How do I customize the chart.js tooltip? Two labels have the same data, which I want to show you with each data
- how to add color to each data in chartjs scatter plot
- Chart js data decimation not working, parsing issue
- Saving ChartJS chart showing all tooltips
- How to use Axios API with Chart.js and React.js
- How to use below syntax in chart.js 3.x?
- min and max tag is not showing in chart chart.js
- Chart.js - Horizontal line on Bar chart interferes with tooltip
- How to use a string returned from php by ajax as data for a chart.js chart?
- Update/re-render Charts.js in Angular 4
- hereChartJS Line Chart with Time Axis
- How to execute a JavaScript function with ChartJS and FreeMarker?
- Iterating through the same dataset in Chart.js
- vue-chart.js / vuex: Chart not updating when vuex state changes