highchart doesn't show in IE and SAFARI. I try the solution from the official highchart forum, but nothing help (remove "," at the end of json, or resize page on load etc... ) I have multiple different highcharts, but here is only one for explanation. I call config function depends on chart data. My app have many different parts, and it's very hard to make working plunker. Thnx
Here is my code
function getBaseChartConfig(graphName) {
Highcharts.setOptions({
global: {
useUTC: false
}
});
var config =
{
xAxis: {
ordinal: false
},
yAxis: {
},
options: {
chart: {
zoomType: 'x',
backgroundColor: 'rgba(255, 255, 255, 1)',
polar: true,
type: 'line',
borderRadius: 5
},
legend: {
enabled: true
},
rangeSelector: {
//za postavit rucni upis date range-a
enabled: false,
inputStyle: {
color: 'black'
}
},
navigator: {
enabled: true
}
},
series: [],
title: {
text: graphName
},
useHighStocks: true
};
return config;
};
$scope.data.push(solar_voltage);
$scope.data.push(battery_voltage);
$scope.data.push(solar_current);
$scope.data.push(hybridCurrent);
$scope.chartConfig1 = getChartConfigWithYaxisPlotLines('Production');
$scope.chartConfig1.series.push({
id: 1,
name: "Solar voltage",
data: $scope.data[0],
tooltip: {
valueDecimals: 2
}
}, {
id: 2,
name: "Battery voltage",
data: $scope.data[1],
tooltip: {
valueDecimals: 2
}
}, {
id: 3,
name: "Solar current",
data: $scope.data[2],
tooltip: {
valueDecimals: 2
}
}, {
id: 4,
name: "Hybrid current",
data: $scope.data[3],
tooltip: {
valueDecimals: 2
}
}
);
function getChartConfigWithYaxisPlotLines(graphName) {
var baseChartConfig = getBaseChartConfig(graphName);
baseChartConfig.yAxis.plotLines = [{
color: '#FF0000',
width: 1,
value: 11.50,
label: {text: '11.50'}
}];
return baseChartConfig;
}
Here is image how this look in safari or IE
And here is in CHROME and FIREFOX
This is my json from api