Chart.js is a simple JavaScript framework to draw charts using the HTML5 <canvas> element. It is easy to get started. In this tutorial, I will show you how to draw a simple chart.

Create simple line chart

Simply look at the code below to see how simple it is to create a line chart. It is self-explanatory.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
 
    <title>Chart.js - Simple line chart</title>
</head>
<body>
    <canvas id="my-simple-chart"></canvas>
</body>
 
<script>
var ctx = document.getElementById('my-simple-chart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
            labels: [1,2,3,4,5,16,70,'a','b','c'],  // x-axis labels.
            datasets: [{
                        label: "My First dataset",
                        data: [1,2,3,2,1,2,3,4,5,4] // y-axis values.
                    }]
        },
    options: {
            responsive: true,   // Will resize according to the browser's size.
        }
});
</script>
</html>

Chart.js

About the author

Xuan Ngo is the founder of OpenWritings.net. He currently lives in Montreal, Canada. He loves to write about programming and open source subjects.

Chart.js - Introduction

Create simple line chart

About the author