Chartist

Larga dataset in dense grid

by madvic

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",
                           "2000-longinfo",
                           "2001-longinfo",
                           "2002",
                           "2003",
                           "2004",
                           "2005",
                           "2006",
                           "2007",
                           "2008",
                           "2009",
                           "2010",
                           "2011",
                           "2012",
                           "2013",
                           "2014",
                           "2015"],
    series: [
    [ 2.92,
                                 2.83,
                                 2.69,
                                 2.57,
                                 2.4,
                                 2.27,
                                 2.19,
                                 2.15,
                                 2.06,
                                 2.06,
                                 1.92,
                                 1.82,
                                 1.8,
                                 1.76,
                                 1.72,
                                 1.71,
                                 1.61,
                                 1.56,
                                 1.52,
                                 1.41,
                                 1.35]
  ]
};

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

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