<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 chart-dropshadow"></div>
	</div>
</div>
<script>
	$(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': Clont.colors["orange"],
					'data2': Clont.colors["pink"]
					'data3': Clont.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>