Recently I am using the Chartjs library for creating graphs on my website and in that we need to set the title of the y-axis and graph, and I notice that some people also facing the same issue as there is no information about it in the documentation. So I decided to write this article for helping other developers.

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/chart.js@3.7.1/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

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.

The post [Simple Trick]-In Chart.js set Chart Title, Name of X axis and Y axis appeared first on Software Development | Programming Tutorials.



Read More Articles