Charts

<div class="card">
        <div class="card-header">
            <h3 class="card-title">Chart name</h3>
        </div>
        <div class="card-body">
            <div id="chart-wrapper" style="height: 16rem"></div>
        </div>
        </div>

        <script>        
            var chart = c3.generate({
            bindto: '#chart-wrapper', // id of chart wrapper
            data: {
                columns: [
                    // each columns data
                ['data1', 7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
                ['data2', 3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
                ],
                labels: true,
                type: 'line', // default type of chart
                colors: { 
                'data1': puffin.colors["blue"],
                'data2': puffin.colors["green"]
                },
                names: {
                    // name of each serie
                'data1': 'Tokyo',
                'data2': 'London'
                }
            },
            axis: {
                x: {
                type: 'category',
                // name of each category
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
                },
            },
            legend: {
                        show: false, //hide legend
            },
            padding: {
                bottom: 0,
                top: 0
            },
            });            
    </script>