<!DOCTYPE html>
<html>
<head>
<title>World population</title>
<script src="Chart.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrapper">
<h1>World population over time</h1>
<h2>Number of people (in millions) living on earth, the last 500 years</h2>
<canvas id="myChart" width="1600" height="900"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Tokyo", "Mumbai", "Mexico City", "Shanghai", "Sao Paulo", "New York", "Karachi","Buenos Aires", "Delhi","Moscow"],
datasets: [{
label: 'Series 1', // Name the series
data: [500, 50, 2424, 14040, 14141, 4111, 4544, 47, 5555, 6811], // Specify the data values array
fill: false,
borderColor: '#2196f3', // Add custom color border (Line)
backgroundColor: '#2196f3', // Add custom color background (Points and Fill)
borderWidth: 1 // Specify bar border width
},
{
label: 'Series 2', // Name the series
data: [1288, 88942, 44545, 7588, 99, 242, 1417, 5504, 75, 457], // Specify the data values array
fill: false,
borderColor: '#4CAF50', // Add custom color border (Line)
backgroundColor: '#4CAF50', // Add custom color background (Points and Fill)
borderWidth: 1 // Specify bar border width
}]
},
options: {
responsive: true, // Instruct chart js to respond nicely.
maintainAspectRatio: false, // Add to prevent default behaviour of full-width/height
}
});
</script>
</div>
</body>
</html>