SCSS

by levchenko_d

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.11.4/chartist.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.11.4/chartist.min.css">
<textarea id="data-input" rows="2"></textarea>

<div class="ct-chart"></div>

<textarea id="result" rows="5"></textarea>

CSS

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@800&display=swap');

body {
  font-family: 'Open Sans', sans-serif;
}

.ct-series-a .ct-bar{
  stroke: #666666;
  stroke-width: 24px;
}

.ct-label.ct-vertical.ct-start{
  font-family: 'Open Sans';
  font-weight: 900;
  color: #666666;
}

textarea{
  width: 100%;
}

JavaScript

var $di = $('#data-input');
var $r = $('#result');
var $c = $('.ct-chart');

var data = {
  series: [[
    146, 124, 139, 266, 391, 256, 165, 154, 288, 502, 287, 157, 376, 389, 523, 273, 265, 556, 441, 529, 415, 325, 294, 273, 496, 231, 438, 453, 369, 331
]]
};

var chartHeihgt = 253;
var labelHeight = 19;
var options = {
  low: 0,
  axisX: {  showGrid: false, offset:0, scaleMinSpace: 0 },
  axisY: {  showGrid: false, scaleMinSpace: 0 },
	width: '943px',
  height: chartHeihgt+'px'
};

var chart = new Chartist.Bar('.ct-chart', data, options);
var labelIndex = 0;
var labels = [];
var labelMargin = 5;


$(document).on('resize', () => labels = []);

chart.on('draw', function(data) {
	if(data.type === 'bar'){
  	data.element._node.setAttribute('stroke-width','24px');
	  data.element._node.setAttribute('stroke','#666666');
  }
  
  if(data.type === 'label'){
  	var text = new Chartist.Svg('text', {width: 40})
    text._node.innerHTML = data.text;
    text._node.setAttribute('x', '0');
    text._node.setAttribute('y', '1');
    text._node.setAttribute('font-size', '14px');
    text._node.setAttribute('font-weight', 'normal');
    text._node.setAttribute('font-family', 'Open Sans');
    text._node.setAttribute('fill', '#666');
    text._node.setAttribute('width', '25');

    if(data.text+''){
    	data.element.replace(text);
      labels.unshift(text);
      
      labels.map((l, i) => {
	l._node.setAttribute('y', Math.max(labelHeight, labelHeight + (chartHeihgt - labelHeight - labelMargin) * ((100 / (labels.length - 1) * i) / 100)));
});
    }
  }
  
  $r.val($c.html()).select();
});