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
- Chart works uncorrectly chart.js
- How to change the Y-axis values from numbers to strings in Chart.js?
- Limit data points with chart js in React
- Chart.js adds unwanted padding on top and below chart with padding set to 0
- Split legend in chart js
- Resizing chart before downloading as image
- ChartJS custom doughnut chart not showing in version 2.6.0
- Chart.js plot live data
- Chartjs pie chart not showing from dynamic data
- What is the syntax for require.config for chartjs-plugin-streaming and dependencies using RequireJS?
- Annotation events not update the chart
- How to pass a array from node to .js file (pugJs)
- Chart.js - Avoid line to goes to zero and remove dot for this situation
- Hide chart labels
- How to display stack label/name?
- event click only x-axis label chartJS
- Dataset._meta[0].dataset is null in ChartJS
- Synchronizing zoom between multiple charts
- Align doughnut/pie charts vertically in the container
- How to create a charjs bar graph with many bars?
- Chart.js v3.60 - Add % symbol to the end of the tooltip label on a doughnut chart?
- TypeError React-Chartjs After Upgrading to Chart.js v3
- chartjs Adding percentages to Pie Chart Legend
- Html chart does not fit a small Android WebView
- Change color of Polar Area datasets in Angular
- Chart.js - tooltips issue with multiple charts
- Remove y and x axis lines and change axis font style in Chartjs
- Using Chart.js with Pyramid Web Framework
- Draw data in graphics generated by Chart JS
- build a javascript callback function from php for chartjs