Botsa Santosh
Botsa Santosh

Reputation: 23

how to make above highchart graph responsive on window resize?

High Chart Graph

Here I have attached my code. I want to make above graph responsive on window resize. Please give me a solution as early as possible.

   Highcharts.chart('containerChart', {
        chart: {
            type: 'bar',
            marginLeft: 0,
            marginTop: 100
        },
        title: {
            text: 'Reject Category',
            align: 'left',
            x: 30,
            y: 35,
            style: {
                color: '#666666',
                fontWeight: 'normal',
                fontSize: 12,
                fontFamily: 'Lucida Grande,Lucida Sans Unicode, Arial, Helvetica, sans-serif',
            }
        },
        tooltip: {
            enabled: false,
            valueSuffix: ' %',

            }
        },
        exporting: {
            enabled: false,
        },
        credits: {
            enabled: false,
        },
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: false
                },

            },
            series: {
                pointWidth: 25,

                }, states: {
                    hover: {
                        enabled: false
                    }
                }
            },

        },
        xAxis: [{
            categories: arrcategory,
            width: 100,
            left: 140,
            height: 34 * ctglength,
            lineWidth: 0,
            minorGridLineWidth: 0,
            minorTickLength: 0,
            // tickLength: 0,
            title: {
                text: null,
            },
            labels: {
                overflow: 'justify',
                enabled: true,
                style: {
                    fontWeight: 'bold',

                }

            },
            gridLineWidth: 0
        }, {
            categories: true,
            linkedTo: 0,
            width: 100,
            height: 34 * ctglength,
            left: 358,
            visible: false
        }],
        yAxis: [{
            min: 0,
            max: 100,
            width: 400,
            left: 140,
            //gridLineWidth: 0,
            labels: {
                overflow: 'justify',
                enabled: false
            },
            title: {
                text: '# of Transactions',
                "textAlign": 'right',
                "rotation": 0,
                x: 15,
                y: -310
            },

        }, {
            min: 0,
            max: 100,
            left: 700,
            width: 400,
            // gridLineWidth: 0,
            labels: {
                overflow: 'justify',
                enabled: false
            },
            title: {
                text: '$ in Premium',
                "textAlign": 'right',
                "rotation": 0,
                x: 10,
                y: -330
            },
        }],
        series: [{
            data: arrdata1,
            color: '#E95E4F',
            showInLegend: false,
            //enableMouseTracking: false,
            dataLabels: {
                overflow: false,
                enabled: true,
                crop: false,



        }, {
            data: arrdata2,
            color: '#E95E4F',
            showInLegend: false,
            //enableMouseTracking: false,
            dataLabels: {
                overflow: false,
                enabled: true,
                crop: false,

            },
            yAxis: 1,
            xAxis: 1
        }]
    });

Upvotes: 2

Views: 243

Answers (1)

Ferus7
Ferus7

Reputation: 727

try to setSize the Chart in window.onresize , set ur chart in a var and set the height and width getting the input values

 myChart= Highcharts.chart....your chart config function

window.onresize = function () {
   var w = window.innerWidth;
   var h = window.innerHeight;

   myChart.setSize(w, h);
}

jsfiddle.net/pdy5w1ta/1

Upvotes: 1

Related Questions