删除固定高度以显示全屏图表

Question

I have a highchart with two yAxis. One axis is below the other. Both have a fixed height. My Problem is that when I make it full screen the graph still takes only this original height. Normally it will occupy the full height. Is there anyway I can get full height element in full screen?

Highcharts.chart('container', {
chart: {
    type: 'area'
},

yAxis: [{
        height : 200,
},
{
top:300,
height: 200,
}
],

xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},

series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 126.0, 148.5, 216.4, 194.1, 95.6, 54.4],
    yAxis : 0,
},
{
    data: [54.4, 95.6, 194.1, 216.4, 148.5, 126.0, 135.6, 176.0, 144.5, 129.4, 106.1, 71.6, 29.4],
    yAxis : 1,
}]

});

This is my javascript code.

I am attaching the fiddle here

Thanks in advance.

Answer 1

You need to use the responsive parameters in order to get this done the way you wish:

https://jsfiddle.net/gugalondon/n0g9rhzw/1/

This is the updated code that I added:

responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            // Make the labels less space demanding on mobile
            chartOptions: {
                xAxis: {
                    labels: {
                        formatter: function () {
                            return this.value.charAt(0);
                        }
                    }
                },
                yAxis: {
                    labels: {
                        align: 'left',
                        x: 0,
                        y: -2
                    },
                    title: {
                        text: ''
                    }
                }
            }
        }]
    },

and here's the modification of your yAxis:

    yAxis: [{
            labels: {
                align: 'right',
                x: -3
            },
            height: '50%',
            lineWidth: 2,
            resize: {
                enabled: true
            }
        }, {
            labels: {
                align: 'right',
                x: -3
            },
            top: '50%',
            height: '50%',
            offset: 0,
            lineWidth: 2
        }],

 Highcharts.chart('container', { chart: { type: 'area' }, responsive: { rules: [{ condition: { maxWidth: 500 }, // Make the labels less space demanding on mobile chartOptions: { xAxis: { labels: { formatter: function () { return this.value.charAt(0); } } }, yAxis: { labels: { align: 'left', x: 0, y: -2 }, title: { text: '' } } } }] }, yAxis: [{ labels: { align: 'right', x: -3 }, height: '50%', lineWidth: 2, resize: { enabled: true } }, { labels: { align: 'right', x: -3 }, top: '50%', height: '50%', offset: 0, lineWidth: 2 }], xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 126.0, 148.5, 216.4, 194.1, 95.6, 54.4], yAxis : 0, }, { data: [54.4, 95.6, 194.1, 216.4, 148.5, 126.0, 135.6, 176.0, 144.5, 129.4, 106.1, 71.6, 29.4], yAxis : 1, }] }); 

 #container { height:600px; } 

 <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <script src="https://code.highcharts.com/modules/offline-exporting.js"></script> <div id="container"></div>