Test Chart 3

index.html

<canvas id="myChart" width="400" height="400"></canvas>

script.js

var ctx = document.getElementById('myChart')


		var barChartData = {
			labels: ['1', '2', '3', '4', '5', '6', '7'],
			datasets: [
        {
          label: 'Dataset 1',
          backgroundColor: 'chocolate',
          data: [
            20,
            20,
            20,
            20,
            20,
            20,
            20
          ]
        },
        {
          label: 'Dataset 2',
          backgroundColor: 'cadetblue',
          data: [
            20,
            20,
            20,
            20,
            20,
            20,
            12
          ]
        },
        {
          label: 'Dataset 3',
          backgroundColor: 'sandybrown',
          data: [
            10,
            5,
            23,
            10,
            26,
            20,
          ]
        }
      ]

		};
			myChart = new Chart(ctx, {
				type: 'horizontalBar',
				data: barChartData,
				options: {
            title: {
              display: true,
              text: 'Chart.js Bar Chart - Stacked'
            },
            //responsive: true,
            scales: {
              xAxes: [{
                stacked: true,
              }],
              yAxes: [{
                stacked: true,
                ticks: {
                  max: 100
                }
              }]
            }
				}
			});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"></script>

test-chart-3.markdown

Test Chart 3

A Pen by takayuki_kimura on CodePen.

License.