Admin Pro

Chartist Chart

Chartist Line Chart

Code Here:


									
<div class="ct-svg-chart" style="height: 400px;"></div>
									
								

Init Code


									
var chart = new Chartist.Line('.ct-svg-chart', {
  labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
  series: [
    [1, 5, 2, 5, 4, 3],
    [2, 3, 4, 8, 1, 2],
    [5, 4, 3, 2, 1, 0.5]
  ]
}, {
  low: 0,
  showArea: true,
  showPoint: false,
  fullWidth: true
});

chart.on('draw', function(data) {
  if(data.type === 'line' || data.type === 'area') {
    data.element.animate({
      d: {
        begin: 2000 * data.index,
        dur: 2000,
        from: data.path.clone().scale(1, 0).translate(0, data.chartRect.height()).stringify(),
        to: data.path.clone().stringify(),
        easing: Chartist.Svg.Easing.easeOutQuint
      }
    });
  }
});

									
								

Required Files For Toastr Here


									
<!-- CSS Here -->
<link href="../../assets/libs/chartist/dist/chartist.min.css" rel="stylesheet">
<link href="../../dist/js/pages/chartist/chartist-init.css" rel="stylesheet">

<!-- Javascript Here -->
<script src="../../assets/plugins/chartist/dist/chartist.min.js"></script>
<script src="../assets/plugins/chartist-plugin-tooltip-master/dist/chartist-plugin-tooltip.js"></script>
									
								
All Rights Reserved by Monster. Designed and Developed by WrapPixel.