I'm using highcharts and I want to disable the hover effect and select animation. I have tried the following:
tooltip: {
enabled: false
},
plotOptions: {
series: {
states: {
hover: {
enabled: false
},
select: {
enabled: false
}
}
}
},
But it didn't do the trick. This is how it looks like. There is absolut no need for hover effect (opacity: 0.2) and click animation:
You need to also disable inactive state and set allowPointSelect to false.
plotOptions: {
series: {
allowPointSelect: false,
states: {
hover: {
enabled: false
},
inactive: {
enabled: false
},
select: {
enabled: false
}
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/c9r68bmg/
API Reference: https://api.highcharts.com/highcharts/plotOptions.series.allowPointSelect
Related
I am implementing a chart with highcharts based on vue.js.
LineWidthPlus function works well on hover, but lineWidthPlus does not work on select.
This is part of my code.
plotOptions = {
series: {
lineWidth: 2,
boostThreshold: 1,
allowPointSelect: true,
stickyTracking: false,
states: {
hover: {
enabled: false,
},
select: {
enabled: true,
lineWidthPlus: 10,
},
},
}
What is the cause and if there is a demo, please tell me the demo url. thank you.
I've set up a U.S. Map using HighMaps with several series of data points. I've disabled the onmouseover default behavior and am using onclick instead for accessibility and mobile usage. However, when I click on a map point, the map zooms in. How do I disable this?
I don't want to disable all zooming because some points are quite close. The issues seems to be in the plotoptions section of code (when I remove it, it doesn't zoom, but the onclick doesn't work either)
See JS Fiddle code here: https://jsfiddle.net/sfjeld/znd03gxL/47/
var tooltipEnabled = true;
// Create the chart
Highcharts.mapChart('container', {
chart: {
map: 'countries/us/us-all'
},
title: {
text: 'InSPIRE Project Sites'
},
legend: {
title: {
text: 'Select from the options below to display all sites using that technology.'
}
},
credits: {
enabled: false
},
mapNavigation: {
enabled: false,
buttonOptions: {
verticalAlign: 'top'
}
},
tooltip: {
headerFormat: '',
pointFormat: '<span style="color:#0079C2;font-weight:bold; font-size:110%"><b>{point.name}</b></span><br><b>Primary Research:</b> {point.research}<br>{point.desc}<br><br><b>Partners:</b> {point.partners}',
useHTML: true,
enabled: false
},
plotOptions: {
series: {
events: {
click: function() {
this.chart.update({
tooltip: {
enabled: tooltipEnabled
}
});
tooltipEnabled = tooltipEnabled ? false : true;
disableHover = false;
}
},
dataLabels: {
enabled: false
},
marker: {
states: {
hover: {
enabled: true
}
}
}
}
},
I expect it not to zoom when I click on a point.
You can achieve what you expect by making an update on tooltip itself and not updating the whole chart. Check demo and code posted below.
plotOptions: {
mappoint: {
events: {
click: function() {
this.chart.tooltip.update({
enabled: tooltipEnabled
});
tooltipEnabled = tooltipEnabled ? false : true;
disableHover = false;
}
},
dataLabels: {
enabled: false
},
marker: {
states: {
hover: {
enabled: true
}
}
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/6ps8bk2q/
In my area chart, when I hover over legends, I can see some (low opacity) effects on that respective series plotting area? How to disable that low opacity series state on hover over legends?
chart: {
height: 450,
type: 'area'
},
title: {
text: ''
},
tooltip: {
shared: false,
split: false,
xDateFormat: '%b %d, %Y %H:%M',
valueDecimals: 1
},
exporting: {
enabled: false
},
navigator: {
enabled: false,
},
xAxis: {
type: 'datetime'
},
You probably use styled mode, because this feature does not occur with standard options: http://jsfiddle.net/BlackLabel/z7j6rsa3/
To disable the hover effect, just overwrite opacity CSS style:
.highcharts-legend-series-active g.highcharts-series:not(.highcharts-series-hover),
.highcharts-legend-point-active .highcharts-point:not(.highcharts-point-hover),
.highcharts-legend-series-active .highcharts-markers:not(.highcharts-series-hover),
.highcharts-legend-series-active .highcharts-data-labels:not(.highcharts-series-hover) {
opacity: 1;
}
Live demo: http://jsfiddle.net/BlackLabel/ozxq05fn/
You can do this - change opacity for "1".
plotOptions: {
series: {
states: {
inactive: {
opacity: 1
}
}
}
}
Example CodePen
I want to show tree map with different on different levels by using property 'colorByPoint' true.
Highcharts.chart('container', {
chart: {
marginTop: 50,
events: {
load: function() {
this.bread = {
'': makeNode('', this.series[0].name, this.series[0])
}
}
}
},
series: [{
type: 'treemap',
layoutAlgorithm: 'squarified',
allowDrillToNode: true,
animationLimit: 1000,
dataLabels: {
enabled: false
},
levelIsConstant: false,
levels: [{
level: 1,
dataLabels: {
enabled: true,
align:'left',
verticalAlign:'Top'
},
borderWidth: 1
},
{
level: 2,
colorByPoint: true,
dataLabels: {
enabled: true,
},
borderWidth: 1
}
],
data: points
}],
credits:false,
plotOptions: {
series: {
dataLabels: {
color: '#fff',
textOutline:0,
style: {
fontWeight: 'bold'
}
},
point: {
events: {
click: function(e) {
const hasChildren = !!this.node.childrenTotal
if (hasChildren) {
const bread = this.series.chart.bread
bread[this.id] = makeNode(this.id, this.name, this.series, bread[this.node.parent])
}
}
}
}
}
},
title: {
text: ''
}
});
Here is my js fiddle. https://jsfiddle.net/irfanbsse/8djawts9/
But I dont want show second level color on first level.Same for second level and so on. how i can do it ? Thanks
Here's a demo that shows how to change color of child nodes on point.click.event:
click: function() {
var points = this.series.points;
this.node.children.forEach(function(child, i) {
var point = points.find(function(point_) {
return child.id === point_.id
});
point.update({
color: color[i % (color.length - 1)]
});
});
Live demo: https://jsfiddle.net/BlackLabel/sgkah0fq/
The next thing to implement is reverting the original colors while clicking on the previous level in navigation (label with callout shape).
I have a highcharts datetime spline graph, and I would like to add the navigator from highstocks (highstocks is already on the page) without changing anything else about the graph.
Switching from a highchart to highstocks also changes of lots of default behaviour which I'd like to forego (axis settings, legend settings… all sorts). I just want the navigator.
So I'd either like to add just the navigator to my highchart, or be pointed to a comprehensive list of options that I can pass to highstocks to make it match the highcharts defaults (if one exists).
Thanks!
By replacing highcharts.js with highstock.js you won't change default behavior:
Highcharts: http://jsfiddle.net/pq7o66as/
Highstock: http://jsfiddle.net/pq7o66as/1/
Now simply enable navigator:
http://jsfiddle.net/pq7o66as/2/
navigator: {
enabled: true
},
Note:
Don't change constructor from: $('#container').highcharts(options); to $('#container').highcharts('StockChart', options);.
And default options for Highstock:
chart: {
panning: true,
pinchType: 'x',
inverted: false // "true" is not supported in Highstock
},
navigator: {
enabled: true
},
scrollbar: {
enabled: true
},
rangeSelector: {
enabled: true
},
title: {
text: null,
style: {
fontSize: '16px'
}
},
tooltip: {
shared: true,
crosshairs: true
},
legend: {
enabled: false
},
plotOptions: {
line: {
marker: {
enabled: false,
radius: 2
},
states: {
hover: {
lineWidth: 2
}
}
},
column: {
shadow: false,
borderWidth: 0
}
},
xAxis: {
startOnTick: false, // only when navigator enabled
endOnTick: false, // only when navigator enabled
minPadding: 0,
maxPadding: 0,
ordinal: true,
title: {
text: null
},
labels: {
overflow: 'justify'
},
showLastLabel: true,
type: 'datetime' // in Highstock only supported type
},
yAxis: {
labels: {
y: -2
},
opposite: opposite,
showLastLabel: false,
title: {
text: null
}
}