Chart.js to combine stacked bar chart and 2 unstacked lines - Javascript Chart.js

Javascript examples for Chart.js:Bar Chart

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

Description

Chart.js to combine stacked bar chart and 2 unstacked lines

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>chart.js 2.1</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.0/Chart.bundle.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){/*from w  w  w  .ja  v  a 2s  .  c  om*/
         Chart.defaults.global.elements.line.fill = false;
         var barChartData = {
           labels: ['2016', '2017', '2018', '2019'],
           datasets: [{
             type: 'bar',
             label: 'a',
             yAxisID: "y-axis-0",
             backgroundColor: "rgba(217,83,79,0.75)",
             data: [1000, 2000, 4000, 5000]
           }, {
             type: 'bar',
             label: 'b',
             yAxisID: "y-axis-0",
             backgroundColor: "rgba(92,184,92,0.75)",
             data: [500, 600, 700, 800]
           }, {
             type: 'line',
             label: 'c',
             yAxisID: "y-axis-0",
             backgroundColor: "rgba(51,51,51,0.5)",
             data: [1500, 2600, 4700, 5800]
           }, {
             type: 'line',
             label: 'd',
             yAxisID: "y-axis-1",
             backgroundColor: "rgba(151,187,205,0.5)",
             data: [5000, 3000, 1000, 0]
           }]
         };
         var ctx = document.getElementById("chart").getContext("2d");
         var ch = new Chart(ctx, {
           type: 'bar',
           data: barChartData,
           options: {
             title: {
               display: true,
               text: "Chart.js Bar Chart - Stacked"
             },
             tooltips: {
               mode: 'label'
             },
             responsive: true,
             scales: {
               xAxes: [{
                 stacked: true
               }],
               yAxes: [{
                 stacked: true,
                 position: "left",
                 id: "y-axis-0",
                 ticks: {
                   beginAtZero: true,
                   suggestedMax: 5800
                 }
               }, {
                 display: false,
                 stacked: false,
                 position: "right",
                 id: "y-axis-1",
                 ticks: {
                   beginAtZero: true,
                   suggestedMax: 5800
                 }
               }]
             }
           }
         });
    }

      </script> 
   </head> 
   <body> 
      <canvas id="chart"></canvas>  
   </body>
</html>

Related Tutorials