CODEWITHSUNDEEP
javascriptchart.js
GammaGames
GammaGames

Reputation: 1820

Create stacked bar chart with a single dataset per stack

Say I have the following data points:

let points = [
    {key: "foo", value: 1},
    {key: "foo", value: 2},
    {key: "foo", value: 1},
    {key: "bar", value: 2},
    {key: "bar", value: 1}
];

I would like to create a chart that looks similar to the following:

  5 +-------------------------------+
    |                               |
  4 |      +-----+                  |
    |      |     |                  |
  3 |      +-----+      +-----+     |
    |      |     |      |     |     |
  2 |      |     |      +-----+     |
    |      |     |      |     |     |
  1 |      +-----+      |     |     |
    |      |     |      |     |     |
  0 +------+-----+------+-----+-----+
             foo          bar

The actual dataset has many different stacks, I have simplified it for this example. I have been able to accomplish the effect with the following, but every point is treated as its own dataset and I feel like there should be a cleaner and more efficient solution:

let datasets = [
    {label: "foo", stack: "foo", data: [1]},
    {label: "foo", stack: "foo", data: [2]},
    {label: "foo", stack: "foo", data: [1]},
    {label: "bar", stack: "bar", data: [2]},
    {label: "bar", stack: "bar", data: [1]}
];

Upvotes: 2

Views: 995

Answers (1)

uminder
uminder

Reputation: 26150

The values of each dataset are distributed to the various stacked bars. Therefore, the required number of datasets corresponds to the maximum number of values that can be contained in a stacked bar.

Accordingly, for your example you need the following three datasets:

[1, 2]
[2, 1]
[1, 0]


<html>

<head>
    <title>Stacked Bar Chart</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
    <style>
        canvas {
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
        }
    </style>
</head>

<body>
    <div style="width: 75%">
        <canvas id="canvas"></canvas>
    </div>
    <script>
        var data = {
            labels: ['foo', 'bar'],
            datasets: [{
                backgroundColor: 'red',
                data: [1, 2]
            }, {
                backgroundColor: 'green',
                data: [2, 1]
            }, {
                backgroundColor: 'blue',
                data: [1, 0]
            }]
        };
        window.onload = function() {
            var ctx = document.getElementById('canvas').getContext('2d');
            window.myBar = new Chart(ctx, {
                type: 'bar',
                data: data,
                options: {
                    title: {
                        display: true,
                        text: 'Stacked Bar Chart'
                    },
                    tooltips: {
                        mode: 'index',
                        intersect: false
                    },
                    legend: {
                        display: false
                    },
                    responsive: true,
                    scales: {
                        xAxes: [{
                            stacked: true,
                        }],
                        yAxes: [{
                            stacked: true
                        }]
                    }
                }
            });
        };
    </script>
</body>

</html>

Upvotes: 2

Related Questions