Chart.js


Reading Time: < 1 minute

Chart.js is an open source JavaScript Library for designers and developers to create responsive and animated chart. It has 8 chart types so you can visualize your data and they are easily customizable. A simple JavaScript that renders in HTML5 canvas flawlessly across all modern browsers (IE11+). 

Create all kinds of chart; bar charts, line charts, area charts and pie charts. The kinds of chart to create is endless. If you can visualize it then you can create it chart.js.

Creating a Chart

It’s easy to get started with Chart.js. All that’s required is the script included in your page along with a single <canvas> node to render the chart.

Add ‹canvas id=”myChart” width=”400″ height=”400″›‹/canvas› within your body tag, where you want the chart to display.

Add the following script to render your chart;

‹script›
var ctx = document.getElementById(‘myChart’).getContext(‘2d’);
var myChart = new Chart(ctx, {
type: ‘bar’,
data: {
labels: [‘Red’, ‘Blue’, ‘Yellow’, ‘Green’, ‘Purple’, ‘Orange’],
datasets: [{
label: ‘# of Votes’,
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [ ‘rgba(255, 99, 132, 0.2)’, ‘rgba(54, 162, 235, 0.2)’, ‘rgba(255, 206, 86, 0.2)’, ‘rgba(75, 192, 192, 0.2)’, ‘rgba(153, 102, 255, 0.2)’, ‘rgba(255, 159, 64, 0.2)’ ],
borderColor: [ ‘rgba(255, 99, 132, 1)’, ‘rgba(54, 162, 235, 1)’, ‘rgba(255, 206, 86, 1)’, ‘rgba(75, 192, 192, 1)’, ‘rgba(153, 102, 255, 1)’, ‘rgba(255, 159, 64, 1)’ ],
borderWidth: 1 }] },
options: { scales: { yAxes: [{ ticks: { beginAtZero: true } }] } }
});
‹/script›

Leave a Reply

Your email address will not be published. Required fields are marked *

We curate the best and creative websites designed and developed in Africa; Ghana, Kenya, Nigeria, South Africa, Uganda, Egypt, Morocco, Tanzania.

54-webs.com is a website inspiration gallery from different industries in the 54 countries in Africa useful for website creation. We curate the best website designs built and developed in Africa. Our goal is to integrate African designers and developers in order to interact, inspire, impart knowledge and share innovative and new technology useful for website design and development.