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!
Related
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/
https://jsfiddle.net/rcvwsbdm/
var data = [{"name":"Adult Emergency","y":2},{"name":"Adult Social Care and Health","y":1},{"name":"Anaesthetics","y":1},{"name":"Audiology","y":2}];
var chart_options = {
"chart": { "type":"bar", "height":"700" },
"xAxis":{ "categories":[""] },
"series":[{"data": data}]
};
$('#main').highcharts(chart_options);
jQuery: 2.2.4
Highcharts: 4.4.2
Right now inside your options.categories you have an empty string:
categories: ['']
This is the reason why you have first label as an empty string. To avoid this situation you can use an empty array instead:
categories: []
Here you can see an example how it can work:
https://jsfiddle.net/rcvwsbdm/1/
Best regards.
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