Planet OS, charts type

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title></title>
    <script type='text/javascript' src="http://d3js.org/d3.v3.min.js"></script>
    <script type='text/javascript' src="http://christopheviau.com/libraries/dadavis.js"></script>
    <link href="http://planet-os.github.io/cirrusjs/assets/styles.css" rel="stylesheet"/>
    <style>
        .container {
            width: 760px;
            height: 200px;
            margin-top: 10px;
            /* border: 1px solid #eee; */
            float: left;
            font-size: 9px;
            white-space: nowrap;
        }
        
        .hover-line {
            background-color: black;
        }
        
        .tooltip {
            background-color: white;
            border: 1px solid white;
            opacity: 1;
            margin-left: 2px;
            padding: 3px;
            border-radius: 0px 10px 10px 10px;
        }
        
        div {
          line-height: 1em!important;
        }
        
        .label {
          margin-top: 3px;
        }
        
        *, svg * {
          -webkit-backface-visibility: hidden;
   	      backface-visibility: hidden;
        }
        
        .axis-y .label {
          margin-top: 0px;
        }
        
        .chart .title {
          font-size: 1.5em;
          font-family: AvenirLT-Heavy, Arial, sans-serif;
        }
    </style>
</head>
<body>

<div class="container" id="chart1"></div>
<div class="container" id="chart2"></div>
<div class="container" id="chart3"></div>

<script>
    
var labelFormatter = function(d, i){
    return d3.time.format('%e<br>%b')(new Date(d));
};

var colorList = ['#2882be ', '#05a5de ', '#81dafb ', '#e19c5f ', '#fdcda3 ', '#fff0c1 ', '#dc751f ', '#904b0f']

var tickSize = 7;
var minorTickSize = 5;
var margin = {top: 20, right: 20, bottom: 60, left: 50};

var config = {
    container: '#chart1',
    type: 'line',
    subtype: 'area',
    chartTitle: 'Area chart',
    labelFormatterX: labelFormatter,
    colorList: colorList,
    tickSize: tickSize,
    minorTickSize: minorTickSize,
    margin: margin
};
var data = dadavis.utils.getRandomTimeData(100, 5);
var ds = dadavis.init(config).render(data);

var config = {
    container: '#chart2',
    type: 'line',
    subtype: 'stacked',
    chartTitle: 'Stacked line chart',
    labelFormatterX: labelFormatter,
    colorList: colorList,
    tickSize: tickSize,
    minorTickSize: minorTickSize,
    margin: margin
};
var data = dadavis.utils.getRandomTimeData(100, 5);
var ds = dadavis.init(config).render(data);

var config = {
    container: '#chart3',
    type: 'bar',
    subtype: 'stacked',
    chartTitle: 'Stacked bar chart',
    labelFormatterX: labelFormatter,
    colorList: colorList,
    tickSize: tickSize,
    minorTickSize: minorTickSize,
    margin: margin
};
var data = dadavis.utils.getRandomTimeData(100, 5);
var ds = dadavis.init(config).render(data);

</script>
</body>
</html>