Updating Chartjs with custom code - Javascript Chart.js

Javascript examples for Chart.js:Chart Configuration

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

Description

Updating Chartjs with custom code

Demo Code

ResultView the demo in separate window 

<html lang="en">
   <head> 
      <title>Chart.js 2.5 negative values </title> 
   </head> 
   <body translate="no"> 
      <canvas id="myChart" width="500" height="100"></canvas> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script> 
      <script>
      var ctx = document.getElementById("myChart").getContext("2d");
var myBarChart = new Chart(ctx, {
   type: 'bar',/*  w w w  .j a  v  a  2s  .c  o m*/
   data: {
      labels: ["January", "February", "March", "April", "May", "June", "July", "August"],
      datasets: [
         {
            label: "My First dataset",
            backgroundColor: "rgba(220,220,220,0.5)",
            borderColor: "rgba(220,220,220,0.8)",
            hoverBackgroundColor: "rgba(220,220,220,0.75)",
            hoverBorderColor: "rgba(220,220,220,1)",
        borderWidth: 5,
            data: [65, 59, 80, 81, 56, 55, 40, -30]
         },
         {
            label: "My Second dataset",
            backgroundColor: "rgba(151,187,205,0.5)",
            borderColor: "rgba(151,187,205,0.8)",
            hoverBackgroundColor: "rgba(151,187,205,0.75)",
            hoverBorderColor: "rgba(151,187,205,1)",
        borderWidth: 5,
            data: [28, 48, 40, 19, 86, 27, 90, -42]
         }
      ]
   },
   options: {
      scales: {
         yAxes: [{
            display: true,
            ticks: {
               beginAtZero: false,
               min: -50
            }
         }]
      }
   }
});
      //# sourceURL=pen.js
    
      </script>  
   </body>
</html>

Related Tutorials