Vertical stacked bar chart with chart.js

问题:

Excellent and free library from chart.js. I'm transferring my charts from Google charts to chart.js, because I can use them offline and it seems more responsive to window's changes of size. Furthermore I realised that my viewers in China could not see my Google charts because Google services are blocked in China.

I've been reading the documentation regarding stacked vertical bar charts, but I can't figure out, how to make a chart like this. In all examples I saw for stacked bar charts, the number of items is the same for each bar.

Can I make only two vertical stacked datasets? It's because the right bar has more items than the left one. Or do I need n datasets, being n the number of items, of the bar which has more items?

Code

I want to group one dataset per (stacked) bar, but I can't.

var ctx = document.getElementById("barChart").getContext('2d');
    
var labels = ["standing costs", "running costs"];
var dataset = [ 
                {
                  type: 'bar',
                  label: ["cost1", "cost2", "cost3", "cost4"],
                  data: [1, 2, 1, 3],                       
                  stack: "standing costs",
                  backgroundColor: [
                      'navy',
                      'blue',
                      'aqua',
                      'teal'
                  ]
                },
                {
                  type: 'bar',
                  label: ["cost5", "cost6", "cost7", "cost8"],
                  data: [5, 1, 3, 0],                       
                  stack: "running costs",
                  backgroundColor: [                         
                      'green',
                      'lime',
                      'yellow',
                      'white'
                  ]
                }
            ];

var options = {
    scales: {
      xAxes: [{
        stacked: true
      }],
      yAxes: [{
        stacked: true
      }]
    }
};

var content = {
    type: 'bar',
    data: {
        labels: labels,
        datasets: dataset
    },
    options
};

new Chart(ctx, content);

@import url("https://cdnjs.cloudflare.com/ajax/libs/colors/1.0/colors.min.css");

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.0/Chart.bundle.min.js"></script>
<canvas id="barChart"></canvas>

回答1:

Quick Solution :

Vertical Stacked Bar Chart

var chart = new Chart(ctx, {
   type: 'bar',
   data: {
      labels: ['Standing costs', 'Running costs'], // responsible for how many bars are gonna show on the chart
      // create 12 datasets, since we have 12 items
      // data[0] = labels[0] (data for first bar - 'Standing costs') | data[1] = labels[1] (data for second bar - 'Running costs')
      // put 0, if there is no data for the particular bar
      datasets: [{
         label: 'Washing and cleaning',
         data: [0, 8],
         backgroundColor: '#22aa99'
      }, {
         label: 'Traffic tickets',
         data: [0, 2],
         backgroundColor: '#994499'
      }, {
         label: 'Tolls',
         data: [0, 1],
         backgroundColor: '#316395'
      }, {
         label: 'Parking',
         data: [5, 2],
         backgroundColor: '#b82e2e'
      }, {
         label: 'Car tax',
         data: [0, 1],
         backgroundColor: '#66aa00'
      }, {
         label: 'Repairs and improvements',
         data: [0, 2],
         backgroundColor: '#dd4477'
      }, {
         label: 'Maintenance',
         data: [6, 1],
         backgroundColor: '#0099c6'
      }, {
         label: 'Inspection',
         data: [0, 2],
         backgroundColor: '#990099'
      }, {
         label: 'Loan interest',
         data: [0, 3],
         backgroundColor: '#109618'
      }, {
         label: 'Depreciation of the vehicle',
         data: [0, 2],
         backgroundColor: '#109618'
      }, {
         label: 'Fuel',
         data: [0, 1],
         backgroundColor: '#dc3912'
      }, {
         label: 'Insurance and Breakdown cover',
         data: [4, 0],
         backgroundColor: '#3366cc'
      }]
   },
   options: {
      responsive: false,
      legend: {
         position: 'right' // place legend on the right side of chart
      },
      scales: {
         xAxes: [{
            stacked: true // this should be set to make the bars stacked
         }],
         yAxes: [{
            stacked: true // this also..
         }]
      }
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="ctx" width="700"></canvas>

_{apology for not giving explanation.}