Chartist

<div class="ct-chart ct-chart-line"></div>

const data = {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
    series: [
        [0, 9, 15, 10, 30, 15, 25, 18, 20],
        [0, 10, 10, 13, 10, 20, 10, 10, 25],
    ],
};
const options = {
    fullWidth: true,
    height: '320px',
    showArea: true,
    seriesBarDistance: 48,
    showLine: false,
    chartPadding: {
        top: 30,
        right: 30,
        bottom: 0,
        left: 0,
    },
    axisX: {
        showGrid: false,
    },
    axisY: {
        showGrid: false,
        onlyInteger: true,
    },
};
new Chartist.Line('.ct-chart', data, options);

<div class="ct-chart ct-chart-bar"></div>

const data = {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
    series: [
        [0, 9, 15, 10, 30, 15, 25, 18, 20],
        [0, 10, 10, 13, 10, 20, 10, 10, 25],
    ],
};
const options = {
    fullWidth: true,
    height: '320px',
    showArea: true,
    seriesBarDistance: 48,
    showLine: false,
    chartPadding: {
        top: 30,
        right: 30,
        bottom: 0,
        left: 0,
    },
    axisX: {
        showGrid: false,
    },
    axisY: {
        showGrid: false,
        onlyInteger: true,
    },
};
new Chartist.Bar('.ct-chart-bar', data, options);

<div class="ct-chart ct-chart-pie"></div>

const data = {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
    series: [5, 3, 4],
};
const options = {
    fullWidth: true,
    height: '320px',
    labelOffset: 10,
    showArea: true,
};
new Chartist.Pie('.ct-chart-pie', data, options);