<h1>Number of alcohol related deaths by age between 2007 and 2017</h1>
<div class="wrapper">
<canvas id="myChart4"></canvas>
</div>
<link href="https://fonts.googleapis.com/css?family=Amatic+SC:700&display=swap" rel="stylesheet"> 
body, html{
  background: NONE;
  padding-top: 10px;
}

.wrapper{
  width:60%;
  display:block;
  overflow:hidden;
  margin:0 auto;
  padding: 60px 50px;
  background:#fff;
  border-radius:4px;
}

canvas{
  background:#fff;
  height:400px;
}

h1{
  font-family: Amatic SC, cursive;
  color: #2c2971;
  margin-top:50px;
  font-weight:200;
  text-align: center;
  display: block;
  text-decoration: none;
}
var ctx = document.getElementById("myChart4").getContext('2d');
var myChart = new Chart(ctx, {
	type: 'bar',
	data: {
		labels: [" 2007","2008","2009","2010","2011","2012","2013","2014","2015", "2016", "2017"],
		datasets: [{
			label: '> 25',
			backgroundColor: "#5B59A2",
			data: [1, 0, 0, 0, 0, 1, 0, 0, 1, 1, 0],
		}, {
			label: '25-34',
			backgroundColor: "#FCEA84",
			data: [9, 6, 8, 12 ,6, 5, 7, 4, 6, 10, 10],
		}, {
			label: '35-44',
			backgroundColor: "#B4ADD6",
			data: [62,33, 43, 33, 52,51, 27, 28, 42, 31, 39],
		}, {
			label: '45-54',
			backgroundColor: "#F2CE16",
			data: [77, 94, 92, 102, 73, 77, 76, 76, 104,90 , 98],
				}, {
			label: '55-64',
			backgroundColor: "#F26B1D",
			data: [56, 69, 71, 76,62,75, 64, 73, 79, 95, 97],
			}, {
			label: '65-74',
			backgroundColor: "#D91A83",
			data: [25, 34, 27, 30, 27, 30, 30, 29, 40, 47, 44],
						}, {
			label: '75+',
			backgroundColor: "#F08FBC",
			data: [8, 7, 8, 7, 8, 5, 2, 9, 10, 15, 15],
		}],
	},
options: {
    tooltips: {
      displayColors: true,
      callbacks:{
        mode: 'x',
      },
    },
    scales: {
      xAxes: [{
        stacked: true,
        gridLines: {
          display: false,
        }
      }],
      yAxes: [{
        stacked: true,
        ticks: {
          beginAtZero: true,
        },
        type: 'linear',
      }]
    },
		responsive: true,
		maintainAspectRatio: false,
		legend: { position: 'bottom' },
	}
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js