var data = {
  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    series: [
    [5, 4, 3, 7, 5, 10, 3, 4, 8, 10, 6, 8],
    [3, 2, 9, 5, 4, 6, 4, 6, 7, 8, 7, 4]
  ]
};

var options = {
  seriesBarDistance: 15
};

// You can define a responsive settings array that consists of settings arrays containing a media query as first element followed by a regular Chartist.js settings object. We recommend that you store your media queries somewhere centrally and use them wherever required.
var responsiveOptions = [
  // The first responsive setting is for medium / large media only
  ['screen and (min-width: 641px) and (max-width: 1024px)', {
    seriesBarDistance: 10,
    axisX: {
      labelInterpolationFnc: function (value) {
        return value;
      }
    }
  }],
  // These settings will only be applied to small media
  ['screen and (max-width: 640px)', {
    seriesBarDistance: 5,
    axisX: {
      labelInterpolationFnc: function (value) {
        return value[0];
      }
    }
  }]
];

// In addition to the regular options we pass in our responsive options array as 4th parameter
Chartist.Bar('.ct-chart', data, options, responsiveOptions);