Highcharts released a new version (I believe 7.1) and as a result whenever you hover over a certain element on a graph, the rest of the elements lighten in color.
I want to remove this effect and have the elements not lighten in color and still be visible to the user.
Any help is appreciated. Thanks!
plotOptions: {
series: {
states: {
hover: {
enabled: false
}
}
}
}
I have tried this and this is not what I need or at least it doesn't remove the effect that I am talking about.
This new hover effect is called the inactive state. You can disable it by setting plotOptions.series.states.inactive.opacity = 1.
Code:
plotOptions: {
series: {
states: {
inactive: {
opacity: 1
}
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/34m7k0f2/1/
API reference:
https://api.highcharts.com/highcharts/plotOptions.series.states.inactive
I did following to remove highcharts hover effect in highcharts JS v7.1.2 (2019-06-03)
`plotOptions:{
series: {
states: {
hover: {
halo: {
size: 1
}
}
}
}
}`
Related
I want to use Accessible line chart of Highcharts (https://www.highcharts.com/demo/accessible-line)
In demo, I saw some series label position on last point, some in middle and first point.
How can I set all series label on last point?
Sorry for my bad English!
You can use data labels instead of series labels.
Example:
plotOptions: {
series: {
dataLabels: {
enabled: true,
formatter: function() {
if (this.point.index === this.series.points.length - 1) {
return this.series.name;
}
}
},
...
}
}
Live demo: https://jsfiddle.net/BlackLabel/9ps2ckhr/
API Reference: https://api.highcharts.com/highcharts/plotOptions.series.dataLabels
I already know what chart save as image in client-side(web)
and I know save as image in server-side(phantom.js)
but the chart has a scroll and
I want to save full screen(end scrolling) as one image file
enter image description here
How can I do that?
thnx
You can add additional chart options using exporting.chartOptions property. Check demo I posted you below with xAxis scroll enabled and additional options to export where the scroll is disabled on chart load event.
Code - exporting.chartOptions :
exporting: {
chartOptions: {
chart: {
events: {
load: function() {
var chart = this,
max = chart.xAxis[0].dataMax;
this.update({
xAxis: {
max: max,
scrollbar: {
enabled: false
}
}
});
}
}
}
}
}
Demo:
https://jsfiddle.net/r1p47ekj/
I need the dataLabels to be always displayed at the right end of bar chart irrespective of the data value. According to the Highcharts API, the dataLabel position is adjustable only relative of its current position. Is there a way to change the datalabel position relative to the chart area?
You're looking for something like this?
If you make the labels HTML elements instead of SVG elements..
plotOptions: {
bar: {
dataLabels: {
enabled: true,
allowOverlap: true,
//Labels are easier to move around if we switch from SVG to HTML:
useHTML: true,
}
}
}
..it's quite easy to move them around using CSS:
.highcharts-data-labels.highcharts-bar-series {
/* Stretch the labels container across the whole chart area: */
right: 0;
}
.highcharts-label.highcharts-data-label,
.highcharts-label.highcharts-data-label span {
/* Disable the default label placement.. */
left: auto !important;
/* ..and put them along the right side of the container */
right: 8px;
}
https://jsfiddle.net/ncbedru8/
You can also position data labels in the render event:
events: {
render: function() {
var chart = this;
chart.series.forEach(function(s) {
s.points.forEach(function(p) {
if (p.dataLabel) {
p.dataLabel.attr({
x: chart.plotWidth - p.dataLabel.width
});
}
});
});
}
}
Live demo: http://jsfiddle.net/BlackLabel/yt1joqLr/1/
API Reference: https://api.highcharts.com/highcharts/chart.events
I recently upgraded to Highcharts 6, and noticed a marker animation that wasn't there before. I would like to disable it, and can't seem to do so. Before I raise it with Highcharts, I was wondering if I've done something wrong.
To be clear:
I would like on hover styling (increased marker radius and halo)
I do not want any animation on marker hover - either animating in, or animating out
To see the misbehaving markers, load this fiddle and move your mouse over a point and away again. If you comment out the recent Highcharts import and instead use 4.2.5, you'll see the behaviour I'm after.
The only way I can see in the docs to disable on hover animation is to set the animation duration to 0. I tried to do this at three points in the configuration:
plotOptions.spline.marker.states.hover.animation.duration
plotOptions.spline.states.hover.animation.duration
plotOptions.spline.states.hover.marker.states.hover.animation.duration
Like so..
plotOptions: {
spline: {
marker: {
states: {
hover: {
animation: {
duration: 0
}
}
}
},
states: {
hover: {
animation: {
duration: 0
},
marker: {
states: {
hover: {
animation: {
duration: 0
}
}
}
}
}
}
}
}
But nothing worked. Help very much appreciated. Thanks in advance!
Disabling chart.animation seems to resolve the problem. It disables overall animation for all chart updating but, as API states, it can be overridden for each individual API method as a function parameter.
API Reference:
http://api.highcharts.com/highcharts/chart.animation.html
Example:
https://jsfiddle.net/sgz9dq8h/
In the below example, is it possible to "hide" the Y Axis values - for example - do not show the 0 and the 200 (in the left).
Looking for cleaner chart..
http://www.highcharts.com/demo/gauge-solid/dark-unica
By targeting the yAxis labels via CSS you can do so just fine
CSS:
.highcharts-axis-labels.highcharts-yaxis-labels{
display:none;
}
Or alternatively, via setting the showFirstLabel and showLastLabel property of the yAxis in the case of the gauge has the same effect.
JS:
yAxis: {
showFirstLabel:false,
showLastLabel:false,
min: 0,
max: 5,
title: {
text: 'RPM'
}
}
Here is a demo showing both http://jsfiddle.net/robschmuecker/yra3mex6/
Here are the docs regarding the properties http://api.highcharts.com/highcharts#yAxis.showFirstLabel
The following code will hide the Y-axis labels (JSfiddle example):
yAxis: {
labels: {
enabled: false
}
}
You can also use the 'formatter' as shown below:
labels: {
y: 16,
formatter: function () {
if(this.value == 0){
return '0B'; // your choice of value
} else {
return '425B'; // you can pass the empty string
}
}
}