CSS selector with :
by Daniel Tan
HTML
<link rel="stylesheet" href="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
<script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
<div id="myChart" class="ct-chart" style="height:400px"></div>
CSS
@namespace ct 'http://gionkunz.github.com/chartist-js/ct';
[ct|series-name='second'] .ct-bar {
stroke: black;
stroke-width: 20px;
stroke-linecap: round;
}
JavaScript
var data = {
labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'],
series: [{
name: 'first',
data: [1, 2, 4, 8, 6, -2, -1, -4, -6, -2]
}, {
name: 'second',
data: [3, 4, 2, 6, 3, 2, 1, 4, 6, 2]
}]
};
var options = {
high: 10,
low: -10,
onlyInteger: true
};
new Chartist.Bar('.ct-chart', data, options);