it is possible to style HIGHCHARTS like this?
please see here
Yes, it is possible. All you need to do is to use zones with x axis.
Highcharts.chart('container', {
series: [{
...,
zoneAxis: 'x',
zones: [{
value: 2,
fillColor: 'red',
color: 'red'
}, ...],
marker: {
enabled: false
}
}]
});
Live demo: http://jsfiddle.net/BlackLabel/pr49c3je/
API Reference: https://api.highcharts.com/highcharts/series.area.zones
Related
In short, I need to somehow enable groupPadding for stacked series. It looks a little bit odd, but this is what you can do in PowerPoint if you set series overlap to 0:
With series overlap set to 100, they would be on top of each other like in Highcharts with stacking set to e.g. normal.
To me, it seems you are not allowed to move stacking columns horizontally relative to each other in Highcharts. But maybe I am missing something or there is a workaround?
Thanks!
You can create an additional hidden series with the same stack as the upper series. Example:
Highcharts.chart('container', {
chart: {
type: 'column'
},
plotOptions: {
column: {
stacking: 'normal',
pointPadding: 0,
dataLabels: {
enabled: true,
format: '{point.y}%'
}
}
},
series: [{
data: data2,
color: 'gray'
}, {
data: data1,
color: 'rgba(0,0,0,0)',
linkedTo: 'data1',
dataLabels: {
enabled: false
}
}, {
id: 'data1',
data: data1,
stack: 'A',
color: 'green'
}]
});
Live demo: http://jsfiddle.net/BlackLabel/rkvs8cy7/
API Reference: https://api.highcharts.com/highcharts/series.column.stack
I want to create PIE chart using Highchart as below image, please suggest a solution-
Thanks
You can use two pie series with different innerSize and size properties, for example:
series: [{
data: [{
y: 1,
color: 'blue'
}]
}, {
size: '70%',
innerSize: '30%',
data: [{
y: 3,
color: 'green'
}, {
y: 12,
color: 'blue',
showInLegend: false
}]
}]
Live demo: http://jsfiddle.net/BlackLabel/4b1phj67/
API Reference: https://api.highcharts.com/highcharts/series.pie
For some reasons, I need to use Highstock (navigator, crosshair, annotations...).
And I need to display a graph with numerical values for X axis.
In this simple example, the X Axis looks chaotic, and numeric values are not placed/spaced as expected.
Highcharts.stockChart('container', {
rangeSelector: {
enabled: false
},
navigator:{
enabled: true
},
xAxis: {
labels: { formatter: function () {return this.value;}},
crosshair: {
width: 1,
color: 'black'
}
},
series: [{
type: 'areaspline',
data: [
[10, 30],
[20, 25],
[25, 22.5],
[30,20],
[40,15]
]
}]
});
JSFiddle example:
Here
1/ What should I do to get a graphic like this?
Normal X axis with numerics
2/ I can see the line is smoothed. How can I disable this smoothing?
Disable the ordinal option:
xAxis: {
ordinal: false,
...
}
Live demo: https://jsfiddle.net/BlackLabel/q6xv7koh/
API Reference: https://api.highcharts.com/highstock/xAxis.ordinal
Does anyone know if we can achieve something like this in Highcharts?
We wish that a certain rectangular area gets highlighted when the user mouseover the charts.
Did anyone accomplish something similar before that may help us here?
Thank you.
You can use renderer to render any shape on mouseover and hide it on mouseleave. Positioning rendered shapes require some calculation/coding but it gives you total freedom.
From the picture you posted, you can also use an easier approach, not the most elegant, but it is fast in getting the result. Create a hidden series, specify the points which will define the area and show/hide it on events.
series: [{
data: [5, 10, 15, 10, 5],
color: 'rgba(0,0,200, 0.2)',
states: {
hover: {
enabled: false
}
}
}, {
id: 'h1',
data: [
[1, 10], {
x: 2,
y: 15,
marker: {
enabled: true,
fillColor: 'black',
symbol: 'circle'
}
},
[3, 10]
],
marker: {
enabled: false
},
linkedTo: 's1',
visible: false,
enableMouseTracking: false
}],
example: http://jsfiddle.net/9L4e328j/
I haven't tried this , but you can try something like this to get the desired result :
tooltip: {
formatter: function() {
//resetting state
for(i=0;i<this.series.data.length;i++){
this.series.data[i].setState();
}
var index=this.series.data.indexOf( this.point )
//setting state on the current,previous,next point
this.series.data[index].setState('hover');
this.series.data[index-1].setState('hover');
this.series.data[index+1].setState('hover');
return "your tooltip";
}
}
Concerning http://jsfiddle.net/5gjne/10/ I would like simply hide the "red" range series (range2) into tooltip, how to make this?
tooltip: {
crosshairs: true,
shared: true,
valueSuffix: '°C'
},
Thanks!
If you disable mouse tracking on that series it'll be excluded from tooltip.
{
name: 'Range',
data: ranges2,
type: 'arearange',
lineWidth: 0,
linkedTo: ':previous',
color: Highcharts.getOptions().colors[0],
fillOpacity: 0.3,
color: 'red',
zIndex: 0,
enableMouseTracking: false //<--add this
},
See updated fiddle.