zing chart are not being render in Canvas

Question

I am trying to plot some heavy data on zing Chart. Zing charts are normally plot inside a div but for my case my page became leggy after loading 200k points inside zing chart div-tag. In the doc it says to load large data in Canvas. In the performance documentation of zing chart; in the end of document there is Render type, it says to load in canvas but its not working. according to doc
Render Type
The render method is where you can define the output, which can either render Canvas or SVG. If you are rendering a large dataset, the performance of Canvas will benefit you because DOM explosion happens when rendering in SVG.

Here is my code any suggestion or help.

function chart_timeFreq_ff_fh(timeArray, frequency_array_ff, frequency_array_fh) {
  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';

    $('#lineChart_f').remove();
    $('#canvas_div_f').append(
        '<canvas id="lineChart_f" style="min-height: 400px; height: 550px; max-height: 500px; max-width: 100%;"></canvas>'
    );

    let configTimeAndAngle = {
        "type": "line",
        plot: {
        mode: 'fast',
        'hint-ts': true
        },
        legend: {
            layout: "1x2", //row x column // items means in one two we added two items as legends
            x: "35%",
            y: "6%",
        },
        "preview":{
            "live":true
        },
        'scale-x': {
            zooming: true,
            labels: timeArray,
            'max-items':8,
            transform: {
                type: 'date'
            },

            item: {
            'font-size':10
            }
        },
        'scale-y': {
            'auto-fit': true,
            guide: {
                'line-style': "solid"
            },
            item: {
            'font-size':10
            }
        },
        tooltip: {
            // text: 'Time : %kt (X) Freq : %%node-value (Y).',
            text: 'Time : %kt (X) Freq : %v (Y).',
            alpha: 0.9,
            backgroundColor: '#F44336',
            borderColor: '#B71C1C',
            borderRadius: 2,
            borderWidth: 1,
            padding: '5 10'
        },
        gui: {
            behaviors: [
            {
                id: 'ViewDataTable',
                enabled: 'none'
            },
            {
                id: 'ViewSource',
                enabled: 'none'
            },
            {
                id: 'CrosshairHide',
                enabled: 'all'
            }
            ]
        },
        "series": [
            {
            "values": frequency_array_ff,
            'line-color': "#3366ff",
            'background-color': "#3366ff",
            text: "Centeral Frequency"
            },
            {
            "values": frequency_array_fh,
            'line-color': "#00cc99",
            'background-color': "#00cc99",
            text: "Frequency Hopping"
            }
        ]
    };



    zingchart.render({
        id: 'lineChart_cob_f',
        data: configTimeAndAngle,
        height: "100%",
        width: "100%",
        output: "canvas"
    });

}

Updated
I have tried to plot like this but still issue. Above chart is also updated and we i need to change how I pass time ? my time format is like 2022-10-10 23:24:03 an array of time like this so in the 'scale-x': { labels: timeArray} i add time like this

"series": [
 
            {
                values: [],
                'line-color': "#3366ff",
                'background-color': "#3366ff",
                text: "Centeral Frequency"
            },
            {
                values: [],
                'line-color': "#00cc99",
                'background-color': "#00cc99",
                text: "Frequency Hopping"
            }
        ]
configTimeAndAngle.series[0].values.push([frequency_array_ff]);
configTimeAndAngle.series[1].values.push([frequency_array_fh]);
configTimeAndAngle.series[0]=values.[frequency_array_ff];
configTimeAndAngle.series[1]=values[frequency_array_fh];
configTimeAndAngle.series[0]=frequency_array_ff;
configTimeAndAngle.series[1]=frequency_array_fh];

Answer 1

To be honest I also had the same issue all day, then I saw this and I have found the issue on your question. you have use canvas instead use div and while rendering use

// this is your code 

$('#canvas_div_f').append(
    '<canvas id="lineChart_f" style="min-height: 400px; height: 550px; max-height: 500px; max-width: 100%;"></canvas>'
);

instead just use

$('#canvas_div_f').append(
    '<div id="lineChart_f" style="min-height: 400px; height: 550px; max-height: 500px; max-width: 100%;"></div>'
);

and while render set output to canvas.

zingchart.render({
    id: 'lineChart_cob_f',
    data: configTimeAndAngle,
    height: "100%",
    width: "100%",
    output: "canvas"
});