Plotting A Line Graph Using JavaScript with Chart.js

In this tutorial, we will be looking at a simple method to generate a line graph using JavaScript with the help of Chart.js library. The same template can be used for all types of graphs.

Getting Started

In our HTML file, we will first add the canvas tag like this:

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

The line graph will be generated inside the canvas. To generate the graph we will be using Chart.js.

To use Chart.js with the HTML file we will declare the script tag and link it to the Chart.js CDN like this:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Finally, we will link the HTML file to the JavaScript file like this:

<script src="index.js"></script>

Do take note that my JavaScript file was named index.js. Optionally you can add a script tag in the HTML file instead of creating a new JavaScript file.

The JavaScript File

Let us assume a cakeshop owner wants a graphical representation of the number of cakes she has sold during the first 6 months of 2021.

One of the main things required to plot a graph using Chart.js is assigning the X-axis labels. We do that by using the following code:

const x_axis_labels = [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
];

In the above code, we notice that the labels are in an array. The first element will be the first label and so on.

Once this is declared we need to define a few settings for the graph. We do this by using the following code:

const setting = {
    type: 'line',
    data: {
        labels: x_axis_labels,
        datasets: [{
            label: 'Cakes sold in 2021',
            backgroundColor: 'red',
            borderColor: 'red',
            data: [10, 40, 12, 16, 80, 100],
        },
        ]
    },
};

In the object settings, the type of the graph has been set to line. This way there are different types of graphs offered by Chart.js such as bar, pie, bubble, etc.

The setting object also has nested object data. This is used to define the data required for plotting the graph.

Important points

  • Sometimes although the code may look correct, the graph does not get plotted and the console does not throw errors. This happens because the data nested under the setting object provided by you is not correct or is erroneous.
  • The data array nested under datasets should have only numbers if you are using strings you can use parseInt().
  • borderColor and backgroundColor can be set using hex color codes too.

 

The Final Step

new Chart(
    document.getElementById('cake-chart'),
    setting
);

In this final step, we create an instance of the chart using the Chart.js API and hence render the graph in the intended canvas.

 

Final JavaScript Code

// Assigning the labels of the X-axis in an array
const x_axis_labels = [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
];

// Setting up the chart before plotting it
const setting = {
    type: 'line',
    data: {
        labels: x_axis_labels,
        datasets: [{
            label: 'Cakes sold in 2021',
            backgroundColor: 'red',
            borderColor: 'red',
            data: [10, 40, 12, 16, 80, 100],
        },
        ]
    },
};

// plotting the chart
new Chart(
    document.getElementById('cake-chart'),
    setting
);

 

Output for the line graph using JavaScript and Chartjs

graph

 

You can also learn,

Leave a Reply

Your email address will not be published. Required fields are marked *