score:6
score:-10
If what you want is prevent any effect when hovering the mouse over any series, you should disable tooltip
and hover
state. You can do it like this:
$(function () {
Highcharts.chart('container', {
plotOptions: {
series: {
states: {
hover: {
enabled: false
}
}
}
},
tooltip: {
enabled: false
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});
#reporting {
position: absolute;
top: 55px;
right: 20px;
font: 12px Arial, Verdana;
color: #666;
background: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px; min-width: 300px"></div>
<div id="reporting"></div>
(Template taken from Highcharts documentation).
Hope it helps :)
score:0
As of 2020
Simply put tooltips: false
in your options object
score:0
You can try the following:
const options = {
...
tooltips:{
enabled:false
},
...
}
score:2
There's another option:
states: {
hover: {
filter: {
type: 'none',
}
},
},
score:2
just use
options: {
events: ["mousemove", "mouseout", "click", "touchstart", "touchmove", "touchend"],
}
just remove one of them, which you want to remove.
options: {
events: ["mouseout", "click", "touchstart", "touchmove", "touchend"],
}
score:163
In order to remove all hover styles/tooltips
from vanilla chart.js:
var myChart = new Chart(canvas, {
options: {
tooltips: {enabled: false},
hover: {mode: null},
}
...
});
Chart.js is watching all mousemove
events on the canvas within which it has instantiated your chart. Setting hover 'mode' to null seems to override all the ways the canvas looks for matching elements to assign activated :hover
classes to.
The tooltip event seems separate, so I had to use both lines to make the chart effectively static.
Note, initial animations still work on a chart with these options.
UPDATE: newest Chart.js has re-bundled the way hover is 'listened' for:
var myChart = new Chart(canvas, {
options: {
events: []
}
...
});
Making the 'events' option an empty list (instead of ['click', 'hover', etc]
) makes the chart blind'/static
because it will be listening for no events.
Source: stackoverflow.com
Related Query
- Chart.js - how to disable everything on hover
- How to clear a chart from a canvas so that hover events cannot be triggered?
- How to disable Chart JS tooltip when there is no value?
- How can I trigger the hover mode from outside the chart with charts.js 2?
- How to disable Chart.js Radar Chart point labels
- How to filter hover on a chart in ChartJS?
- How can I change the cursor on pie chart segment hover in ChartJS 3?
- how to disable last/max value shown on x axis in chart js?
- How to customize tooltip on mouse hover of a polar area chart of Angular Charts
- How to disable scientific notations in logarithmic chart type
- How to print a chart rendered by code
- How do I destroy/update Chart Data in this chart.js code example?
- I am using chart js to draw a chart. I did everything right but i don't know why the x axis and y axis label is not comming in chart. code below
- How to limit chart JS hover to take only one value from each line chart when zoomed out?
- How to run Chart.js samples using source code
- how to remove old data from Chart js on mouse hover using mvc c#?
- How to display data on hover inside doughnut chart in Angular Chart?
- how to display text information on hover in chart js?
- how to not repeat code while creating multiple charts in chart js
- Chart JS - How to display Label over Slices instead of text on hover
- How to add text inside the doughnut chart using Chart.js?
- Chart.js - How to set a line chart dataset as disabled on load
- chart js 2 how to set bar width
- How can labels/legends be added for all chart types in chart.js (chartjs.org)?
- How can I create a horizontal scrolling Chart.js line chart with a locked y axis?
- How to disable chartjs legendclick
- How to disable a tooltip for a specific dataset in ChartJS
- How can I make two of my lines in Chart JS thicker
- How to prevent first/last bars from being cut off in a chart with time scale
- How set color family to pie chart in chart.js
More Query from same tag
- Laravel Charts Refresh With Ajax
- Change color of measure unit with Chart.js
- Stacked bar chart results in misaligned bars
- charts js, doughnut chart not rendering tooptips correctly
- How to set ChartJS Y axis title?
- Change background color of label Chart.js
- HTML: How to get rid of overlapping
- chart.js switch x/y axis on line chart
- how to differentiate chart with colors
- chart.js 2, animate right to left (not top-down)
- ChartJS -- How do I change scale color when I have to scales?
- Chart JS - Grid colors and gradient fill not showing
- Chart.js line chart is not displaying
- Angular and CharJS - ERROR TypeError: Cannot read property '15' of undefined
- Chartjs sample can't be reproduced
- How to draw round edges with chart.js for line diagrams
- Displaying a chartjs chart within a bulma full height hero
- In chartjs, add link text on tooltip
- How to add a dataset toggle to Chart.js?
- Callback after line chart rendered
- ng2-charts : Newly added rows not getting displayed on phone devices
- How can we build charts on Polymer 1.0 using Chart.js?
- Thousand separator in pie chart of charts.js
- How to format the left legend on chartjs
- Prime NG Customise tool tip on Bar Chart
- How to use Chart.js to draw solid points
- Drawing to canvas on click clears text when mouse leaves the chart
- Chart.js add icon at the top of bar
- Limit data points with chart js
- Chart.js - data points get smaller after hover