I am learning to use Highstock charts. I pass OHLC data, but when I use
type: 'line'
the chart displays Open Price. I understand Open is the first element after date, but is this configurable to change to Close?
Thanks
Sure, it is configurable. You can parse your data to display only the close values.
Highcharts.getJSON('https://demo-live-data.highcharts.com/aapl-ohlcv.json', function (data) {
const lineData = data.map(d => d[4]);
Highcharts.stockChart('container', {
series: [{
type: 'line',
data: lineData
}],
});
});
Demo: https://jsfiddle.net/BlackLabel/a6dtL8hw/
Related
I'm using Highcharts csvURL to import a .csv file and create a line graph. The points all seem fine, but many of my series titles are undefined. My client has 22 series. I wonder if there is a limit. I'm using the example code from highcharts:
Highcharts.chart('container', {
chart: {
type: 'line'
},
data: {
csvURL: 'Ozone-4th-Highest-8hr-Front.csv'
},
title: {
text: 'Ozone 4th Highest 8-hr Concentration Wasatch Front'
},
yAxis: {
title: {
text: '(Ozone PPM)'
}
}
});
Here is what my csv looks like:
Part of a line with hash is interpreted as a comment:
https://github.com/highcharts/highcharts/blob/master/ts/modules/data.src.ts#L1121
To avoid that, you can use a quote:
<pre id="csv" style="display:none">Year,Annual mean,"#5 year mean"
1880,-0.31,
...</pre>
Live example: https://jsfiddle.net/BlackLabel/a8e9yg0x/
My client had hashtags in her series names. Once I removed them, csvURL worked as expected. Now I need to learn how to keep the hashtags without breaking the script!
Elaborating a graph where I point with y different, and 'x' equals; I put in the series:
series: [{
name: 'Grafico 1',
data: data,
dataLabels: {
enabled: true,
formatter: function () {
return Highcharts.numberFormat(this.y, 2)
},
color: "#000000"
},
stacking: 'normal',
}]
and as a result in the chart have the highest value added with the smaller one, that is:
http://i.imgur.com/Ups7AzT.png
If I remove the statement "stacking: 'normal'", I instead the chart without the line joining the points:
http://i.imgur.com/gMAO5VW.png
I ask: you can have the chart without the value added is greater than the lower (ie the value 18 is represented as 18 in the chart, and 26.45 because the child is 8.45)?
I'm playing around with the properties of a chart I created in Highcharts, and I'd like to know what attributes are associated with the legend.labelFormat property. I know that {name} is one that definitely works, but I can't find documentation regarding any other attributes that can be used.
I suppose that I'm looking for something similar to the tooltip.pointFormat property, where you can use attributes like {point.value}, {point.percentage}, and so on.
What makes me think that additional properties other than {name} exist is this thread in which the user mentions using this.options.total in the legend.labelFormatter property.
Can anyone help?
Other attributes that can be used are attributes of a series. You can check what are defined attributes of a series using browser console (Developer Tools) and labelFormatter function.
Example: http://jsfiddle.net/e7w88usj/1/
$(function () {
$('#container').highcharts({
legend: {
//labelFormat: '{color} {index} {symbol}',
labelFormatter: function () {
console.log(this);
return this.name;
}
// (!) labelFormat will override labelFormatter if both are used
},
series: [{
data: [29.9, 9, 8]
}, {
data: [1, 2, 34]
}]
});
});
I've put a label in my data showing the index of each serie:
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{series.index}'
}
}
},
Altough it starts at 0 and I would like it to start at 1.
Here a fiddle.
You can switch from format to formatter to easily solve this. It provides more flexibility and advanced functionality. The format attribute can only do simple tasks involving the variables in their original form.
You have:
format: '{series.index}'
Replace it with:
formatter: function() {
return this.series.index+1;
}
As in this JSFiddle demonstration.
How can we get next elements name in Highcharts
for example
series: [{ name: 'weight', data: [50, 48, 80, 70]},
{ name: 'height',data: [5.8, 5.1, 6.1, 6.0]}
]
tooltip: {
formatter: function(){
return this.series.name;//i want to return here next elements name also is there any way
}
}
in the above tooltip iam returning only current element name, is there any way to get immediate next elements name there..?
You can always use shared tooltip, take a look: http://api.highcharts.com/highcharts#tooltip.shared