Tamaño de fuente de la etiqueta de los ejes de Chart.js

2 minutos de lectura

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
      ...
    }]
   }
}

  • 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


avatar de usuario de tektiv
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:

ingrese la descripción de la imagen aquí

  • Sí, pero cómo configurar fontSize para el gráfico de radar donde no x y y 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

Avatar de usuario de Usama Fayyaz
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

Avatar de usuario de Abdul Hameed
Abdul Hamid

Pruebe esta sencilla solución:

myChart.options.scales.yAxes[0].ticks.fontSize = 40 ;

myChart.update();

¿Ha sido útil esta solución?