Very simple chart

How to create a chart

This is an example of a very simple chart using chart.js. A link to chart.js can be found here on the https://www.chartjs.org/ webpage.

In simple terms the user only has to add the following 3 components to produce a chart:

• Create a canvas
• Include Chart.js
• Add a script with the chart info
  

Create a canvas

<div class="chart-container">
	<canvas id="myChart"></canvas>
</div>

Note: The canvas is wrapped in a div container.

Include chart.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>

Add a script with the chart info

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'line',

    // The data for our dataset
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
            label: "My First dataset",
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 10, 5, 2, 20, 30, 45],
        }]
    },

    // Configuration options go here
    options: {}
});

Remember the JavaScript goes between the <script></script> tags.

It is that easy.

We now just add the code and edit as desired to get the chart. Here is an example of the output above.

The chart is here:

---

Chart types

The user can change the chart type by simply editing the type keyword.

// The type of chart we want to create
    type: 'line' 

// other types are 'bar', 'radar', 'pie', 'polarArea', 'bubble', 'scatter'

---

Here is the same chart displayed as a bar chart by only changing the type keyword from line to bar and renaming the canvas id to a different name.

The chart is here:

---

A working example of the chart (which is interactive), used to display a live portfolio, can be found here on the live portfolio page.

This brings the reader to the end of the section. If you have any questions or comments, please feel free to contact us or comment in the box below.

---