I am building a highstock chart at my company and currently I'm having the following issue:
I need to change the rangeSelector input fields to german locale format. For example: 25.06.2016
But I noticed that, as soon as I change the date format in the option "inputEditDateFormat" it just doesn't work anymore. I'm not sure if the chart just mixes up the month and day, but it doesn't do what it's supposed to.
I've made a fiddle to give you an insight on my problem. http://jsfiddle.net/G7azG/34/
$('#container').highcharts('StockChart', {
"colors": [
"#fedd00",
"#22b6ae",
"#c0263c",
"#136e6c",
"#e2a297"
],
"legend": {
"align": "left",
"adjustChartSize": true,
"navigation": {
"enabled": false
},
"enabled": false
},
"rangeSelector": {
"selected": 4,
"inputDateFormat": "%d.%m.%Y",
"inputEditDateFormat": "%d.%m.%Y" // <-- blame this fool
},
"yAxis": {
"labels": {},
"plotLines": [
{
"value": 0,
"width": 2,
"color": "silver"
}
]
},
"plotOptions": {
"series": {
"compare": "percent",
"showInNavigator": true,
"lineWidth": 3
}
},
"tooltip": {
"pointFormat": "<span style=\"color:{series.color}\">{series.name}</span>: <b>{point.y} €/t</b> ({point.change}%)<br/>",
"valueDecimals": 2,
"split": true
},
"series": [
{
"data": [
[
1136073600000,
72.9
],
[
1138752000000,
73.6
],
[
1141171200000,
74.2
],
[
1143849600000,
75
],
[
1146441600000,
75.3
],
[
1149120000000,
75.8
],
[
1151712000000,
77.3
],
[
1154390400000,
78.6
],
[
1157068800000,
80.4
],
[
1159660800000,
82.8
],
[
1162339200000,
83.6
],
[
1164931200000,
86.5
],
[
1167609600000,
86.8
],
[
1170288000000,
84.5
],
[
1172707200000,
82.5
],
[
1175385600000,
77.6
],
[
1177977600000,
76.5
],
[
1180656000000,
76.1
],
[
1183248000000,
76.2
],
[
1185926400000,
76.2
],
[
1188604800000,
77.4
],
[
1191196800000,
81.1
],
[
1193875200000,
83.7
],
[
1196467200000,
83.6
],
[
1199145600000,
83.9
],
[
1201824000000,
81.6
],
[
1204329600000,
75.3
],
[
1207008000000,
67.6
],
[
1209600000000,
68
],
[
1212278400000,
68.2
]
],
"visible": true,
"name": "Rundholz AT"
}
]
});
EDIT:
Thanks to morganfree I got this working. I just needed to use the inputDateParser function like so:
rangeSelector: {
inputDateFormat: "%d.%m.%Y",
inputEditDateFormat: "%d.%m.%Y",
inputDateParser: function (value) {
value = value.split('.');
console.log(value);
return Date.UTC(
parseInt(value[2]),
parseInt(value[1] - 1),
parseInt(value[0])
);
}
}
Cheers;;
From docs inputEditDateFormat
... This must be a format that is recognized by JavaScript Date.parse.
You need to parse the date with inputDateParser.