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
}
}
}
}
Related
here's the demo : online demo
the datalabel is too long to display , i want it just inside the bubble and the overflowed text displayed as "ACDE..."
I can suggest two solutions for this case.
set the overflow to ellipsis and set some width for the dataLabel:
Demo: https://jsfiddle.net/BlackLabel/ye5s7m6g/1/
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: "{point.name}",
style: {
textOverflow: 'ellipsis',
width: 45
}
}
}
},
API: https://api.highcharts.com/highcharts/series.bubble.dataLabels.style
enable textPath feature in the dataLabels:
Demo: https://jsfiddle.net/BlackLabel/0srgnvxd/1/
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: "{point.name}",
textPath: {
enabled: true
}
}
}
},
API: https://api.highcharts.com/highcharts/series.bubble.dataLabels.textPath.enabled
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 have a problem with Highcharts - I am trying to take an existing chart, merge it into a new one, alter a few properties and then show it.
The problem I'm getting is that I can't seem to enable the xAxis labels in the copied chart. If I turn them on in the original chart they exist in the copied one, but there seems no way of altering the enabled state. A JSFiddle is below:
http://jsfiddle.net/liamfl/a7xvfyg6/
The code is as follows:
var chart_PortfolioDetailsDistribution;
var popupChart;
$(document).ready(function () {
chart_PortfolioDetailsDistribution = new Highcharts.Chart({
chart:{animation:false,renderTo:'smallchart3'}
,title:{text:'Distribution'}
,tooltip:{headerFormat:'',pointFormat:'<b>{point.name}</b>: {point.y}'}
,legend:{enabled:false}
,credits:{enabled:false}
,plotOptions:{series:{animation:false,borderWidth:0,dataLabels:{format:'<b>{point.y}</b>'}
,groupPadding:0,pointPadding:0}
}
,yAxis:{
title:{text:null}
}
,xAxis:{
labels:{enabled:false,rotation:-90}
,title:{text:null}
,type:'category'
}
,series:[{
data:[['<-10%',0],['<-5%',3],['<-2.5%',3],['<-1%',2],['<0%',10],['>0%',3],['>1%',0],['>2.5%',0],['>5%',0],['>10%',0]],
name:'Portfolio',
type:'column'}]
});
popupChart = new Highcharts.Chart(Highcharts.merge(chart_PortfolioDetailsDistribution.options, {
chart: { renderTo: 'smallchart4' },
xAxis: { labels: { enabled: true }},
legend: { enabled: true },
plotOptions: { series: { dataLabels: { enabled: true } }}
}));
});
Any ideas? I'm stumped (which for me is a natural state...)
xAxis returned by .options is actually an array of objects. So, when you merge it you need to merge with an array.
http://jsfiddle.net/a7xvfyg6/1/
Highcharts.Chart(Highcharts.merge(chart_PortfolioDetailsDistribution.options, {
chart: { renderTo: 'smallchart4' },
xAxis: [{ labels: { enabled: true }}],
legend: { enabled: true },
plotOptions: { series: { dataLabels: { enabled: true } }}
}));
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
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/