En chart.js, ¿cómo puedo configurar el tamaño de fuente solo para las etiquetas del eje x sin tocar la configuración global?
Ya intenté configurar la opción ‘scaleFontSize’ en mi objeto de opciones. También he intentado configurar:
{
...
scales: {
xAxes: [{
scaleFontSize: 40
...
}]
}
}
tektiv
los fontSize
el atributo está realmente en scales.xAxes.ticks
y no en scales.xAxes
como pensabas
Así que solo tienes que editar el atributo de esta manera:
var options = {
scales: {
yAxes: [{
ticks: {
fontSize: 40
}
}]
}
}
Puedes ver un ejemplo completamente funcional en este jsFiddle y aquí está su resultado:
-
Sí, pero cómo configurar fontSize para el gráfico de radar donde no
x
yy
ejes?– Yevhenii Shashkov
2 de marzo de 2017 a las 11:25
-
Hizo referencia a los ticks de xAxes en su explicación, pero estableció los ticks de yAxes en 40 en jsFiddle.
– cjmcdonn
31 de agosto de 2017 a las 14:23
-
¿Cómo podría configurar el tamaño de fuente del título y la etiqueta?
–Luciana Oliveira
7 abr 2021 a las 21:30
-
Esto funciona en violín pero no en mi código.
– Ahsan
20 abr a las 17:53
Las opciones de configuración y las propiedades de chartjs 3.0 han cambiado. Actualmente estoy usando Chartjs 3.1.1. fuentes se utilizan como objetos ahora. Para cambiar el tamaño de fuente de las marcas del eje x, debe usar la siguiente configuración.
var options = {
scales: {
x: {
ticks: {
font: {
size: 12,
}
}
}
}
};
Mira esto jsfiddle muestra.
-
¡Finalmente! ¡He buscado en todas partes y la mayoría de las otras respuestas están desactualizadas!
– ElPhi
8 de junio de 2021 a las 12:54
-
Aquí está el enlace del documento: chartjs.org/docs/master/general/fonts.html
– Relisora
1 oct 2021 a las 17:41
Prueba esto está funcionando
options: {
scales: {
xAxes: [{
ticks: {
fontSize: 10
}
}]
}
}
options: {
locale: 'fa-IR',
responsive: true, // Instruct chart js to respond nicely.
maintainAspectRatio: false, // Add to prevent default behaviour of full-width/height
plugins: {
legend: {
position: 'top',
labels: {
font: {
size: 9,
family:'vazir'
}
}
},
title: {
display: true,
text: chart_info.chartTitle,
font: {
size: 16,
family:'vazir'
}
},
tooltip: {
bodyFont: {
size: 13,
family:'vazir'
}
}
},
scales: {
x: {
ticks: {
font: {
size: 10,
family:'vazir'
}
}
},
y: {
ticks: {
font: {
size: 10,
family:'vazir'
}
}
}
}
}
Intenta ver si esto funcionará
{
...
scales: {
xAxes: [{
fontSize: 40
...
}]
}
}
no parece scaleFontSize
es una propiedad válida.
-
Sorprendentemente es obras para el
scaleLabel
que está mal documentado.– David Konrad
28 de noviembre de 2016 a las 3:54
Usama Fayyaz
Prueba esto
Chart.defaults.global.defaultFontSize = 8;
-
Sorprendentemente es obras para el
scaleLabel
que está mal documentado.– David Konrad
28 de noviembre de 2016 a las 3:54
Abdul Hamid
Pruebe esta sencilla solución:
myChart.options.scales.yAxes[0].ticks.fontSize = 40 ;
myChart.update();
stackoverflow.com/a/48580585/7186739
– Billú
2 de febrero de 2018 a las 10:24
Se debe cambiar el título, ya que la pregunta y las respuestas se enfocan en las etiquetas de los ejes y no en la etiqueta real del eje, lo cual es confuso si desea cambiar el tamaño de fuente de la etiqueta del eje.
– Pequeño friki
14 de junio de 2019 a las 7:58