CodePen Embed

Live

​x
 
<head>
<!-- Load c3.css -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.7/c3.min.css" rel="stylesheet">
​
<!-- Load d3.js and c3.js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
​
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.7/c3.js" charset="utf-8"></script>
</head>
<body>
  <div id="charts" class="container">
    <div id="chart1" class="chart"></div>
    <div id="chart2" class="chart"></div>
    <div id="chart3" class="chart"></div>
    <div id="chart4" class="chart"></div>
  </div>
</body>

Live

xxxxxxxxxx
 
.container {
  display: grid;
  grid-template-columns: 40vw 40vw;
  grid-template-rows: auto;
  width: 80vw;
  background-color: whitesmoke;
  border: solid 1px grey;
  margin: 10vh 5vw;
}
.chart {
  height: 250px;
  background-color: white;
  margin: 10px;
  border: solid 1px grey;
}

Live

xxxxxxxxxx
 
// Chart 1
(function() {
  var chart = c3.generate({
      bindto: '#chart1',
      data: {
          columns: [
              ['data1', 31, 200, 100, 420, 150, 250],
              ['data2', 130, 100, 140, 200, 150, 40]
          ],
          type: 'bar'
      },
      bar: {
          width: {
              ratio: 0.5 // this makes bar width 50% of length between ticks
          }
          // or
          //width: 100 // this makes bar width 100px
      }
  });
  setTimeout(function () {
    chart.load({
        columns: [
            ['data3', 130, 150, 200, 300, 200, 100, 300]
        ]
    });
}, 1000);
  
})();
​
​
// Chart 2
(function(){
  var chart = c3.generate({
      bindto: '#chart2',
      data: {
        columns: [
          ['data1', 30, 200, 100, 400, 150, 250],
          ['data2', 50, 20, 10, 40, 15, 25]
        ],
        axes: {
          data2: 'y2' // ADD
        }
      },
      axis: {
        y2: {
          show: true // ADD
        }
      }
  });
})();
​
// Chart 3
(function() {
    var chart = c3.generate({
      bindto: '#chart3',
      data: {
        columns: [
          ['data1', 30, 200, 100, 400, 150, 250],
          ['data2', 50, 20, 10, 40, 15, 25]
        ],
        axes: {
          data2: 'y2'
        },
        types: {
          data2: 'bar'
        }
      },
      axis: {
        y: {
          label: {
            text: 'Y Label',
            position: 'outer-middle'
          },
          tick: {
            format: d3.format("$,") // ADD
          }
        },
        y2: {
          show: true,
          label: {
            text: 'Y2 Label',
            position: 'outer-middle'
          }
        }
      }
  });
})();
​
// Chart 4
(function(){
  var chart = c3.generate({
    bindto: '#chart4',
      data: {
          columns: [
              ['data1', 30, 20, 50, 40, 60, 50],
              ['data2', 200, 130, 90, 240, 130, 220],
              ['data3', 300, 200, 160, 400, 250, 250],
              ['data4', 200, 130, 90, 240, 130, 220],
              ['data5', 130, 120, 150, 140, 160, 150],
              ['data6', 90, 70, 20, 50, 60, 120],
          ],
          type: 'bar',
          types: {
              data3: 'spline',
              data4: 'line',
              data6: 'area',
          },
          groups: [
              ['data1','data2']
          ]
      }
  });
​
​
})();

This Pen is owned by Envato Tuts+ on CodePen. It is a fork of this Pen.

See more by @tutsplus on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.