Basic stacked bar chart with lines

by rishul matta

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.2/c3.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.2/c3.js"></script>
<h3>Stacked Bar Chart with a line on top</h3>

<div id="chart"></div>

CSS

#chart{height: 250px; margin-top: 2em;}

/* Move label 10 pixels up */
.c3-texts-total .c3-text{
    transform: translate(0px, -10px);
}

JavaScript

var chart = c3.generate({
    data: {
        columns: [
            ['power_solar', 10,  5,  15],
            ['power_without_solar', 20,  8,  12],
            ['loan', 35, 19,  30] // Data for total values
        ],
        type: 'bar',
        // Total is not another bar bur a line
        types: {
        		loan: 'line',
      	},
        labels: true,
        groups: [
            ['power_solar', 'power_without_solar']
        ],
		 		colors: {
        		total: '#000000', // Total should be black
      	},    
    },
});