score:0

i could use the darkr id and position it right in scales like this

var canvas = document.createelement('canvas');
    div = document.getelementbyid('container');
    canvas.id = "mychart";
    canvas.style.zindex = 8;
    div.appendchild(canvas);
    const labels = [
        '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50', '51', '52', '1', '2', '3', '4', '5', '6', '7'
    ];

    const data = {
        labels: labels,
        datasets: [{
                label: 'red',
                backgroundcolor: 'rgb(255,0,0)',
                bordercolor: 'rgb(255,0,0)',
                data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                stack: 'combined',
                type: 'bar',
                order: 4
            },
            {
                label: 'yellow',
                backgroundcolor: 'rgb(255,255,0)',
                bordercolor: 'rgb(255,255,0)',
                data: [0, 2, 2, 0, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                stack: 'combined',
                type: 'bar',
                order: 4
            },
            {
                label: 'orange',
                backgroundcolor: 'rgb(255,159,64)',
                bordercolor: 'rgb(255,159,64)',
                data: [9, 21, 21, 0, 21, 21, 21, 21, 18, 18, 18, 18, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9],
                stack: 'combined',
                type: 'bar',
                order: 4
            },
            {
                label: 'grey light',
                backgroundcolor: 'rgb(224,224,224)',
                bordercolor: 'rgb(224,224,224)',
                data: [9, 20, 20, 0, 20, 20, 21, 21, 19, 19, 19, 19, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9],
                stack: 'combined',
                type: 'bar',
                order: 4
            },
            {
                label: 'blue',
                backgroundcolor: 'rgb(30,144,255)',
                bordercolor: 'rgb(30,144,255)',
                data: [328, 421, 421, 0, 421, 421, 422, 422, 344, 344, 344, 344, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328],
                stack: 'combined_first',
                yaxisid: 'greydablue',
                order: 1
            },
            {
                label: 'dark red',
                backgroundcolor: 'rgb(165,42,42)',
                bordercolor: 'rgb(165,42,42)',
                data: [0.45, 1.55, 1.55, 0, 1.55, 1.55, 1.55, 1.55, 1.15, 1.15, 1.15, 1.15, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45],
                stack: 'combined_second',
                yaxisid: 'darkr',
                order: 2
            },
            {
                label: 'dark grey',
                backgroundcolor: 'rgb(80,80,80)',
                bordercolor: 'rgb(80,80,80)',
                data: [18, 43, 43, 0, 43, 43, 44, 44, 38, 38, 38, 38, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18],
                stack: 'combined_third',
                yaxisid: 'greydablue',
                order: 3
            }
        ]
    };

    const config = {
        type: 'line',
        data: data,
        options: {
            plugins: {
                title: {
                    display: true,
                    text: 'wdc history chart'
                },
                zoom: {
                    zoom: {
                        wheel: {
                            enabled: true,
                        },
                        pinch: {
                            enabled: true
                        },
                        drag: {
                            enabled: true
                        },
                        mode: 'x',
                    }
                }
            },

            scales: {
                y: {
                    stacked: true
                },
                darkr: {
                    position: 'right', // `axis` is determined by the position as `'y'`
                }
            }
        },
    };
    const mychart = new chart(
        document.getelementbyid('mychart'),
        config
    );
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div id="container" class="wdc-canvas-size">
</div>


Related Query

More Query from same tag