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.
<!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 =
</ 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:
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.
<!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 =
</ 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 >
|
Output: