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.JS Chart Not Being Generated
- ChartJs shows the wrong labels
- How to set plural label values in chart.js
- onHover event is not triggering in chart.js
- angular-chart.js : issue with pointHoverBorderColor property for line chart
- Graphing the timestamp and data from mysql
- Chart.js Using A JavaScript Object
- React-chartjs-2 - Each dataset needs a unique key
- How to display date as label on x-axis in chart.js
- Chart.js showing nothing on canvas
- ChartJS showing wrong dataset following visibility property toggle
- Charts.js Formatting Y Axis with both Currency and Thousands Separator
- Chartjs with Node.js : Unexpected token <
- Chart.js with dual axis incorrect starting points (if negative values)
- Chart.js padding canvas
- Chart Js Change Label orientation on x-Axis for Line Charts
- use ng2-charts with a loader and AfterViewInit
- Multiple canvas, reusable gradients
- How to set a time scale to a ChartJS chart from JSON?
- react testing library: can't acquire context from the given item
- ChartJS: unwanted top/bottom padding when legend is aligned right
- Howto draw horizontalBar with dynamic thickness (automatic rescale on browser window height resize) in Chart.js 2.9.3?
- How to filter shadow or Drop Shadow in Chart.js?
- Uncaught Error: [$injector:modulerr] Error: [$injector:nomod] Module 'chart.js' is not available
- Unable to draw method in Chart.js, v2 can't be found
- plot a point on top on line chart in chartjs
- Make overlapping d3.js radar chart elements transparent
- Chart.js drag points on linear chart
- If date not in queryset add default value
- Chart.js Bar Chart change width (not duplicated to bar width questions!)