ChartJS unique datasets per label

Question

I'm sitting here on a problem and I can't find a solution for it. I'm trying to create a stacked bar graph with chartJS. Nothing complicated to that point.

My problem: Every bar on my chart should have unique values / labels. Those shouldn't be repeated on the next bar... Kinda complicated to explain, thats why I draw a picture:

As you see, every bar should have its unique data. Normally, if you have "Apples" on the first bar with some value, "apples" will also apear on the second bar with some other values... But I don't want that. I really want separated bars, not related to each other in one graph.

Is there a way to achieve this?

I'm trying since like 48 hours and really tried everything. tried with multidimensional arrays, "stacked" options, multiple datasets but nothing seems to work. Is it even possible to achieve this with chartJS?

I'll post my current code (be aware that this is just one version of like 50 different things I tried... but I thought it may be good to post the simple code I have at the moment, since the other fails won't really help anything...)

Here's the code I'm currently trying to modify:

var ctx = document.getElementById("chart1").getContext('2d');
var labels = ["Data1", "Data2", "Data3"];
var data = {
    "labels": labels,
    "datasets": [{
        "label": "t1",
        "xAxisID": "x-axis-0",
        "data": [29, 19, 26],
        "backgroundColor": 'blue'
    },
    {
        "label": "t1_SUM",
        "xAxisID": "x-axis-0",
        "data": [32, 29, 36],
        "backgroundColor": 'red'
    }]
}

new Chart(ctx, {
    type: "bar",
    data: data,
    options: {
        scales: {
            xAxes: [{
                "stacked": true,
                "id": "x-axis-0"
            },
            {
                "stacked": true,
                "id": "x-axis-1",
            }]
        }
    }
});

Really appreciate any help!

Thanks.

HoangHieu · Accepted Answer · 2018-09-10T09:50:10.083

Source: https://www.chartjs.org/samples/latest/charts/bar/stacked.html

You can define each column as 1 or more dataset. Ex:

datasets: [{
                label: 'Dataset 1',
                backgroundColor: window.chartColors.red,
                data: [
                    randomScalingFactor(),
                    null,
                    null,
                    null,
                    null,
                    null,
                    null
                ]
            }, {
                label: 'Dataset 2',
                backgroundColor: window.chartColors.blue,
                data: [
                    null,
                    randomScalingFactor(),
                    null,
                    null,
                    null,
                    null,
                    null
                ]
            }]

var barChartData = {
   labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
   datasets: [{
    label: 'Dataset 1',
    backgroundColor: window.chartColors.red,
    data: [
     randomScalingFactor(),
     null,
     null,
     null,
     null,
     null,
     null
    ]
   }, {
    label: 'Dataset 2',
    backgroundColor: window.chartColors.blue,
    data: [
     randomScalingFactor(),
     null,
     null,
     null,
     null,
     null,
     null
    ]
   }, {
    label: 'Dataset 3',
    backgroundColor: window.chartColors.green,
    data: [
     null,
     randomScalingFactor(),
     null,
     null,
     null,
     null,
     null
    ]
   }, {
    label: 'Dataset 4',
    backgroundColor: window.chartColors.green,
    data: [
     null,
     null,
     randomScalingFactor(),
     null,
     null,
     null,
     null
    ]
   }]

  };
   var ctx = document.getElementById('canvas').getContext('2d');
   window.myBar = new Chart(ctx, {
    type: 'bar',
    data: barChartData,
    options: {
     title: {
      display: true,
      text: 'Chart.js Bar Chart - Stacked'
     },
     tooltips: {
      callbacks: {
                label: function(tooltipItem, data) {
                    var label = data.datasets[tooltipItem.datasetIndex].label || '';

                    if (label) {
                        label += ': ';
                    }
                    label += Math.round(tooltipItem.yLabel * 100) / 100;
                    return label;
                }
            }
     },
     responsive: true,
     scales: {
      xAxes: [{
       stacked: true,
      }],
      yAxes: [{
       stacked: true
      }]
     }
    }
   });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script src="https://www.chartjs.org/samples/latest/utils.js"></script>
<div style="width: 100%">
  <canvas id="canvas"></canvas>
</div>

You must add attribution to the [original source of the code](https://www.chartjs.org/samples/latest/charts/bar/stacked.html). — timclutton, Sep 10 '18 at 09:45
@HoangHieu Thank you for your answer, that solved my problem. Upvoted & accepted. Think timclutton downvoted due to the lack of source, may he'll remove his downvote now you added it. :) — Twinfriends, Sep 10 '18 at 09:51
A knee-jerk reaction to seeing apparent plagiarism. As you've updated your post I've retracted my downvote. Thank you for editing your answer. — timclutton, Sep 10 '18 at 09:52

ChartJS unique datasets per label

1 Answers1