Chart

Beta Added in 2.0.0

Create flexible charts and graphs.

This is a technically advanced tutorial.

The Chart component uses the Chart.js library.

Usage

First, we need to add a canvas to our page.

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

Now, we can create a chart by adding a script to our page:

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: "My First dataset",
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 10, 5, 2, 20, 30, 45],
        }]
    },

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

<canvas id="myChart"></canvas>
<script>
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: "My First dataset",
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 10, 5, 2, 20, 30, 45],
        }]
    },

    // Configuration options go here
    options: {}
});
</script>

Line

A line chart is a way of plotting data points on a line. Often, it is used to show trend data, or the comparison of two data sets.

var myLineChart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: options
});

<canvas id="gls-chart-line" width="1540" height="770" aria-label="Example Line Chart" role="img"></canvas>
<script>
new Chart(document.getElementById("gls-chart-line"),{
    "type":"line",
    "data": {
        "labels":["January","February","March","April","May","June","July"],
        "datasets":[{
            "label":"My First Dataset",
            "data":[65,59,80,81,56,55,40],
            "fill":false,
            "borderColor":"rgb(75, 192, 192)",
            "lineTension":0.1
        }]
    },
    "options":{}
});
</script>

Bar

A bar chart provides a way of showing data values represented as vertical bars. It is sometimes used to show trend data, and the comparison of multiple data sets side by side.

var myBarChart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: options
});

<canvas id="gls-chart-bar" width="1540" height="770" aria-label="Example Bar Chart" role="img"></canvas>
<script>
new Chart(document.getElementById("gls-chart-bar"), {
    "type":"bar",
    "data": {
        "labels":["January","February","March","April","May","June","July"],
        "datasets":[{
            "label":"My First Dataset",
            "data":[65,59,80,81,56,55,40],
            "fill":false,
            "backgroundColor":[
                "rgba(255, 99, 132, 0.2)",
                "rgba(255, 159, 64, 0.2)",
                "rgba(255, 205, 86, 0.2)",
                "rgba(75, 192, 192, 0.2)",
                "rgba(54, 162, 235, 0.2)",
                "rgba(153, 102, 255, 0.2)",
                "rgba(201, 203, 207, 0.2)"
            ],
            "borderColor":[
                "rgb(255, 99, 132)",
                "rgb(255, 159, 64)",
                "rgb(255, 205, 86)",
                "rgb(75, 192, 192)",
                "rgb(54, 162, 235)",
                "rgb(153, 102, 255)",
                "rgb(201, 203, 207)"
            ],
            "borderWidth":1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
</script>

Radar

A radar chart is a way of showing multiple data points and the variation between them. They are often useful for comparing the points of two or more different data sets.

var myRadarChart = new Chart(ctx, {
    type: 'radar',
    data: data,
    options: options
});

<canvas id="gls-chart-radar" width="1540" height="770" aria-label="Example Radar Chart" role="img"></canvas>
<script>
new Chart(document.getElementById("gls-chart-radar"), {
    "type":"radar",
    "data":{
        "labels": ["Eating","Drinking","Sleeping","Designing","Coding","Cycling","Running"],
        "datasets": [{
            "label":"My First Dataset",
            "data":[65,59,90,81,56,55,40],
            "fill":true,
            "backgroundColor":"rgba(255, 99, 132, 0.2)",
            "borderColor":"rgb(255, 99, 132)",
            "pointBackgroundColor":"rgb(255, 99, 132)",
            "pointBorderColor":"#fff",
            "pointHoverBackgroundColor":"#fff",
            "pointHoverBorderColor":"rgb(255, 99, 132)"
        },
        {
            "label":"My Second Dataset",
            "data":[28,48,40,19,96,27,100],
            "fill":true,
            "backgroundColor":"rgba(54, 162, 235, 0.2)",
            "borderColor":"rgb(54, 162, 235)",
            "pointBackgroundColor":"rgb(54, 162, 235)",
            "pointBorderColor":"#fff",
            "pointHoverBackgroundColor":"#fff",
            "pointHoverBorderColor":"rgb(54, 162, 235)"
        }
    ]},
    "options":{
        "elements":{
            "line":{
                "tension":0,
                "borderWidth":3
            }
        }
    }
});
</script>

Pie & Doughnut

Pie and doughnut charts are probably the most commonly used charts. They are divided into segments, the arc of each segment shows the proportional value of each piece of data.

They are excellent at showing the relational proportions between data.

Pie and doughnut charts are effectively the same class in Chart.js, but have one different default value - their cutoutPercentage. This equates what percentage of the inner should be cut out. This defaults to 0 for pie charts, and 50 for doughnuts.

They are also registered under two aliases in the Chart core. Other than their different default value, and different alias, they are exactly the same.

var myPieChart = new Chart(ctx,{
    type: 'pie',
    data: data,
    options: options
});

<canvas id="gls-chart-pie" width="1540" height="770" aria-label="Example Pie Chart" role="img"></canvas>
<script>
new Chart(document.getElementById("gls-chart-pie"),{
    "type":"pie",
    "data":{
        "labels":["Red","Blue","Yellow"],
        "datasets":[{
            "label":"My First Dataset",
            "data":[300,50,100],
            "backgroundColor":["rgb(255, 99, 132)",
            "rgb(54, 162, 235)",
            "rgb(255, 205, 86)"
        ]}
    ]}
});
</script>

Polar Area

Polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value.

This type of chart is often useful when we want to show a comparison data similar to a pie chart, but also show a scale of values for context.

new myPolarChart(ctx, {
    data: data,
    type: 'polarArea',
    options: options
});

<canvas id="gls-chart-polar" width="1540" height="770" aria-label="Example Polar Area Chart" role="img"></canvas>
<script>
new Chart(document.getElementById("gls-chart-polar"),{
    "type":"polarArea",
    "data":{
        "labels":["Red","Green","Yellow","Grey","Blue"],
        "datasets":[{
            "label":"My First Dataset",
            "data":[11,16,7,3,14],
            "backgroundColor":[
                "rgb(255, 99, 132)",
                "rgb(75, 192, 192)",
                "rgb(255, 205, 86)",
                "rgb(201, 203, 207)",
                "rgb(54, 162, 235)"
            ]
        }]
    }
});
</script>

Bubble

A bubble chart is used to display three dimensions of data at the same time. The location of the bubble is determined by the first two dimensions and the corresponding horizontal and vertical axes. The third dimension is represented by the size of the individual bubbles.

var myBubbleChart = new Chart(ctx,{
    type: 'bubble',
    data: data,
    options: options
});

<canvas id="gls-chart-bubble" width="1540" height="770" aria-label="Example Bubble Chart" role="img"></canvas>
<script>
new Chart(document.getElementById("gls-chart-bubble"),{
    "type":"bubble",
    "data":{
        "datasets":[{
            "label":"First Dataset",
            "data":[
                {"x":20,"y":30,"r":15},
                {"x":40,"y":10,"r":10}
            ],
            "backgroundColor":"rgb(255, 99, 132)"
        }]
    }
});
</script>

Scatter

Scatter charts are based on basic line charts with the x axis changed to a linear axis. To use a scatter chart, data must be passed as objects containing X and Y properties. The example below creates a scatter chart with 3 points.

var myScatterChart = new Chart(ctx,{
    type: 'scatter',
    data: data,
    options: options
});

<canvas id="gls-chart-scatter" width="1540" height="770" aria-label="Example Scatter Chart" role="img"></canvas>
<script>
new Chart(document.getElementById("gls-chart-scatter"),{
    type: 'scatter',
    data: {
        datasets: [{
            label: 'Scatter Dataset',
            data: [{
                x: -10,
                y: 0
            }, {
                x: 0,
                y: 10
            }, {
                x: 10,
                y: 5
            }]
        }]
    },
    options: {
        scales: {
            xAxes: [{
                type: 'linear',
                position: 'bottom'
            }]
        }
    }
});
</script>

Advanced

Many more options and configurations are available. See the Chart.js Documentation to learn more.