I want to set my chart lineWidth but it has a strange behavior.
On mouse over it turns into lineWidth:2(default) and when mouse outs it turns into my lineWidth setting.
plotOptions:{
series:{
lineWidth: 5
}
},
What's the problem?
Demo: http://jsfiddle.net/bahar_Agi/HePx3/2/
Thanks
Yes there is. As I said, you can configure the state as described in the API.
See http://jsfiddle.net/HePx3/4/
plotOptions: {
series: {
lineWidth: 5,
states: {
hover: {
enabled: true,
lineWidth: 5
}
}
}
}
This happens because the chart has states. In this case a hover state with a default value of lineWidth:2px.
You can disable the state or configure it, see: http://jsfiddle.net/HePx3/3/
plotOptions: {
series: {
lineWidth: 5,
states: {
hover: {
enabled: false
}
}
}
},
For API, see http://api.highcharts.com/highcharts#plotOptions.line.states.hover
Related
I can get rid of all animations with this
plotOptions: {
series: {
enableMouseTracking: true
But I want tooltips. But I don't want any other mouseover effects. I tried this suggestion:
plotOptions: {
series: {
allowPointSelect: false,
states: {
hover: {
enabled: false
},
inactive: {
enabled: false
},
select: {
enabled: false
}
}
}
},
But it has no effect on animations. My series are still faded if I mouseover an area with null data.
To sum up:
when styledmode is turn on, and you loading default CSS file, you need to add following code to the CSS:
inactive { opacity: 1 }
when styledmode is disabled (by default), you don't need to add the default CSS file, but to achieve that use options provided by API:
plotOptions: {
series: {
states: {
hover: {
enabled: false
},
inactive: {
enabled: false
}
}
}
}
I am trying to change the color and borderColor of a lat/long point on a Highmap when a user clicks it. Currently when a user clicks that point it turns grey with a thick black border and a "glow" effect around it. I would like it to turn a color of my choosing. I have set the options as follows:
plotOptions: {
series: {
tooltip: {
headerFormat: '',
pointFormat: '{point.name}'
},
states: {
select: {
color: '#EFFFEF',
borderColor: 'red'
},
hover: {
color: '#a4edba'
}
}
}
}
This does not appear to be working. If I put the same states code under plotOptions.mappoint there is, again, no change.
I have repurposed the Highmaps demo with this set up. On that demo if you click on the Basin shape it turns that light green. However, when you click on "Tournai" or "Brussels" or any other point on the map it does not use the states option I have set.
Remember to set the allowPointSelect option to true on series - https://api.highcharts.com/highmaps/series.mappoint.allowPointSelect
If you want to change the point status on click the state options should be set on plotOptons.series.marker.states, not plotOptions.series.states,
Demo: https://jsfiddle.net/BlackLabel/wgqcL1ay/
plotOptions: {
series: {
marker: {
fillColor: '#FFFFFF',
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[1],
states: {
select: {
fillColor: 'red',
radius: 12,
}
}
}
}
},
API: https://api.highcharts.com/highmaps/series.mappoint.marker.states.select
Area chart looks flat due to the fact that Y axis always starts from 0 in compare to a line chart which in the same data uses some sort of auto-fit.
Plunkr
I would like to have similar auto-fit on the area chart that works on line chart as default.
(Using yAxis[0].setExtremes is not an option really).
Is there any configuration to do so?
You can achieve it by setting xAxis.min property like that:
yAxis: {
min: 10000,
labels: {
formatter: function() {
return this.value / 1000 + 'k';
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/Layfnuz4/
API reference:
https://api.highcharts.com/highcharts/xAxis.min
The second approach is to set plotOptions.area.threshold
plotOptions: {
area: {
threshold: 10000,
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/r7qc1jpk/
API reference:
https://api.highcharts.com/highcharts/series.area.threshold
EDIT
Automatic approach: set series.area.softThreshold = true as line series has.
series: [{
softThreshold: true,
name: 'Data',
data: data
}]
Demo:
https://jsfiddle.net/BlackLabel/8uj3kz4a/
API reference:
https://api.highcharts.com/highcharts/series.area.softThreshold
I have a set of series with markers disabled, and I want to enable all the markers on serie hover, not individual point ans the doc states here: http://api.highcharts.com/highcharts/plotOptions.series.states.hover
The closest thing I had is this:
plotOptions: {
series: {
marker: {
enabled: false
},
states: {
hover: {
enabled: true,
marker: {
enabled: false
}
}
}
}
}
With this I hoped that the markers are all off, and when hovering all the markers are showed, as I thought that the series markers.enabled was set to true, but as the docs I shown above states, this is not what happens.
I would like to do this to show the user where he can mouseover to see the next/prev tooltip, as the markers are not equidistant.
Is possible to achieve this?
You can use series.events.mouseOver and series.events.mouseOut functions for updating your series, so you will show or hide your markers.
plotOptions: {
series: {
stickyTracking: false,
marker: {
enabled: false
},
events: {
mouseOver: function() {
this.update({
marker: {
enabled: true
}
});
},mouseOut: function() {
this.update({
marker: {
enabled: false
}
});
}
}
}
},
Here you can see an example how it can work: http://jsfiddle.net/hgbz7kg6/
I want to change style of selected points. When i select point it is gray. I want all my selected point to be red.
You set the style for the markers.state.select as:
plotOptions: {
series: {
allowPointSelect: true,
marker: {
states: {
select: {
fillColor: 'red',
lineWidth: 0
}
}
}
}
}
Example: http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-marker-states-select-fillcolor/
Reference: http://www.highcharts.com/ref/#plotOptions-scatter-marker-states-select
Update: For barcharts the configuration should be slightly different (don't know why really):
plotOptions: {
series: {
allowPointSelect: true,
states: {
select: {
color: 'red'
}
}
}
}
Example: http://jsfiddle.net/8truG/