<div id="bar-container">
    <div id="bar-chart"></div>
</div>
#bar-chart{
    background-color: rgb(55, 71, 79);
    width: 800px;
    height: 350px;
    font-family: Lato, Helvetica-Neue, monospace;
}

.ct-series-a .ct-bar {
  /* Colour of your bars */
  stroke:  #be1e2d;
  stroke-width: 30;
}
.ct-series-b .ct-bar {
  /* Colour of your bars */
  stroke:  #00a79d;
  stroke-width: 30;
}

.ct-label {
  color: white;
}
var data = {
  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
  series: [
    [5, 4, 3, 7, 5, 10],
    [3, 2, 9, 5, 4, 6]
  ]
};

var options = {
  seriesBarDistance: 30
};
var responsiveOptions = [
  ['screen and (max-width: 640px)', {
    seriesBarDistance: 5,
    axisX: {
      labelInterpolationFnc: function (value) {
        return value[0];
      }
    }
  }]
];

new Chartist.Bar('#bar-chart', data, options, responsiveOptions);

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/chartist/0.9.7/chartist.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/chartist/0.9.7/chartist.min.js