Chartist

                        
<div class="ct-chart ct-golden-section" id="chartist-example1" style="height:350px"></div>
                        
                    

                        
new Chartist.Line('#chartist-example1', {
    labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
    series: [
        [12, 9, 7, 8, 5],
        [2, 1, 3.5, 7, 3],
        [1, 3, 4, 5, 6]
    ]
}, {
    fullWidth: true,
    chartPadding: {
        right: 40
    }
});
                        
                    

                        
<div class="ct-chart ct-golden-section" id="chartist-example2" style="height:350px"></div>
                        
                    

                        
var chartistBarData = {
  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
  series: [
    [5, 4, 3, 7, 5, 10, 3, 4, 8, 10, 6, 8],
    [3, 2, 9, 5, 4, 6, 4, 6, 7, 8, 7, 4]
  ]
};

var chartistBarDataOptions = {
  seriesBarDistance: 10
};

var chartistBarResponsiveOptions = [
  ['screen and (max-width: 640px)', {
    seriesBarDistance: 5,
    axisX: {
      labelInterpolationFnc: function (value) {
        return value[0];
      }
    }
  }]
];
new Chartist.Bar('#chartist-example2', chartistBarData, chartistBarDataOptions, chartistBarResponsiveOptions);
                        
                    

                        
<div class="ct-chart ct-golden-section" id="chartist-example3" style="height:280px"></div>
                        
                    

                        
var piedata = {
    series: [5, 3, 4]
};

var sum = function(a, b) {
    return a + b
};

new Chartist.Pie('#chartist-example3', piedata, {
    labelInterpolationFnc: function(value) {
        return Math.round(value / piedata.series.reduce(sum) * 100) + '%';
    }
});