Chart.js update bars of a bar-chart - Javascript Chart.js

Javascript examples for Chart.js:Bar Chart

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

Description

Chart.js update bars of a bar-chart

Demo Code

ResultView the demo in separate window 

<html lang="en">
   <head> 
      <title>Chart.js Add Remove Adjust Data</title> 
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
      <style>

body{/*w  w w  . j a  v a  2s  . c  om*/
   background-color: black;
}
#barChart{
   background-color:rgba(255,255,255,0.1);
   border-radius: 6px;
}
.btn{
   color:black;
   margin-left:10px;
}


      </style> 
   </head> 
   <body translate="no"> 
      <div class="container"> 
         <br> 
         <div class="row"> 
            <div class="col-md-1"></div> 
            <div class="col-md-10"> 
               <canvas id="barChart"></canvas> 
            </div> 
            <div class="col-md-1"></div> 
         </div> 
         <br> 
         <div class="row"> 
            <div class="col-md-1"></div> 
            <div class="col-md-10">
               <button type="button" class="btn btn-success btn-md" onclick="addData();">Add Data </button>
               <button type="button" class="btn btn-success btn-md" onclick="adjust2016();">Adjust 2016 </button>
            </div> 
            <div class="col-md-1"></div> 
         </div> 
      </div> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script> 
      <script>
var canvas = document.getElementById("barChart");
var ctx = canvas.getContext('2d');
var chartType = 'bar';
var myBarChart;
Chart.defaults.global.defaultFontColor = 'grey';
Chart.defaults.global.defaultFontSize = 16;
var data = {
  labels: ["2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014", "2015", "2016"],
  datasets: [{
    label: "UFO Sightings",
    fill: true,
    lineTension: 0.1,
    backgroundColor: "rgba(0,255,0,0.4)",
    borderColor: "green", // The main line color
    borderCapStyle: 'square',
    pointBorderColor: "white",
    pointBackgroundColor: "green",
    pointBorderWidth: 1,
    pointHoverRadius: 8,
    pointHoverBackgroundColor: "yellow",
    pointHoverBorderColor: "green",
    pointHoverBorderWidth: 2,
    pointRadius: 4,
    pointHitRadius: 10,
    data: [10, 13, 17, 12, 30, 47, 60, 120, 230, 300, 310, 400],
    spanGaps: true,
  }]
};
var options = {
  scales: {
    yAxes: [{
      ticks: {
        beginAtZero: true
      }
    }]
  },
  title: {
    fontSize: 18,
    display: true,
    text: 'I want to believe !',
    position: 'bottom'
  }
};
init();
function init() {
  myBarChart = new Chart(ctx, {
    type: chartType,
    data: data,
    options: options
  });
}
    function addData() {
      myBarChart.data.labels[12] ="2017";
      myBarChart.data.labels[13] ="2018";
      myBarChart.data.datasets[0].data[12] = 500;
      myBarChart.data.datasets[0].data[13] = 600;
      myBarChart.update();
    }
    function adjust2016() {
      myBarChart.data.datasets[0].data[11] = 300;
      myBarChart.update();
    }
      </script>  
   </body>
</html>

Related Tutorials