1

Buenas estoy utilizando chartjs y necesito saber que propiedad se puede utilizar para modificar la orientación y fuente de un gráfico de barras para ser mas preciso del los datos del eje x como se muestra a continuación, ya que se ven con mucho espacio y demasiado grande, si alguien sabe se los agradecería introducir la descripción de la imagen aquí

Mi código es el siguiente:

   const barsChartOptions = computed<ChartOptions<'bar'>>(() => ({
          indexAxis: 'x',
          scales: {
            x: {
                
              fontSize: 5,

              grid: {
                display: true,
                drawBorder: false,
              },
              beginAtZero: true,
            },
            y: {
              grid: {
                display: false,
                drawBorder: false,
              },
            },
          },
          plugins: {
           datalabels:{
            display: false,
           },
           
            legend: {
              display: false,
            },
          },
        }));

        const dataSet = distribucionUseCase.mapDataset(
          this.getDistribucion as IDistribucion[],
        );
        const dataValues = computed<ChartData<'bar'>>(() => ({
          labels: dataSet.labels,
          datasets: [
            {
              data: dataSet.datasets,
              backgroundColor: [
                '#32CD32',
                '#8B4513',
                '#FFFF00',
                '#4169E1',
                '#4169E1',
                '#800080',
                '#bef539',
                '#769b81',
              ],
              barThickness: 20,
              barPercentage: 1,
              categoryPercentage: 1,
             
              
            },
          ],
        }));
        const { barChartProps } = useBarChart({
          chartData: dataValues,
          options: barsChartOptions,
        });
        this.distribucionOptions = barChartProps;
      });

1 respuesta 1

1

Deebs colocar la siguiente configuración:

options:{
       scales: {
          xAxes: {
           ticks: {
                    maxRotation: 90,
                    minRotation: 55,
                    font : {
                     size: 34
                    }
             },
          }
       }

Donde:

  • maxRotationy minRotation son la rotación máxima y mínima respectivamente, chartJS ajustará la mejor opción dentro de ese rango. Si requieres una rotación fija simplemente repite el valor en ambos lados
  • font es la estructura para configurar la fuente de este eje, más opciones en https://www.chartjs.org/docs/latest/general/fonts.html

EJEMPLO:

const datos = [
    {
        "year": 2022,
        "total": 1973
    },
    {
        "year": 2021,
        "total": 4044
    },
    {
        "year": 2020,
        "total": 1000
    }
];

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: datos.map(a=>a.year),
        datasets: [
            {
                label: 'Tareas Cerradas',
                data: datos.map(a=>a.total),
                borderColor: 'rgb(255, 99, 132)',
                backgroundColor: 'rgb(255, 99, 132, 0.5)',
                borderWidth: 2,
                borderRadius: 5,
                borderSkipped: false,
            }],
    },
    options:{
       scales: {
          xAxes: {
           ticks: {
                    maxRotation: 90,
                    minRotation: 55,
                    font : {
                     size: 34
                    }
             },
          }
       }
    }

});
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
<div style="width:600px;height:400px">
   <canvas id="myChart"></canvas>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.