Highcharts not display for iOS and Safari

Question

I have a problem, I can not display the data of my Highcharts on iOS and Safari. Chrome shows no problems. In your opinion what is the answer to my bug? Thank you

Please elaborate your question more. https://stackoverflow.com/help/how-to-ask — Power Star, Aug 01 '17 at 09:04
Could you please post live example of your issue like jsFiddle? It looks that charts from Highcharts demo web page works correctly on both Chrome and Safari.https://www.highcharts.com/demo — Grzegorz Blachliński, Aug 01 '17 at 11:53

score 3 · Accepted Answer · answered Aug 09 '17 at 10:35

3

In your code you are using Date.getTime() which gives you the time in UNIX Timestamp (Miliseconds since 1970-01-01)

Safari and chrome on iOS cannot parse such Date and you need to convert it differently to make it work both with Safari and Highcharts.

As specified in this example you can use Date.UTC(year,month,day) to parse dates for Highcharts.

Try this and let me know if it works!

BTW You do not need to sort dates anymore ;)

answered Aug 09 '17 at 10:35

Antoine Laborderie

141
10

Hello Antoine Laborderie, I just applied your solution on my code and the graph display works perfectly. Thank you very much! – Orkatz Arano Aug 09 '17 at 10:40

score 0 · Answer 2 · answered Aug 01 '17 at 12:17

ISO Highcharts

JS Fiddle Example

Use same as below code it's working

HTML

 <div id="container" style="min-width: 310px; max-width: 800px; height: 400px; 
    margin: 0 auto">
 </div>

JS

Highcharts.chart('container', {
chart: {
    type: 'bar'
},
credits: {
            enabled: false
        },
        exporting: { 
            enabled: false
         },
title: {
    text: 'Campus Placement Preferences'
},
xAxis: {
    categories: ['BACHELOR', 'MASTER', 'DIPLOMA', 'DOCTORATE'],

     labels: {
         enabled: true
     },
     minorTickLength: 0,
     tickLength: 0
      },
  yAxis: {
    min: 0,
    title: {
        text: ''
    },
    gridLineColor: 'transparent'
},
legend: {
    reversed: true
},

tooltip: {
                    headerFormat: '<span style="font-size:11px">
 {series.name}</span><br>',
                    pointFormat: '<span style="color:{point.color}"></span> 
    <b>{point.y}%</b> of total 100%<br/>'
                },
   plotOptions: {
    series: {
        stacking: 'percent'
    }
 },
  series: [{
      name: 'NO',
    color:'#70d8ff',
    data: [50, 30, 40, 70]
 }, {
    name: 'YES',
    color:'#1d3166',
    data: [50, 70, 60, 30]
}]
});

score -1 · Answer 3 · answered Aug 29 '19 at 14:54

I received a very unspecific error on Safari and also browsers on my iPad did not show the data within the highchart. I specified start and end time of my chart based on a function that used new Date(). After I read this thread Why does Date.parse give incorrect results? I parsed my start and end date (specified in the chart options) with the given parsing function and now highcharts works fine!

Highcharts not display for iOS and Safari

3 Answers3