How to create a simple JavaScript chart in html5 canvas?

Here we are creating a simple JavaScript line chart in html5 canvas by using chart.js. In this chart required X & Y axis data. Here we are using some sample data. You can replace with your own data.

You can download the latest version of Chart.js from the GitHub releases or use a Chart.js CDN.

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

Add a '<canvas>' element to your html page.

<canvas id="myChart" width="400" height="400"></canvas>

After that we should use the chart api.

The final code & demo is here

<!DOCTYPE html><html><head><script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js"></script></head><body><canvas id="myChart" width="400" height="400"></canvas><script>var ctx = document.getElementById("myChart").getContext('2d'); var myChart = new Chart(ctx, {     type: 'line',     data: {         labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],         datasets: [{             label: 'Add your label here',             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></html>

Demo

How to create a simple JavaScript chart in html5 canvas?

No comments:

Post a Comment

Try It Editor for HTML, CSS & JS

Blog Archive

Tags

Popular Posts

Contact Form