chart.js

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


This modified text is an extract of the original Stack Overflow Documentation created by the contributors and released under CC BY-SA 3.0 This website is not affiliated with Stack Overflow