Online Tutorials, Videos and Demo for JavaScript

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

Here we are creating a simple JavaScript line chart in div 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.

1) 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 '<div>' element to your html page.

<div class="Chart">

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><div class="container">
 </div>
<script>  function createConfig() {    return {     type: 'line',     data: {      labels: ["01/06", "02/06", "03/06", "04/06", "05/06", "06/06", "07/06"],      datasets: [{       label: "Page Views",       borderColor: 'rgba(137, 188, 1, 1)',       backgroundColor: 'rgba(137, 188, 1, 0.1)',       data: [25, 130, 45, 150, 120,100,150],       fill: true,       pointRadius: 5,       pointHoverRadius: 7,       pointBorderWidth:2,       pointBackgroundColor: 'rgba(137, 188, 1, 1)'      }]     },     options: {      responsive: true,      tooltips: {       position: 'nearest',       mode: 'nearest',       intersect: false,       yPadding: 10,       xPadding: 10,       caretSize: 8             },     }    };   }    window.onload = function() {    var container = document.querySelector('.container');    var div = document.createElement('div');    div.classList.add('chart-container');     var canvas = document.createElement('canvas');    div.appendChild(canvas);    container.appendChild(div);     var ctx = canvas.getContext('2d');    var config = createConfig();    new Chart(ctx, config);    console.log(config);   };  </script></html>

Demo

How to create a simple JavaScript chart in html5 canvas?

How to create a simple JavaScript chart in div?

Popular Posts

Tags

Contact Form