Chart.js Examples

Richard Dalton

Line Charts

This simple Line Chart plots one dataset. The dataset consists of an array of datapoints (data) A color for the line(borderColor) And a label for the dataset (label)

Outside of the dataset the columns labels are specified.

Click 'Add Data' to plot a new datapoint

{
    datasets: [{
        data: [
            11,
            16,
            7,
            3,
            14
        ],
        borderColor: "rgba(220,0,0,0.25)",
        label: 'My dataset'
    }],
    labels: [
        "Red",
        "Green",
        "Yellow",
        "Grey",
        "Blue"
    ]
}

This Line Chart plots two datasets. Each dataset consists of an array of datapoints (data) and a label for the dataset (label) Both also have lineTension set to 0 giving straight lines between points. The red dataset has fill set to false, and has a borderColor The yellow data set has a backgroundColor, the line color is set based on that.

Outside of the dataset the columns labels are specified.

    {
    datasets: [{
        data: [
            11,
            16,
            7,
            3,
            14
        ],
        label: '2015',
        lineTension: 0,
        borderColor: "rgba(220,0,0,0.5)",
        fill: false
    },
        {
            data: [
                1,
                6,
                17,
                13,
                4
            ],
            backgroundColor: "rgba(255,206,56,0.5)",
            label: '2016',
            lineTension: 0
        }],
    labels: [
        "Red",
        "Green",
        "Yellow",
        "Grey",
        "Blue"
    ]
}