Zing Chart X-axis are Labels are out of bound

Question

I am creating a graph using zing Chart. when I populate time in chart x-axis; times goes out of boundary of x-axis as you can show in image. I have tried adding padding and margin to div. I have also tried to reduce the width of Graph still didn't work. I am using time in 24 hour format. I-e year-month-day(space)house:minutes:second -> 2022-10-10 23:24:05 I am passing time array of around 300k points in the above mention format. Can some one tell me what is the issue. I am using zing chart version is 2.9.9 my code

zingchart.DEV.SORTTOKENS = 0;
zingchart.DEV.PLOTSTATS = 0;
zingchart.DEV.RESOURCES = 0;
zingchart.DEV.KEEPSOURCE = 0;
zingchart.DEV.COPYDATA = 0;
zingchart.DEV.MEDIARULES = 0;
zingchart.SYNTAX = 'dashed';

function chart_AngleTime(timeArray,angle_arr) {

    $('#lineChart').remove();
    $('#canvas_div').append(
        // i have tried here to add padding and margin.
        '<div id="lineChart_at" style=" min-height: 400px; height: 500px; max-height: 500px; max-width: 100%;"></div>'
    );

    var configTimeAndAngle = {
        "type": "line",
        legend: {
            layout: "1x1", //row x column // items means in one two we added two items as in legends
            x: "35%",
            y: "6%",
        },
        "preview":{
            "live":true
        },
        plot: {
            mode: 'fast',
        },
        'scale-x': {
            zooming: true,
            labels: timeArray,
            item: {
            'font-size':10
            }
        },
        'scale-y': {
            'auto-fit': true,
            'min-value':0,
            'max-value':360,
            guide: {
                'line-style': "dotted"
            },
            item: {
            'font-size':10
            }
        },
        'crosshair-x': {
            text: 'Time : %kt (X) Freq : %vt (Y).',
            'line-style': 'dashed',
            'line-width': 2,
            'line-color': '#2196F3',
            marker: {
                type: 'triangle',
                size: 5,
                visible: true
            }
        },
        gui: {
            behaviors: [
            {
                id: 'DownloadPDF',
                enabled: 'none'
            },
            {
                id: 'ViewDataTable',
                enabled: 'none'
            },
            {
                id: 'ViewSource',
                enabled: 'none'
            },
            {
                id: 'CrosshairHide',
                enabled: 'all'
            }
            ]
        },
        "series": [
            {
                "values": angle_arr,
                'line-color': "#3366ff",
                'background-color': "#3366ff",
                text: "Angle"
            }
           
        ]
    };

    zingchart.QUOTEDVALUES = true;
    zingchart.render({
        id: "lineChart_at",
        height: "100%",
        width: "100%", // i have tired here to edit the width
        output: "canvas",
        data: configTimeAndAngle
    });

}

Answer 1

I appliedmargin: 150to the plotarea object and the x-axis labels are within the display as you can see in the attached screenshot and demo.