Google timeline chart is slow for large data

Question

I have a google timeline chart with around 10K datapoints. It takes a long time to draw the chart.

Below is the same code that I use. The code snipped generates 100 datapoints and the chart draws quickly. If I generate 10K datapoints instead of 100, the chart takes a lot of time to load, zoom and pan. Is there anything I could do to improve the performance?

function generateChartDataRows() {
    var rows = [];
    for (var i = 1; i < 100; i++) {
        var val1 = (i % 4).toString();
        var labelText = i.toString();
        var toolTipText = i.toString();
        var start = i * 2;
        var endTime = start + 2;
        var colorCode = '#000000';
        if (i % 4 == 0) { colorCode = '#88CB3E'; }
        else if (i % 4 == 1) { colorCode = '#E70000' }
        else if (i % 4 == 2) { colorCode = '#93B6D6'; }
        else if (i % 4 == 3) { colorCode = '#EBEB00'; }
        rows.push([val1, labelText, toolTipText, colorCode, new Date(start), new Date(endTime)]);
    }
    return rows;
}

function createChart() {
    google.charts.load('current', { packages: ['corechart', 'controls'] }).then(function () {
        var chartWrapperObj = new google.visualization.ChartWrapper({
            chartType: 'Timeline',
            containerId: 'chart',
            options: {
                alternatingRowStyle: false,
                avoidOverlappingGridLines: false,
                bar: { groupWidth: "100%" },
                hAxis: {},
                timeline: {
                    colorByRowLabel: false,
                    groupByRowLabel: true,
                    showBarLabels: false,
                    showRowLabels: true
                },
                chartArea: {
                    backgroundColor: {
                        stroke: '#fff',
                        strokeWidth: 1
                    }
                }
            },
            view: {
                columns: [0, 1, 2, 3, 4, 5]
            }
        });
        var filterControl = new google.visualization.ControlWrapper({
            controlType: 'ChartRangeFilter',
            containerId: 'filtercontrol',
            options: {
                filterColumnLabel: 'Start',
                ui: {
                    chartType: 'TimeLine',
                    chartOptions: {
                        height: 70,
                        chartArea: {
                            width: '98%',
                            height: '100%'
                        },
                        hAxis: {
                            baselineColor: 'none'
                        }
                    },
                    chartView: {
                        columns: [4, 5]
                    }
                }
            }
        });

        var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
        dashboard.bind([filterControl], [chartWrapperObj]);
        drawChart(dashboard, filterControl);
    });
}

function drawChart(dashboard, filterControl) {
    var rows = generateChartDataRows();
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Name1', label: 'Name1' });
    dataTable.addColumn({ type: 'string', id: 'Name2' });
    dataTable.addColumn({ type: 'string', role: 'tooltip' });
    dataTable.addColumn({ type: 'string', id: 'style', role: 'style' });
    dataTable.addColumn({ type: 'datetime', id: 'Start', label: 'Start' });
    dataTable.addColumn({ type: 'datetime', id: 'End', label: 'End' });
    dataTable.addRows(rows);
    var xTicks = [];
    var numOfRows = dataTable.getNumberOfRows();
    for (var i = 0; i < numOfRows; i++) {
        xTicks.push(dataTable.getValue(i, 4));
    }

    filterControl.getOptions().ui.chartOptions.hAxis.ticks = xTicks;
    var dataView = new google.visualization.DataView(dataTable);
    var columns = [0, 1, 2, 3, 4, 5];
    dataView.setColumns(columns);
    dashboard.draw(dataView);
}

createChart();

    <div id="dashboard">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
        <div id="filtercontrol"></div> <br />
        <div id="chart"></div>
    </div>