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/
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!
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.
I have an array of objects that I want to display in highcharts. Every object has a name and a value.
I have tried to get this to work by doing
var objects = objectArray[]; // objectArray being an array of the objects I want data on
var objectNames = nameArray[]; // This being an array of all the names of the objects
var objectValues = valueArray[]; // An array of all the values of the objects
series: [{
data: objects.value,
name: objects.name
}]
This blew up on me. So I tried building the series like this:
series: [{
data: objectValues,
name: objectNames
}]
This gave me data for the values, but the name was all of the names in the objectNames array... for every single piece of data. so I tried using
series: [{
data: objectValues
},
{
data: objectNames
}]
This resulted in seeing the chart for the objectValues, and in the legend, another option for the names - which is completely unacceptable because there's no point in having a series of labels, right?
So I decided I would programmatically build out a series, using a foreach loop and then pass that into the constructor. However, http://www.highcharts.com/docs/getting-started/how-to-set-options/ says this is "bad code".
What I'm wanting is to be able to pass an array of objects to highcharts, tell it that every piece of data's 'name' is going to be the name value on that particular object, and the data is going to be tied to that particular object's value field. Is there a way to do this? Or is the only option what highcharts considers 'bad'?
So I found a solution.
After getting the data, I did
$.each(item, function (index, value) {
objects.push([value.name, value.value]);
});
And then bound my series with
series: [{
data: objects,
name: 'Value Type Description'
}]
So I have "Value Type Description" in the legend, but when I hover over a specific point I have the name as the label, and valid data displaying in graph form.
I found at http://api.highcharts.com/highcharts#series that if you have an array of two dimensional arrays, you can just pass a string as the first parameter and it would parse it as the label for that point.
EDIT: Example per request.
So you have two pieces to the series field, data and name. Name does NOT apply to the data, that will be the name of the axis.
So data is an array of key/value pairs.
data: [
{[key1, value1]},
{[key2, value2]},
{[key3, value3]}
]
And name is what the "main" label will be - "My Data Stuff" for example.
Then, when you load the chart, in the legend it should say "My Data Stuff", but when you hover over a specific point, say the first one, it will display the Key1 Value1 information.
data: [{
name: 'Point 1',
y: 1,
test1:9,
test2:'ddaf'
}, { -------> right
name: 'Point 2',
y: 5,
test1:12,
test2:'ddddaf'
}]
data: [{
my_name: 'Point 1',
y: 1,
test1:9,
test2:'ddaf'
}, { -------> we change 'name' to 'my_name',
my_name: 'Point 2', then the name you want to show become
y: 5, 'Slice', instead of 'Point 1','Point 2'
test1:12,
test2:'ddddaf'
}]
data: [{
my_name: 'Point 1',
my_y: 1,
test1:9,
test2:'ddaf'
}, { -------> Now,we get nothing.
my_name: 'Point 2',
my_y: 5,
test1:12,
test2:'ddddaf'
}]
So,the 'name' and 'y' is the key.