Bug with responsiveness on ios - safari with version 2.6.0

[fporrata]

Chart displays fine in Chrome and other browsers but does not work with Iphone (Safari 10.3).
Tried using setTimeout, ChartArea backgroundColor, etc. Here is the code:

[fporrata]

`<script type="text/javascript">
$(document).ready(function () {

       setTimeout(LoadChart(), 100);
        //  $("#btn_line_chart").on('click', function () {

        function LoadChart() {

            var mb_one = 1;
            var mb_two = 2;
            var getYear = 2015;

            var jsonData = JSON.stringify({
                mobileId_one: mb_one,
                mobileId_two: mb_two,
                year: getYear
            });

            $.ajax({
                type: "POST",
                url: "Default.aspx/getLineChartData",
                data: jsonData,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess_,
                error: OnErrorCall_
            });

            function OnSuccess_(reponse) {
                var aData = reponse.d;
                var aDatasets0 = aData[0];


                var config = {
                    type: 'line',
                    data: {
                        xLabels: [0, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200, 1300, 1400, 1500, 1600, 1700, 1800, 1900, 2000, 2100, 2200, 2300, 2400, 2500, 2600, 2700, 2800, 2900, 3000, 3100, 3200, 3300, 3400, 3500, 3600, 3700, 3800, 3900, 4000],
                        
                        yLabels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40],
                        datasets: [{
                            label: "RL SpecGlobal",
                            fill: false,
                            borderColor: window.chartColors.red,
                            backgroundColor: window.chartColors.red,
                            steppedLine: true
                        }, {
                            type: 'line',
                            label: 'RL Test Sample 1',
                            borderColor: window.chartColors.blue,
                            borderWidth: 2,
                            fill: false,
                            data: [{
                                x: 500,
                                y: 35
                            }, {
                                x: 1600,
                                y: 34
                            }, {
                                x: 2100,
                                y: 30
                            }, {
                                x: 2600,
                                y: 30
                            }, {
                                x: 3700,
                                y: 34
                            }],
                            showLine: false,
                            pointStyle: 'crossRot',
                            pointRadius: 7
                        }, {
                            type: 'line',
                            label: 'RL Spec legacy',
                            borderColor: window.chartColors.yellow,
                            borderWidth: 2,
                            fill: false,
                            data: [{
                                x: 0,
                                y: 30
                            }, {
                                x: 2300,
                                y: 30
                            }],
                            borderDash: [5, 5],
                            lineTension: 0,
                            pointRadius: 7

                        }, {
                            type: 'line',
                            label: 'RL Test Real 1',
                            borderColor: window.chartColors.orange,
                            borderWidth: 2,
                            fill: false,
                            data: [{
                                x: 2300,
                                y: 33
                            }],
                            showLine: false,
                            pointStyle: 'crossRot',
                            pointRadius: 7
                        },

                        ] //end of datasets
                    },
                    options: {
                        responsive: true,
                        animation: false,
                        chartArea: {
                            backgroundColor: 'rgba(251, 85, 85, 0.4)'
                        },
                        legend: {
                            position: 'right',
                            labels: {
                                usePointStyle: true
                            }
                        },
                        title: {
                            display: true,
                            //text: 'Jumper Charts'
                        },
                        tooltips: {
                            enabled: false,
                        },
                        scales: {
                            xAxes: [{
                                position: 'top',
                                display: true,
                                scaleLabel: {
                                    display: true,
                                    labelString: 'Frequency (MHz)'
                                },

                            }],
                            yAxes: [{
                                type: 'category',
                                position: 'left',
                                display: true,
                                scaleLabel: {
                                    display: true,
                                    labelString: 'Return Loss (dB)'
                                },
                                ticks: {
                                    //reverse: true,
                                    stepSize: 1
                                },

                            }]
                        }
                    }
                };

                var ctx = $("#myChart").get(0).getContext('2d');
                var lineChart = new Chart(ctx, config);
                //index starts at 0, so data[3] = 300



                var arrayLength = aDatasets0.length/ 2;
                for (var i = 0; i < arrayLength ; i++) {
                      lineChart.data.datasets[0].data.push({ x: aDatasets0[i * 2], y: aDatasets0[i * 2 + 1] });
                  }

                lineChart.update()

             
            }
            function OnErrorCall_(repo) {
                errortext = repo.responseText;
                console.log(errortext)
                alert(repo.responseText);
                alert("Something went wrong, pls try later !");
            }

        }
    });



</script>`

[etimberg]

@fporrata do you have a fiddle that reproduces this? What does your HTML look like before and after the chart is created?

[fporrata]

This is the site that creates the chart. There is some C# code that creates dataset0 but it is just a few X Y points. Here is the link: http://myrfs.rfsworld.com/jumperspecs/jumperdemo/default.aspx

[fporrata]

Here is a zip file of the code:
Default.zip

[simonbrunel]

@fporrata not related to your issue but I noticed that your site uses resources from chartjs.org/dist and chartjs.org/samples. There is no guarantee that these resources will stay available and so you should not link to them in production builds. Instead, you can safely use the CDN versions: https://cdnjs.com/libraries/Chart.js.

Maybe related to your issue: you are trying to load Chart.js via HTTP but your site is HTTPS: you could try with https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js.

http://www.chartjs.org/samples/latest/utils.js is internal and your code should not rely on it.

[fporrata]

Thank you, already made the changes.

[fporrata]

It looks like the problem was with the Jquery version. Now the chart shows up but it is all squished in portrait. Can someone try it and let me know how to fix the squished chart? When the Iphone is in landsacpe the chart looks great.

[fporrata]

Here is the image of the squished chart in portrait:

[fporrata]

Moved the legend to the bottom and it helped but still the height is wrong. Tried everything in the following threads and nothing worked: #2958 and #56. Any help will be appreciated. Here is the image:

[simonbrunel]

Did you try the suggested solution in this comment?

[fporrata]

Yes, it did not help. The chart just renders as it appears in the picture above.

[simonbrunel]

Did you set maintainAspectRatio: false?

[fporrata]

I did it like this in code when checking the window width < 481: lineChart.options.maintainAspectRatio = 'false'; and it did not work. I set it in the options directly and it works. Now the problem is that when the phone is change to landscape, the chart gets squished. Let me know if you have a solution for both portrait and landscape. Thanks for all your help.

[simonbrunel]

If you change the options after the chart creation, you need to call chart.update(). Also, it's false (boolean) not 'false' (string) - but I guess it's a typo in your previous message.

A solution that works in both orientations really depends on what you used as height for the div: if it's 50vh like in my comment example, then the chart will be 50% of the viewport (browser) height, which is maybe why you see it squashed when in landscape.

I think in your case it might be simpler to use the built-in aspect ratio. I would switch maintainAspectRatio to true and explicitly set the chart aspectRatio to 1 (which seems a good target, but you can try other values):

<div id="wrapper" style="position: relative">

new Chart(ctx, {
    options: {
        responsive: true,
        maintainAspectRatio: true,
        aspectRatio: 1,  // width == height
        // ...
    }
});

[etimberg]

Closing per @simonbrunel's answer