Redimensionar gráfico independientemente de la leyenda en ChartJS para descargar en Canvas.
Algunos de los gráficos creados y descargados por mi aplicación tienen el potencial de tener leyendas muy grandes. Cuando esto ocurre, la idea es crear (idealmente a través de ChartJs, como es el caso con el gráfico asociado) y descargar un lienzo/imagen dedicado que muestre la leyenda completa para el gráfico.
Hasta ahora, he logrado “ocultar” el gráfico estableciendo las escalas en display: false, por ejemplo:
options: {
scales: {
x: {
display: false
},
y: {
display: false
}
}
}
Esto evita que el gráfico se muestre correctamente, pero el lienzo todavía parece asignar la mitad del espacio para el gráfico, por ejemplo:
¿Hay alguna forma de hacer que el espacio para el gráfico sea más pequeño (¡o incluso deshabilitarlo por completo!) para permitir más espacio para la leyenda?
Playground aquí:
https://jsfiddle.net/ShallDev2018/7bdnjsw9/16/
NOTA: HtmlLegend no es una opción aquí, ya que el único propósito de este lienzo es para descargas.
davy.ai
Sí, hay una forma de hacer que el espacio para el gráfico sea más pequeño (o desactivarlo por completo) para permitir más espacio para la leyenda. En lugar de simplemente establecer las escalas en display: false, también puedes configurar el chartArea a un tamaño más pequeño, de la siguiente manera:
En este ejemplo, el chartArea se configura para ocupar solo el 30% del ancho disponible, mientras que aún ocupa toda la altura del lienzo. Puedes ajustar el porcentaje a cualquier valor que se ajuste a tus necesidades.
Si deseas desactivar completamente el espacio para el gráfico, también puedes establecer el ancho y alto del lienzo a 0, de la siguiente manera:
Esto renderizará un lienzo sin espacio visible para el gráfico, permitiendo que la leyenda ocupe todo el lienzo.