Chart.js Examples

This Pie Chart plots one dataset. The dataset consists of an array of datapoints (data) An array of colors for the segments(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 Doughnut Chart is plotted in the same way as the Pie Chart. The deifference is that when the chart is created, it's type is 'doughnut' instead of 'pie'.

new Chart(ctx1, {
    type: 'pie',
    data: singlePieData,
    options: createOptions("Pie Chart")
});

new Chart(ctx2, {
    type: 'doughnut',
    data: singlePieData,
    options: createOptions("Doughnut Chart")
});