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
- Chart.options returns "Property 'options' does not exist on type 'chart'"
- ChartJS horizontal chart display legend on each bar
- Add shadow Chart.js
- Chart.js - Black bar colors in mobile devices
- Put the value into the doughnut chart
- Why does nuxt give me this error with vue-chartjs?
- chart.js Line chart doesn't display line past a certain point in the chart
- Resize chart.js canvas for printing
- Django Chart.js ajax javascript "string data parsing error"
- customized Doughnut char using charjs
- Chart.js and PHP
- Pie Chart Legend - Chart.js
- dynamic data in ChartJS
- php to json to chart.js
- Sorting arrays and comparing array values php
- Chartjs2 set data 0 to type doughnut
- Chartjs pie chart not showing from dynamic data
- implementing horizontal bar chart
- how to display multiple sum with chart js and laravel?
- Possible to hide Chart.js grid lines that extend beyond chart?
- Stacked bar chart results in misaligned bars
- Stacked horizontal bar chart along total count with chart.js
- Angular CharJS option tooltip label did not work
- Uncaught TypeError: Cannot create property '_meta' on string
- How do I put this on Real-Time? I already put (async: True) but it doesnt work
- Not able to pass array of data to chart.js in React
- Chartjs Custom Legend with Time on Y-axis
- Chart JS Displays Only Bigger Dataset But Has Both Datasets?
- How can I show a subset of data on pie pieces in Chart.JS while still displaying the superset when hovering?
- React render Chart.js based on api response