Chartist Animation

by Willin Wang

HTML

<script src="https://unpkg.com/chartist"></script>
<link rel="stylesheet" href="https://unpkg.com/chartist/dist/chartist.css">
<div class="ct-chart">
</div>

CSS

* {
  transform-origin: 0px 0px 0px;
}

.ct-line {
  stroke-dasharray: 5px;
  animation: dashoffset 1s linear infinite;
}

@keyframes dashoffset {
  0% {
    stroke-dashoffset: 0px;
  }
  100% {
    stroke-dashoffset: -20px;
  }
}

@keyframes bouncing-stroke {
  0% {
    stroke-width: 5px;
  }
  50% {
    stroke-width: 10px;
  }
  100% {
    stroke-width: 5px;
  }
}

@keyframes exploding-stroke {
  0% {
    stroke-width: 2px;
    opacity: 1;
  }
  100% {
    stroke-width: 20px;
    opacity: 0;
  }
}

JavaScript

var data = {
  // A labels array that can contain any sort of values
  labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
  // Our series array that contains series objects or in this case series data arrays
  series: [
    [5, 2, 4, 2, 0]
  ]
};

// As options we currently only set a static size of 300x200 px. We can also omit this and use aspect ratio containers
// as you saw in the previous example
var options = {
  width: 300,
  height: 200
};

// Create a new line chart object where as first parameter we pass in a selector
// that is resolving to our chart container element. The Second parameter
// is the actual data object. As a third parameter we pass in our custom options.
new Chartist.Line('.ct-chart', data, options);