chart.js Getting started with chart.js Minimal Chart Example


Example

Depending on the version of Chart.JS you are using (the current one being 2.X), the syntax is different to create a minimal example of a bar chart (JSFiddle Demo for 2.X).

Chart.js 2.X

<html>
    <body>
        <canvas id="myChart" width="400" height="400"></canvas>
        <script>
              var ctx = document.getElementById("myChart");
              var myChart = new Chart(ctx, {
                  type: 'bar',
                  data: {
                      labels: ["Group 1", "Group 2", "Group 3"],
                      datasets: [{
                          label: 'Groups',
                          data: [12, 19, 3]
                      }]
                  }
              });
        </script>
    </body>
</html>

A slightly more advanced version of this can be found in the chart.js documentation (JSFiddle Demo).


Chart.js 1.X

However, if you need to use the legacy version, first take a look at the documentation on Github.

Now here is a minimal example of a bar chart (JSFiddle Demo) :

<html>
    <body>
        <canvas id="myChart" width="400" height="400"></canvas>
        <script>
            var ctx = document.getElementById("myChart");
            var myChart= new Chart(ctx).Bar({
                labels: ["Group 1", "Group 2", "Group 3"],
                datasets: [
                {
                    label: "Group",
                    data: [12, 19, 3]
                }]
            });
        </script>
    </body>
</html>

A slightly more advanced version of this can be found in the Github documentation (JSFiddle Demo).