Loader

c3 charts

Chart name


                            <div class="card">
                            <div class="card-header">
                            <h3 class="card-title">Chart name</h3>
                            </div>
                            <div class="card-body">
                            <div id="chart-combination" class="chartsh"></div>
                            </div>
                            </div>
                            <script>
                            require(['c3', 'jquery'], function(c3, $) {
                            $(document).ready(function(){
                            var chart = c3.generate({
                            bindto: '#chart-combination', // id of chart wrapper
                            data: {
                            columns: [
                            // each columns data
                            ['data1', 100, 130, 150,240, 130, 220],
                            ['data2', 250, 200, 220, 400, 250 , 350]'
                            ['data3', 100, 130, 150,240, 130, 220]

                            ],
                            type: 'bar', // default type of chart

                            colors: {
                            'data1': Zanex.colors["orange"],
                            'data2': Zanex.colors["pink"]
                            'data3': Zanex.colors["teal"]
                            },
                            names: {
                            // name of each serie
                            'data1': 'Marketing',
                            'data2': 'Development'
                            'data3': 'Sales'
                            }
                            },
                            axis: {
                            x: {
                            type: 'category',
                            // name of each category
                            categories: ['2007-2008', '2009-2010', '2011-2012', '2013-2014', '2015-2016', '2017-2018']
                            },
                            },
                            bar: {
                            width: 50
                            },
                            legend: {
                            show: false, //hide legend
                            },
                            padding: {
                            bottom: 0,
                            top: 0
                            },
                            });
                            });
                            });
                            </script>