Javascript-JQuery-Charting/HTMLPage23.html at master · srijat31/Javascript-JQuery-Charting · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!--
  Examples to introduce charting using chart.js

  Author: Manish Agrawal

  Many examples use or are inspired by
  http://tobiasahlin.com/blog/chartjs-charts-to-get-you-started/
-->

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta charset="utf-8" />
  <title>Chart.js examples</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js"></script>
</head>
<body>
  <h1>Bar chart example</h1>

  <canvas id="barchartexample" width="300" height="150"></canvas>

  <script>
    new Chart(document.getElementById("barchartexample"), {
      type: 'bar',
      data: {
        labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
        datasets: [
          {
            label: "Population (millions)",
            backgroundColor: ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850"],
            data: [2478, 5267, 734, 784, 433]
          }
        ]
      },
      options: {
        legend: { display: false },
        title: {
          display: true,
          text: 'Predicted world population (millions) in 2050'
        }
      }
    });
  </script>
</body>
</html>