Charts js with configuration - Javascript Chart.js

Javascript examples for Chart.js:Chart Configuration

  1. HOME
  2. Javascript
  3. Chart.js
  4. Chart Configuration

Description

Charts js with configuration

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta charset="utf-8"> 
      <title>Chart.js demo</title> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script> 
   </head> 
   <body> 
      <h1>Chart.js Sample</h1> 
      <canvas id="myChart" width="600" height="400"></canvas> 
      <script>
    var ctx = document.getElementById("myChart").getContext("2d");
    var chart = new Chart(ctx, {/*  w  w w .  ja  va2  s  . co m*/
      type: "line",
      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]
          }
        ]
      },
      options: {
        responsive:false,
        maintainAspectRatio: false
      }
    });
  
      </script>  
   </body>
</html>

Related Tutorials