[Chartjs]-Can Chartjs create grouped charts programmatically?

by

0👍

✅

An alternative configuration, that might be more appropriate for your data, is to have a
separate y axis for each system ("PR1" and "EC1" in the example). This way, each axis/system will only contain data for its servers; then those axes will be stacked (see this docs example) creating the appearance of a single axis.

A starting configuration based on that idea and the OP example data could be:

const data = {
    datasets: [
        {
            label: "pr1app1",
            backgroundColor: "blue",
            barPercentage: 1,
            categoryPercentage: 0.9,
            //barThickness: 20,
            data: [3],
            yAxisID: 'y2'
        },
        {
            label: "pr1app2",
            backgroundColor: "red",
            barPercentage: 1,
            categoryPercentage: 0.9,
            //barThickness: 20,
            data: [4],
            yAxisID: 'y2'
        },
        {
            label: "pr1app3",
            backgroundColor: "green",
            barPercentage: 1,
            categoryPercentage: 0.9,
            //barThickness: 20,
            data: [7],
            yAxisID: 'y2'
        },
        {
            label: "ec1app1",
            backgroundColor: "yellow",
            barPercentage: 0.3,
            //barThickness: 20,
            data: [15],
            yAxisID: 'y'
        },
    ],
};

const config = {
    type: 'bar',
    data: data,
    options: {
        responsive: true,
        indexAxis: 'y',
        scales: {
            y: {
                stack: 'systems',
                type: 'category',
                labels: ["EC1"]
            },
            y2: {
                type: 'category',
                stack: 'systems',
                labels: ["PR1"]
            }
            
        },
        plugins: {
            legend: {
                position: 'top',
            },
            title: {
                display: true,
                text: 'Chart.js Line Chart'
            }
        }
    },
};

new Chart('chart1', config);
<div style="height: 240px">
    <canvas id="chart1">
    </canvas>
 </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.js" integrity="sha512-6HrPqAvK+lZElIZ4mZ64fyxIBTsaX5zAFZg2V/2WT+iKPrFzTzvx6QAsLW2OaLwobhMYBog/+bvmIEEGXi0p1w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Leave a comment