Chart.js to mix bar and line graphs and get the lines to fill the full column - Javascript Chart.js

Javascript examples for Chart.js:Bar Chart

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

Description

Chart.js to mix bar and line graphs and get the lines to fill the full column

Demo Code

ResultView the demo in separate window 

<html lang="en">
   <head> 
      <title>Chart.js - Combo Chart Line Extension Hack</title> 
   </head> 
   <body translate="no"> 
      <div id="canvas-holder" style="width:40%"> 
         <canvas id="myChart"></canvas> 
      </div> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> 
      <script>
      var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {//from www  .  ja  v a  2s .  com
  type: 'bar',
  data: {
    labels: ['dummy1', 'Jan 21st', 'Feb 21st', 'Mar 21st', 'Apr 21st', 'dummy2'],
    datasets: [
      {
        type: 'bar',
        label: 'A',
        data: [0, 10, 25, 18, 37, 0],
      },
      {
        type: 'line',
        label: 'B',
        data: [25, 25, 25, 25, 25, 25],
        fill: false,
        borderWidth: 1,
        borderColor: '#f00',
        borderDash: [5,4],
        lineTension: 0,
        steppedLine: true
      }
    ]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }],
      xAxes: [{
        ticks: {
          min: 'Jan 21st',
          max: 'Apr 21st',
        }
      }],
    }
  }
});
      </script>  
   </body>
</html>

Related Tutorials