Chartjs-Move y-Axis and hide in Chart.JS V3

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>

Leave a comment