score:33

Accepted answer

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.

score:-1

updated for v3

<div style="height: 500px">
<canvas id="chart_1" ></canvas>
</div>
<script>

chart = new chart(document.getelementbyid('chart_1').getcontext('2d'), {
    type: 'bar',
    data: {
        labels: ["one", "two", "three"],
        datasets: [{
                label: 'blue',
                data: [100, 110, 120],
                backgroundcolor: 'blue',
            },
            {
                label: 'red',
                data: [30, 20, 10],
                backgroundcolor: 'red',
            },
        ]
    },
    options: {
        plugins: {
            title: {
                display: true,
                text: 'example',
                font: {
                    size: 14
                }
            },
        },
        responsive: true,
        maintainaspectratio: false,
        scales: {
            x: {
                stacked: true,
            },
            y: {
                stacked: true
            }
        }
    }
});
</script>

Related Query

More Query from same tag