es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo aumentar la brecha entre categorías o etiquetas en react-chartjs-2.

16 Jun, 2023 Programación

Estoy trabajando en react-chartjs-2 y quiero aumentar la separación entre las etiquetas para que se ajuste al desplazamiento horizontal.

const data = {
labels: labels,
datasets: [{
axis: ‘y’,
label: ‘Gráfico de líneas’,
data: [7, 6, 2, 7, 6, 7, 8, 7]
fill: false,
backgroundColor: [
‘rgba(255, 99, 132, 0.2)’,
‘rgba(255, 159, 64, 0.2)’,
‘rgba(255, 205, 86, 0.2)’,
‘rgba(75, 192, 192, 0.2)’,
‘rgba(54, 162, 235, 0.2)’,
‘rgba(153, 102, 255, 0.2)’,
‘rgba(201, 203, 207, 0.2)’
],
borderColor: [
‘rgb(255, 99, 132)’,
‘rgb(255, 159, 64)’,
‘rgb(255, 205, 86)’,
‘rgb(75, 192, 192)’,
‘rgb(54, 162, 235)’,
‘rgb(153, 102, 255)’,
‘rgb(201, 203, 207)’
],
borderWidth: 2
}]
};

Intenté agregar opciones, pero no está ayudando.

Enlace https://www.npmjs.com/package/react-chartjs-2

Nota: En la parte superior de este gráfico tengo imágenes que muestran el registro relacionado con este gráfico. Las imágenes tienen desplazamiento horizontal, pero el gráfico no lo tiene. Si aumentamos la separación entre los círculos del gráfico, se ajustará a la separación de las imágenes.

Puede ver la separación de las imágenes. El resto de las imágenes están en un desplazamiento horizontal y si se aumenta la separación, también quiero que el gráfico se desplace horizontalmente.

El resultado final debería ser así.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para aumentar la separación entre etiquetas en react-chartjs-2, se puede utilizar el objeto options para establecer las propiedades barPercentage y categoryPercentage del objeto scales.xAxes. Aquí hay un ejemplo:

    const options = {
  scales: {
    xAxes: [
      {
        barPercentage: 0.8,
        categoryPercentage: 0.9,
      },
    ],
  },
};

<line data="{data}" options="{options}"></line>

    Al establecer la propiedad barPercentage en 0.8 y la propiedad categoryPercentage en 0.9, aumentará la separación entre etiquetas y el gráfico será más ancho. Puede ajustar estos valores para obtener la separación deseada.

    Tenga en cuenta que estas propiedades solo afectan a los gráficos de barras y líneas. Para otros tipos de gráficos, es posible que deba ajustar diferentes propiedades. Consulte la documentación de react-chartjs-2 para obtener más detalles.

Comments are closed.