Chart JS

Use charts to present complex data with the help of bar charts, pie charts, line charts and many more

Line chart

Here’s an example of a line chart:

<canvas id="myChart"></canvas>

Javascript

if ($('#myChart').length) {
    var ctx = document.getElementById('myChart').getContext('2d');
    var chart = new Chart(ctx, {
        // The type of chart we want to create
        type: 'line',

        // The data for our dataset
        data: {
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [{
                label: 'Themesberg Sales',
                backgroundColor: '#1c2540',
                borderColor: '#ffffff',
                data: [0, 10, 5, 2, 20, 30, 45]
            }]
        },

        // Configuration options go here
        options: {}
    });
}

Pie chart example

This is an example of a pie chart:

<canvas id="pie-chart"></canvas>

Javascript

if ($('#pie-chart').length) {
    //Pie Chart
    new Chart(document.getElementById("pie-chart"), {
        type: 'pie',
        data: {
        labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
        datasets: [{
            label: "Population (millions)",
            backgroundColor: ["#1c2540", "#893168","#3cba9f","#e8c3b9","#c45850"],
            data: [2478,5267,734,784,433]
        }]
        },
        options: {
        title: {
            display: true,
            text: 'Predicted world population (millions) in 2050'
        }
        }
    });
}

Horizontal bar chart example

This is an example of a horizontal bar chart:

<canvas id="bar-chart-horizontal"></canvas>

Javascript

if ($('#bar-chart-horizontal').length) {
    //Horizontal Chart
    new Chart(document.getElementById("bar-chart-horizontal"), {
        type: 'horizontalBar',
        data: {
            labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
            datasets: [
            {
                label: "Population (millions)",
                backgroundColor: ["#1c2540", "#893168","#3cba9f","#e8c3b9","#c45850"],
                data: [2478,5267,734,784,433]
            }
            ]
        },
        options: {
            legend: { display: false },
            title: {
            display: true,
            text: 'Predicted world population (millions) in 2050'
            }
        }
    });
}

Vertical bar chart example

This is an example of a vertical bar chart:

<canvas id="bar-chart"></canvas>

Javascript

if ($('#bar-chart').length) {
    // Vertical Bar chart
    new Chart(document.getElementById("bar-chart"), {
        type: 'bar',
        data: {
        labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
        datasets: [
            {
            label: "Population (millions)",
            backgroundColor: ["#1c2540", "#893168","#3cba9f","#e8c3b9","#c45850"],
            data: [2478,5267,734,784,433]
            }
        ]
        },
        options: {
        legend: { display: false },
        title: {
            display: true,
            text: 'Predicted world population (millions) in 2050'
        }
        }
    });
}

Doughnut chart example

This is an example of a doughnut chart:

<canvas id="doughnut-chart"></canvas>

Javascript

if($('#doughnut-chart').length) {
    // Doughnut chart
    new Chart(document.getElementById("doughnut-chart"), {
        type: 'doughnut',
        data: {
        labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
        datasets: [
            {
            label: "Population (millions)",
            backgroundColor: ["#1c2540", "#893168","#3cba9f","#e8c3b9","#c45850"],
            data: [2478,5267,734,784,433]
            }
        ]
        },
        options: {
        title: {
            display: true,
            text: 'Predicted world population (millions) in 2050'
        }
        }
    });
} 

Radar chart example

This is an example of a radar chart:

<canvas id="radar-chart"></canvas>

Javascript

 if($('#radar-chart').length) {
    // Radar chart
    new Chart(document.getElementById("radar-chart"), {
        type: 'radar',
        data: {
        labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
        datasets: [
            {
            label: "1950",
            fill: true,
            backgroundColor: "rgba(179,181,198,0.2)",
            borderColor: "rgba(179,181,198,1)",
            pointBorderColor: "#fff",
            pointBackgroundColor: "rgba(179,181,198,1)",
            data: [8.77,55.61,21.69,6.62,6.82]
            }, {
            label: "2050",
            fill: true,
            backgroundColor: "rgba(255,99,132,0.2)",
            borderColor: "#893168",
            pointBorderColor: "#fff",
            pointBackgroundColor: "#893168",
            pointBorderColor: "#fff",
            data: [25.48,54.16,7.61,8.06,4.45]
            }
        ]
        },
        options: {
        title: {
            display: true,
            text: 'Distribution in % of world population'
        }
        }
    });
}

Read more about Chart JS from the official plugin website.