Chart.js Examples

Richard Dalton

Bar Charts

This simple Bar Chart plots one dataset. The dataset consists of an array of datapoints (data) An array of colors for the columns(backgroundColor) And a label for the dataset (label)

Outside of the dataset the columns labels are specified.

{
    datasets: [{
        data: [
            11,
            16,
            7,
            3,
            14
        ],
        backgroundColor: [
            "#FF6384",
            "#4BC0C0",
            "#FFCE56",
            "#E7E9ED",
            "#36A2EB"
        ],
        label: 'My dataset'
    }],
    labels: [
        "Red",
        "Green",
        "Yellow",
        "Grey",
        "Blue"
    ]
};

This Bar Chart plots two datasets. Each dataset consists of an array of datapoints (data) A background color for the columns (backgroundColor) And a label for the dataset (label)

Outside of the dataset the columns labels are specified.

{
    datasets: [{
        data: [
            11,
            16,
            7,
            3,
            14
        ],
        backgroundColor: "rgba(200,200,200,0.5)",
        label: '2015'
    },
        {
            data: [
                1,
                6,
                17,
                13,
                4
            ],
            backgroundColor: "#FFCE56",
            label: '2016'
        }],
    labels: [
        "Red",
        "Green",
        "Yellow",
        "Grey",
        "Blue"
    ]
};