Dynamic Changing of Chart Type from Line chart to Bar chart - Javascript Chart.js

Javascript examples for Chart.js:Bar Chart

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

Description

Dynamic Changing of Chart Type from Line chart to Bar chart

Demo Code

ResultView the demo in separate window 

<html lang="en">
   <head> 
      <style>

.myChartDiv {/*from  w  w  w .j  ava  2 s.  co m*/
   max-width: 600px;
   max-height: 400px;
}


      </style> 
   </head> 
   <body translate="no">   
      <div class="myChartDiv"> 
         <canvas id="myChart" width="600" height="400"></canvas> 
      </div> 
      <button id="changeToLine">Change to Line Chart</button>   
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.min.js"></script> 
      <script>
      var chartData = {
  labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
  datasets: [{
    label: '# of Votes',
    data: [12, 19, 3, 5, 2, 3]
  }]
};
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'bar',
  data: chartData,
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});
document.getElementById('changeToLine').onclick = function() {
  myChart.destroy();
  myChart = new Chart(ctx, {
    type: 'line',
    data: chartData
  });
};
      //# sourceURL=pen.js
    
      </script>  
   </body>
</html>

Related Tutorials