try to change the colour dynamically for particular part in line chart but can't get any idea ,
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6],
zoneAxis: 'x',
zones: [ {
value:3,
dashStyle: 'solid',
color:'#7cb5ec',
fillColor:'#7cb5ec'
},{
value: 8,
dashStyle: 'dot',
color:'#FFA262'
}, {
value:11,
dashStyle: 'solid',
color:'#7cb5ec',
fillColor:'#7cb5ec'
}]
}]
here my fiddle
here i want to change the points(that have orange) colour in dynamic way in set of time interval i.e(5 sec)
please help me out to find the solution geeks
You need to dynamically update the series' zones. You can do it with Series#update().
chart.series[0].update({
zones: [{ ... }]
})
If you want to do it periodically use setInterval().
live example: http://jsfiddle.net/8gwh9yL6/
Related
Seems like it should be an easy enough thing but i cant see how i pass x values to a line chart.
Ive found examples like: https://jsfiddle.net/9r0sfehc/1/
Highcharts.chart('container', {
xAxis: {
type: 'datetime'
},
plotOptions: {
series: {
pointStart: Date.UTC(2010, 0, 1),
pointInterval: 24 * 3600 * 1000// one day
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
}]
});
So they pass in the y values and then have a point start in the plot options. That works fine. But im just wondering how i pass in x values too in the case i need something like that.
I tried
data: [{1,29.9}, {2,71.5}, ...]
but that isnt correct
Highcharts can take data in several different ways. I think the one you're looking for is:
An array of arrays with 2 values. In this case, the values correspond to x,y. If the first value is a string, it is applied as the name of the point, and the x value is inferred.
data: [
[0, 1],
[1, 2],
[2, 8]
]
https://api.highcharts.com/highcharts/series.line.data
I made an area chart as in the example below:
Highcharts.chart('container', {
title: {
text: ''
},
plotOptions: {
series: {
allowPointSelect: true,
}
},
series: [{
data: [29.9, null, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, null, 194.1, null, 54.4],
type: 'area',
}]
});
Since my second value in a series is null, I see the first value as a dot. The same happens with the values in the end of the series. Is it possible to connect it to X axis with a line which will be colored as an area of the rest of the chart?
You need to set the series.connectNulls as a true to achieve it.
Demo: https://jsfiddle.net/BlackLabel/7qrtos3m/
API: https://api.highcharts.com/highcharts/series.area.connectNulls
I have a High Chart chart similar to this bar chart: http://jsfiddle.net/s4zzpLzL/
How would I got about spliting the bar colors so that the color of the bar up until 500 is grey and the color of the bar after is the color you see on the screen? See image below.
You can set gradient color for series, demo: http://jsfiddle.net/pscwnzk7/1/
$('#container').highcharts({
chart: {
type: 'bar'
},
series: [{
color: {
linearGradient: [0, 0, 0, 500],
stops: [
[0, '#ff0ff0'],
[0.5, '#ff0ff0'],
[0.5, '#f0f00f']
]
},
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
}]
});
The only problem with that solution is that you can't specify (in values) where will be break - try to resize chart. So you would need to update series color gradient on each window resize etc.
You can use zones in each serie like this:
zones: [{
value: 500,
color: '#A0A0A0'
}]
value is the up until value, and color is the color of that zone. Here's your edited FIDDLE
EDIT:
You can also use plotBands but it's not exactly what you would want: DEMO
There is also a plugin which I don't think covers exactly what you are asking: Plugin
Other than these I don't think there is another way unless you alter your data and use stacked bar chart. You will have to change all of your data though and it will be tiresome.
You can use concept of grouping, threshold and negativeColor to achieve this. Create 2 series with the same data and overlap them with grouping: false and a negativeColor: 'transparent'
demo: https://jsfiddle.net/1dp8L1gw/
plotOptions: {
bar: {
grouping: false,
borderWidth: 0
}
},
series: [{
name: 'Tokyo',
data: [45.9, 71.5, 106.4],
color: 'red'
}, {
name: 'Tokyo',
data: [45.9, 71.5, 106.4],
color: 'blue',
threshold: 50,
negativeColor: 'transparent'
}]
I would like to have two pie charts to show up on my page, next to each other. They are both the same style but different data.
Is that possible and how?
Thank you
You can have multiple series of pie chart data on the same chart
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie'
},
title: {
text: 'Group Name'
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
center: ['20%'],
name: 'foo'
}, {
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
center: ['80%'],
name: 'bar'
}],
plotOptions: {
pie: {
dataLabels: {
enabled: false
}
}
}
});
jsfiddle: http://jsfiddle.net/4NtBw/
Another solution is to set the same size for both charts. That would disable option to smart resize for pie with dataLabels and you will get two the same size charts both with enabled dataLabels.
Search center at : http://docs.highcharts.com/#polar-chart
It might help
I am puzzled why the second yaxis in my Highcharts graph shows, but without any values. Both of my two graphs are still bound to the first yaxis. Can't get one of them attributed to the second yaxis. Here is a fiddle.
Thanks for any hints!
The charts options are case sensitive. You specified 'yaxis' when it should be 'yAxis'. That took me a while to spot !
series: [{
yAxis: 1,
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
},{
yAxis: 0,
data: [19.9, 21.5, 6.4, 29.2, 44.0, 76.0, 35.6, 48.5, 16.4, 94.1, 95.6, 54.4]
}]