I am using the latest version of HighCharts to build a chart with multiple trends. By default HighCharts increases the thickness / lineWidth of a line when the user's mouse hovers over it. Because I could have ~10 trends on the chart I would like to remove this feature, meaning that the thickness of the line does not change on hover.
jsFiddle of code so far
I believe I need to set this in the plotOptions{} section. I have tried adding the following without success:
plotOptions: {
series: {
mouseOver: {
lineWidth: 2
}
},
marker: {
enabled: false,
states: {
hover: {
lineWidth: 2
}
}
}
},
I would, however, like to retain the marker that denotes where the mouse of positioned:
Make this below change (Set the states mouseover to disabled state)
plotOptions: {
series: {
lineWidth: 2,
states: {
hover: {
enabled: false
}
}
},
DEMO
In that case make lineWidth: 1 for hover
plotOptions: {
series: {
lineWidth: 2,
states: {
hover: {
lineWidth: 1
}
}
DEMO 2
What you need here is the lineWidthPlus property.
plotOptions: {
series: {
states: {
hover: {
lineWidthPlus: 0
}
}
}
}
This way, no matter what else you change, the chart will not change the lineWidth when hovered.
API Reference:
http://api.highcharts.com/highcharts#plotOptions.series.states.hover.lineWidthPlus
Your fiddle updated:
http://jsfiddle.net/jlbriggs/4oypoeom/8/
Related
I have a chart which has part line and part area stacked. In the first part (area) I want to add an inline legend as it is shown in this example (ie where it says Asia)
https://www.highcharts.com/demo/area-stacked-percent
These are the example options but I do not see how to specify that or if this is the default way to show legends in this plot
In my example, I cannot put the legends inside the area part. Tried to add title in yAxis. I also tried to add an annotation but it did not work:
https://jsfiddle.net/hkpna40r/1/
annotations: [{
labelOptions: {
backgroundColor: 'rgba(255,255,255,0.5)',
verticalAlign: 'top',
y: 4
},
labels: [{
point: {
xAxis: 0,
yAxis: 0,
x: Date.UTC(2019, 11, 2),
y: 3
},
zIndex:100,
text: 'Arbois'
}],
}],
You can achieve what you want by attaching a module called series-label and set plotOptions.area.label like that:
plotOptions: {
area: {
label: {
enabled: true,
onArea: false
}
},
line: {
label: {
enabled: false
}
}
}
Note, annotations also work but you have to attach annotations module separately.
Demo:
https://jsfiddle.net/BlackLabel/5utLhenb/
API reference:
https://api.highcharts.com/highcharts/plotOptions.area.label
https://www.highcharts.com/docs/advanced-chart-features/annotations-module
How do I to enable the markers only for those series which has only a single data point.
Here I have disabled it for the whole chart. So then the 3rd series doesn't shows up until mouse over.
plotOptions: {
series: {
marker: {
enabled: false
}
}
}
https://jsfiddle.net/Mithun146/ef6dtjon/2/
You just need to enable the marker for that specific series, like this:
series: [
...,
{
marker: {
enabled: true
},
data: [10]
}
]
Working JSFiddle example: https://jsfiddle.net/ewolden/ak0m8r75/
I need to underline with different colors data, based on some values. I can change color in detail chart, but I need to change it in master chart too.
Here the JSFiddle http://jsfiddle.net/2msZe/35/
I have printed in console the data, and here there is color set to black.
{y:0.97, color:'black', flag:true}
Any help?
Thanks
You need to disable turbpThreshold, otherwise colors are not used, see: http://jsfiddle.net/2msZe/37/
plotOptions: {
series: {
turboThreshold: 0,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
enableMouseTracking: false
}
},
I have a chart that is a column chart rendered on top of a area chart. Here is an example:
http://jsfiddle.net/78p42/4/
Is there a way to make the outer edge of the area chart to match up with the outer edges of the first and last columns in the column chart? In case you are not sure what I mean, please see this image I created.
I figured there would be a way to do it in the plotOptions for the area charts, but I can't find a way.
plotOptions: {
column: {
borderWidth: 0,
pointPadding: 0.1,
groupPadding: 0,
states: {
hover: {
enabled: false
}
}
},
area: {
lineWidth: 0,
marker: {
enabled: false
},
states: {
hover: {
enabled: false
}
},
pointPlacement: 0 // I have noticed that this will shift the whole graph over, but then there is a huge gap on one side of the graph
}
},
Thanks for your time.
I would like to display spline graph without marker on the line. This is done.
But now, When a point is selected, the marker doesn't appear.
I found a little hack to do what I want. In plotOptions, radius is set to 0.1 to be hidden by the line width.
plotOptions: {
series: {
allowPointSelect: true,
marker: {
radius: 0.1, // hack to show selected point
states: {
hover: {
radius: 5
},
select: {
radius: 5
}
}
}
}
}
}
Complete code is here : http://jsfiddle.net/ManUtopiK/7GXeT/
This is an HighCharts bug or I made a mistake in graph options ?
If you set your marker to have enabled: false you still show the marker point if you hover over the point (when the tooltip popup appers).
See updated fiddle here:
plotOptions: {
series: {
allowPointSelect: true,
marker: {
enabled: false,
//radius: 0.1, // hack to show selected point
states: {
hover: {
radius: 5
},
select: {
radius: 5
}
}
}
}
}