Chartist

Larga dataset in dense grid

by mustafa yılmaz

HTML

<link rel="stylesheet" href="https://rawgit.com/gionkunz/chartist-js/master/dist/chartist.min.css">
<script src="https://rawgit.com/gionkunz/chartist-js/master/dist/chartist.min.js"></script>
<div class="ct-chart ct-square"></div>

CSS

svg.ct-chart-bar, svg.ct-chart-line{
	overflow: visible;
}
.ct-label.ct-label.ct-horizontal.ct-end {
  position: relative;
  justify-content: flex-end;
  text-align: right;
  transform-origin: 100% 0;
  transform: translate(-100%) rotate(-45deg);
  white-space:nowrap;
}

JavaScript

var data = {
  labels: [ "1995-longinfo",
            "1996-longinfo",
					 "1997-longinfo",
					 "1998-longinfo",
					 "1999-longinfo"],
    series: [
    [ 2.92,
		 2.83,
		 2.69,
		 2.57,
		 2.4]
		]
};

var options = {
  height:400,
  seriesBarDistance: 100,
      axisY : {
          low: 1.2,
          referenceValue: 3,
          scaleMinSpace: 40
        }
};

new Chartist.Line('.ct-chart', data, options);