How to Change Text Label Orientation on X-Axis in Chart.js ?

Last Updated : 04 Jan, 2024

Chart.js is a powerful JavaScript library that allows users to create interactive and visually interactive charts. By default, the text labels on the x-axis in Chart.js are horizontally oriented. In this article, we will see how to change the orientation of text labels on the x-axis in Chart.js.

CDN Link:

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

Approach

In this approach, we are using maxRotation and minRotation properties for changing the orientation of the text label on the x-axis.
We focus on controlling the rotation angle of the labels to enhance readability and presentation by giving them some values.

Example 1: This example shows the use of the properties maxRotation and minRotation for changing the orientation of the text labels.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Chart.js X-Axis Label Rotation</title>
    <script src=
"https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
 
<body>
    <h1 style="color: green;text-align: center">
          GeeksforGeeks
      </h1>
    <!-- Chart canvas -->
    <canvas id="myChart" width="400"
            height="200">
      </canvas>
 
    <script>
        // Example data
        const labels = 
              ['January', 'February', 'March', 'April', 'May'];
        const data = [10, 20, 15, 25, 20];
 
        document.addEventListener('DOMContentLoaded', function () {
            // Get the chart canvas context
            let ctx = 
                document.getElementById('myChart').getContext('2d');
 
            // Create a bar chart
            let myChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'Sample Data',
                        data: data,
                        // Green color for bars (RGBA 
                        // format with alpha for transparency)
                        backgroundColor: 'rgba(0, 128, 0, 0.5)',
                        // Darker green border
                        borderColor: 'rgba(0, 128, 0, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        x: {
                            ticks: {
                                // Maximum rotation angle for tick labels
                                maxRotation: 45,
                                // Minimum rotation angle for tick labels
                                minRotation: 45
                            }
                        },
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
 
            // Add text at the top in green color
            ctx.fillStyle = 'rgba(0, 128, 0, 1)';
        });
    </script>
</body>
 
</html>

Output:

ezgifcom-optimize

Example 2: In this example we draw a bar graph using Chart.js that shows the data into form of line and also we change the orientation of labels of x-axis using the property maxRotation and minRotation.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Chart.js X-Axis Label Rotation</title>
    <script src=
"https://cdn.jsdelivr.net/npm/chart.js">
      </script>
</head>
 
<body>
    <!-- Chart canvas -->
    <canvas id="lineChart" width="400"
            height="200"></canvas>
 
    <script>
        // Example data
        const labels = 
              ['January', 'February', 'March', 'April', 'May'];
        const data = [10, 20, 15, 30, 15];
 
        document.addEventListener('DOMContentLoaded', function () {
            // Get the chart canvas context
            let ctx = 
                document.getElementById('lineChart').getContext('2d');
 
            // Create a line chart
            let lineChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'GeeksforGeeks Line Chart',
                        data: data,
                        // Red color for the line
                        borderColor: 'rgba(0, 128, 0, 1)',
                        borderWidth: 2,
                        // Do not fill the area under the line
                        fill: false
                    }]
                },
                options: {
                    scales: {
                        x: {
                            ticks: {
                                maxRotation: 45,
                                minRotation: 45
                            }
                        },
                        y: {
                            beginAtZero: true
                        }
                    },
                    plugins: {
                        title: {
                            display: true,
                            text: 'GeeksforGeeks Line Chart',
                            // Green color for the title
                            color: 'rgba(0, 128, 0, 1)',
                            font: {
                                size: 16,
                                weight: 'bold'
                            }
                        }
                    }
                }
            });
        });
    </script>
</body>
 
</html>