Chart.js Bar and Line chart combined - Javascript Chart.js

Javascript examples for Chart.js:Bar Chart

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

Description

Chart.js Bar and Line chart combined

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>testBarLineOverlay</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){//from  www  . java  2s .c om
var testChart = document.getElementById("test");
var chart = new Chart(testChart, {
  type:    'bar',
  data:    {
    labels:   [11,2,13,4,15,6,7,8,9,10,11,12,13,14,15],
    datasets: [
      {
        type:                      'line',
        fill:                      false,
        label:                     'testline',
        tension:                    0,
        backgroundColor:           "rgba(0,0,0,0.1)",
        borderColor:               "rgba(0,0,0,1)",
        borderWidth:                3,
        pointRadius:                0,
        pointHoverRadius:           0,
        pointHitRadius:             0,
        hitRadius:                  0,
        pointBorderWidth:           0,
        pointBorderColor:           "rgba(255,255,255,0)",
        data:                       [2800,2680,2565,2450,2335,2220,2105,1990,1875,1760,1645,1530,1415,1300]
      },
      {
        type:                      'bar',
        label:                     "testbar",
        fill:                      false,
        lineTension:               0,
        backgroundColor:           "rgba(75,192,192,0.4)",
        borderColor:               "rgba(75,192,192,1)",
        pointHitRadius:             0,
        pointRadius:                0,
        pointBorderWidth:           0,
        pointBorderColor:           "rgba(0,0,0,0)",
        showLines:                  false,
        data:                        [3650,3420,3350,3070,3030,2850,2780,2700,2600,2400,2400,2400,2400]
      },
    ]
  }
 });
    }

      </script> 
   </head> 
   <body> 
      <div> 
         <canvas id="test" width="200" height="125"></canvas> 
      </div>  
   </body>
</html>

Related Tutorials