How to create a simple JavaScript chart in div?

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 div?

No comments:

Post a Comment

Popular Posts

Tags

Contact Form