I've been using the Chart.js library to create graphs on my website. I noticed that setting the title of the y-axis and the graph itself isn't well-documented, and some other developers seem to be facing the same issue. So, I've decided to write this article to help them out.

Chart js set Chart Title, Name of X axis and Y axis

How to set ChartJS set Chart Title, Name of X axis and Y axis

Heytoday’s article is about charts and I’m talking about charts. Javascript library a very powerful library to create, to easily create different kind of charts. Using below option you can easily set Chart Title, Name of X axis and Y axis.

options: {
                plugins: {
                    title: {
                        display: true,
                        text: 'Visitor',//setting chart title
                    }
                },
                scales: {
                    x: {
                        display: true,
                        title: {
                            display: true,
                            text: 'Year'//setting Name of X axis 
                        }
                    },
                    y: {
                        display: true,
                        title: {
                            display: true,
                            text: 'Visitor'//Name of Y axis 
                        }
                    }
                }
            }

How to add axis titles in chart.js charts

<!DOCTYPE html>
<html>
<head>
    <title>Chart.js-Multi line charts </title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
</head>
<body>
    <div style="margin-left:5%;margin-right:5%">
        <canvas id="myLineChart" style="width:100%;max-width:80%"></canvas>
    </div>
    <script>
        var xValues = ["Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sep", "Aug", "Oct"];
        const MultiLinechartData = {
            type: "line",
            data: {
                labels: xValues,
                datasets: [
                    {
                        label: 'Visitor',
                        lineTension: 1,//this property is used for setting the line curved
                        borderColor: 'red',
                        data: [300, 450, 450, 550, 700, 620, 1200, 1120, 1050, 1159, 1120]
                    }
                ]
            },
            options: {
                plugins: {
                    title: {
                        display: true,
                        text: 'Visitor',
                    }
                },
                scales: {
                    x: {
                        display: true,
                        title: {
                            display: true,
                            text: 'Year'
                        }
                    },
                    y: {
                        display: true,
                        title: {
                            display: true,
                            text: 'Visitor'
                        }
                    }
                }
            }
        };
        new Chart("myLineChart", MultiLinechartData);
    </script>

</body>
</html>

*Thank you so much if you have a question please comment

And then we can specify the new variable data one, where we can just specify the values of our answers to the question. So do you like Donuts? Yes, but in green and 69% said yes, and 31% said yes. Button-green. And then we can specify our

  • options: This section contains various settings for the chart.
  • plugins: Specifies additional plugins for the chart. In this case, it sets the title plugin.
  • title: Configuration for the title plugin.
  • display: true: Specifies whether to display the title.
  • text: 'Visitor': Sets the text content of the title to "Visitor".
  • scales: Configures the scales (axes) of the chart.
  • x: Configuration for the x-axis.
  • display: true: Specifies whether to display the x-axis.
  • title: Configuration for the title of the x-axis.
  • display: true: Specifies whether to display the title.
  • text: 'Year': Sets the text content of the x-axis title to "Year".
  • y: Configuration for the y-axis.
  • display: true: Specifies whether to display the y-axis.
  • title: Configuration for the title of the y-axis.
  • display: true: Specifies whether to display the title.
  • text: 'Visitor': Sets the text content of the y-axis title to "Visitor".
  • It sets the title of the chart to "Visitor", the title of the x-axis to "Year", and the title of the y-axis to "Visitor".

Let colors one equals two. And now lets for both answers, give a certain color. For the first one, let’s give 49 a nine EA. And for the second one, let’s hand over 36 cabs.

Basically, we could have put those stuff directly in here. So we could have put the labels directly here, the data directly here, and the background colors right here in the specification of the chart. But I like to separate it because I think it’s easier to change afterward. Let’s have a look at our index. Html file.

Here we are. Let’s refresh it. And you can see nothing because we got a syntax error in line 19. Let’s have a look. Line 19 displays truer.

I forgot a comma here. My bad. Let’s save it again, go back, refresh it, and here you can see our chart. So do you like Donuts? Yes, but in green.

And that’s it. Isn’t it easy? Right. All right, so our next chart will be a bar chart and we want to answer the question which airline carries? How many passengers?

So let’s Google a little bit passengers by airline and let’s check out Wikipedia here world’s largest Airlines passengers carrier and let’s have a look at 2022 and display what we see here. So those values are in a bar chart.

Read Similar Articles