How to synchronize the x-axis to the changes in the window

Question

I'm trying to make something that will change the size of the graph in sync with changing the size of the window.

And I actually tried writing it, and to some extent I was successful.

I thought I could do it perfectly with the code below, but only the x-axis is out of sync and I don't know how to do it.

What should I change to synchronize?

<script>
    window.onload = function () {
        var canvas = document.getElementById("cvs");
        var ctx = canvas.getContext("2d");

        function fitCanvasSize() {
            canvas.width = document.documentElement.clientWidth - 10;
            canvas.height = document.documentElement.clientHeight - 10;

            data1 = [[10, 50, 'green'], [20, 10, 'green'], [30, 35, 'green'], [40, 25, 'green']];
            data2 = [[10, 54, 'red'], [20, 45, 'red'], [30, 13, 'red'], [40, 32, 'red']];

            scatter = new RGraph.Scatter({
                id: 'cvs',
                data: [data1, data2],
                options: {
                    line: true,
                    xaxisScaleMax: 100,
                    yaxis: false,
                    yaxisScale: false,
                    marginLeft: 150
                }
            }).draw();

            xaxis = new RGraph.Drawing.XAxis({
                id: 'cvs',
                y: 320,
                options: {
                    xaxisLabels: ['Xlabels'],
                    xaxisColor: 'black',
                    textColor: 'black',
                    marginLeft: 150,
                }
            }).draw();

            yaxis = new RGraph.Drawing.YAxis({
                id: 'cvs',
                x: 45,
                options: {
                    yaxisTitle: ['label3'],
                    yaxisColor: 'red',
                    textColor: 'red'
                }
            }).draw();

            yaxis = new RGraph.Drawing.YAxis({
                id: 'cvs',
                x: 95,
                options: {
                    yaxisTitle: ['label2'],
                    yaxisColor: 'blue',
                    textColor: 'blue'
                }
            }).draw();

            yaxis = new RGraph.Drawing.YAxis({
                id: 'cvs',
                x: 145,
                options: {
                    yaxisTitle: ['label1'],
                    yaxisColor: 'green',
                    textColor: 'green'
                }
            }).draw();
        }

        fitCanvasSize();
        window.onresize = fitCanvasSize;
    }
</script>

Answer 1

This is your adapted code:

<canvas id="cvs" width="600" height="250" style="border: 1px solid #ccc">[No canvas support]</canvas>

<style>
    /* Turn off the space at the sides of the page */
    body {
        overflow-y: hidden;
        padding: 0;
    }
</style>

<script>
    canvas = document.getElementById('cvs');

    window.onresize = function ()
    {
        RGraph.ObjectRegistry.clear();
        RGraph.clear(canvas);

        canvas.width  = document.documentElement.clientWidth;
        canvas.height = document.documentElement.clientHeight;

        data1 = [ [10, 50, 'green'], [20, 10, 'green'], [30, 35, 'green'], [40, 25, 'green'] ];
        data2 = [ [10, 54, 'red'],   [20, 45, 'red'],   [30, 13, 'red'],   [40, 32, 'red']   ];

        scatter = new RGraph.Scatter({
            id: 'cvs',
            data: [data1, data2],
            options: {
                line: true,
                xaxisScaleMax: 100,
                xaxis: false,
                yaxis: false,
                yaxisScale: false,
                marginLeft: 200
            }
        }).draw();

        xaxis = new RGraph.Drawing.XAxis({
            id: 'cvs',
            y: canvas.height - 35,
            options: {
                xaxisLabels: ['Q1','Q2','Q3','Q4'],
                xaxisColor: 'black',
                textColor: 'black',
                marginLeft: 200,
            }
        }).draw();

        yaxis1 = new RGraph.Drawing.YAxis({
            id: 'cvs',
            x: 60,
            options: {
                yaxisScaleMax: 10,
                yaxisTitle: 'The red title',
                yaxisColor: 'red',
                textColor: 'red'
            }
        }).draw();

        yaxis2 = new RGraph.Drawing.YAxis({
            id: 'cvs',
            x: 125,
            options: {
                yaxisScaleMax: 12,
                yaxisTitle: 'The blue title',
                yaxisColor: 'blue',
                textColor: 'blue'
            }
        }).draw();

        yaxis3 = new RGraph.Drawing.YAxis({
            id: 'cvs',
            x: 200,
            options: {
                yaxisScaleMax: 100,
                yaxisTitle: 'The green title',
                yaxisColor: 'green',
                textColor: 'green'
            }
        }).draw();
    }

    window.onresize();
</script>