Chartist Sparkline Examples

Chartist Sparkline Examples.markdown

Chartist Sparkline Examples

A Pen by Jon Wilkinson on CodePen.

License.

index.html

<div class="container">

  <h1>Chartist Sparkline Examples</h1>
  
  <p>Example of an inline <span class="ct-chart line"></span> sparkline chart. </p>
  <p>Or even a bar <span class="ct-chart bar"></span> chart.<p>
  <p>And some pie too <span class="ct-chart pie"></span> with no labels.<p>

  <footer style="margin-top:3em;padding-top:1em;border-top:1px solid #ccc;">
    <p class="small">Chartist is here: <a target="_blank" href="https://gionkunz.github.io/chartist-js/index.html">https://gionkunz.github.io/chartist-js/index.html</a></p>
  </footer>
</div>

script.js

var data = {series: [[5,8,12,14,10,19,13,10,9,5,11,5,3]]}
var piedata = {series:[25,45,30]}

var sparkOptions = {
  height:'1em',
  width:'4ex',
  showPoint: false,
  fullWidth:true,
  chartPadding: {top: 0,right: 0,bottom: 0,left: 0},
  axisX: {showGrid: false, showLabel: false, offset: 0},
  axisY: {showGrid: false, showLabel: false, offset: 0}
}

new Chartist.Line('.ct-chart.line', data, sparkOptions);
new Chartist.Bar('.ct-chart.bar', data, sparkOptions);
new Chartist.Pie('.ct-chart.pie', piedata, sparkOptions);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.9.7/chartist.min.js"></script>

style.scss

.ct-chart svg  {
  margin:1px; 
  vertical-align:text-bottom;
}
.ct-series-a .ct-line,
.ct-series-a .ct-bar {
  stroke: red; 
  stroke-width: 1px;
}
.ct-chart-pie .ct-label {
  display:none;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.9.7/chartist.min.css" rel="stylesheet" />