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

Orient print X axis labels vertically #11749

{{title}}

Replies: 1 comment 2 replies

{{title}}

{{title}}

{{title}}

Select a reply

Orient print X axis labels vertically #11749

paolodecaro Apr 19, 2024

Replies: 1 comment · 2 replies

stockiNail Apr 20, 2024

paolodecaro Apr 26, 2024 Author

stockiNail Apr 29, 2024

paolodecaro
Apr 19, 2024

Replies: 1 comment 2 replies

stockiNail
Apr 20, 2024

paolodecaro Apr 26, 2024
Author