Orient print X axis labels vertically #11749

paolodecaro · 2024-04-19T20:00:12Z

paolodecaro
Apr 19, 2024

Good evening, I need to orient the It is placed horizontally, I would like it to be displayed vertically. Thank you.

stockiNail · 2024-04-20T13:37:32Z

stockiNail
Apr 20, 2024

@paolodecaro as reported in the doc(https://www.chartjs.org/docs/latest/axes/cartesian/#common-tick-options-to-all-cartesian-axes), the X axes can be config by mixRotation and maxRotation, to force some kind of ticks rotation.

It is enough to set minRotation: 90.
Here a codepen: https://codepen.io/stockinail/pen/yLrQjYG

Let me also ask you if you can open a Q&A for this kind of requests instead of genearal. Thank you!

2 replies

paolodecaro Apr 26, 2024
Author

Ciao stockiNail e grazie per avermi risposto, ho provato il codice che mi hai suggerito nel link, ma non mi funziona. dove sbaglio. Ti allego il codice. Grazie della tua pazienza. Cordiali Saluti. Paolo
`

<body>

`

JS

`
//alert ("sono nel piccione2");
const data = {
labels: ["Python", "JavaScript", "Java", "C++", "HTML"],
datasets: [
{
label: "GeeksforGeeks Courses",
data: [200, 350, 300, 180, 120],
backgroundColor: "rgba(75, 192, 192, 0.6)",
borderColor: "rgba(75, 192, 192, 1)",
borderWidth: 2,
},
],
};

const config = {
type: "bar",
data: data,
options: {
scales: {
x: {
display: true,
title: {
display: true,
text: "Programming Languages",
color: "blue",
},
ticks: {
color: "green",
minRotation: 90,
font: { size: 12, weight: "bold" },
},
grid: {
color: ["red", "orange", "yellow", "green", "blue"],
display: true,
lineWidth: 2,
drawOnChartArea: false,
},
border: {
display: true,
color: "purple",
width: 2,
},
},
y: {
display: true,
title: {
display: true,
text: "Number of Courses",
color: "red",
},
min: 0,
max: 650,
ticks: {
color: "orange",
font: { size: 12, weight: "bold" },
stepSize: 50,
},
grid: {
display: true,
drawTicks: false,
},
},
},
},
};
const myChart = new Chart(document.getElementById("myChart"), config);

`

stockiNail Apr 29, 2024

@paolodecaro I have tried again with your code and it's working on Codepen: https://codepen.io/stockinail/pen/KKYYZWm
Can you report here the error (if any) or the screenshot about your result?
I see you are importing index_inizio_G.js but I don't know what it does.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Orient print X axis labels vertically #11749

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment 2 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Orient print X axis labels vertically #11749

Uh oh!

paolodecaro Apr 19, 2024

Replies: 1 comment · 2 replies

Uh oh!

stockiNail Apr 20, 2024

Uh oh!

paolodecaro Apr 26, 2024 Author

Uh oh!

stockiNail Apr 29, 2024

paolodecaro
Apr 19, 2024

Replies: 1 comment 2 replies

stockiNail
Apr 20, 2024

paolodecaro Apr 26, 2024
Author