Getting started with chart.js

Remarks#

Chart.js is a simple yet flexible open source JavaScript charting library for designers & developers.

For version information check out their GitHub

Installation or Setup

Chart.js can be included in several different ways:

NPM

Run the following command on your NPM project directory

npm install chart.js --save

CDN

Include a script tag in your HTML linking to the chart.js CDN

<html>
   <body>    
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.min.js"></script>
   </body>
</html>

Latest version can be found at cdnjs.com/libraries/Chart.js.

Local Copy

A local copy can also be hosted on your server. You can get the lasted version from their GitHub.

<html>
   <body>    
      <script type="text/javascript" src="/Path/To/Chart.bundle.min.js"></script>
   </body>
</html>

For more information about getting chart.js installed see www.chartjs.org/docs/.

Minimal Chart 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).