<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>
