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
Related
Is it possible to display both stacked and unstacked columns side-by-side in a Highcharts chart? I understand you can manipulate the series.stack() method and pass in a String but unable to get it right.
Similar to enter code herethis fiddle but with both stacked and unstacked columns.
Just give a different, unique ID (could be a number) and there will be no stack - just a column.
Demo: https://jsfiddle.net/BlackLabel/s63ae9d2/
series: [
{
data: [29.9, 71.5, 106.4, 129.2, 144.0],
stack: 0
}, {
data: [30, 176.0, 135.6, 148.5, 216.4],
stack: 0
}, {
data: [106.4, 129.2, 144.0, 29.9, 71.5],
stack: 1
}, {
data: [148.5, 216.4, 30, 176.0, 135.6],
stack: 2
}
]
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/
I try to hide the labels for which the values are zero, and at the same time format other labels. This does not look to work properly. I used the property "format" and the "formatter" trick. But combine both does not look to be possible.
dataLabels:{
enabled:true,
format: "{point.y:.1f}",
formatter:function(){
if(this.y > 0)
return this.y;
}
}
fiddle: http://jsfiddle.net/laloune/p74p2s91/
any idea?
You must change '0' to 'null' in the dataset.
http://jsfiddle.net/mnpL7zu4/
series: [{ data: [11, 71.5, null, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]}]
I am trying to use an image for name in Highcharts Graphs, I have tried the following approach but this doesn't to work,
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],
name: '<img src="http://www.text100.com/wp-content/uploads/2013/03/icon-plug-small.png" >'
}]
Is there any other way to achieve this?
To add html images, you need to set useHTML to true option, where it's necessary (e.g. tooltip, legend): http://jsfiddle.net/a3be47f8/
$('#container').highcharts({
tooltip: {
useHTML: true
},
legend: {
useHTML: true
},
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],
name: '<img style="width: 50px; height: 50px" src="http://www.text100.com/wp-content/uploads/2013/03/icon-plug-small.png" >'
}]
});
Note: I advice to set width/height, otherwise it may happen that tooltip/legend won't be able to reserve proper amount of space, because image won't be already loaded.
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]
}]