google visualization - tipos - ¿Cómo establecer el ancho de la leyenda de Google Charts en JavaScript?

haxis google chart

Question

Estoy generando este gráfico de líneas de Google con la API de Google JS. Como puede ver, las etiquetas son muy estrechas. ¿Cómo lo hago para que todo el texto de la etiqueta esté visible?

Answer 1

Aquí hay algunos ejemplos basados ​​en los gráficos de líneas del patio de recreo del código de google . El ajuste de la opción de ancho de gráfico proporciona más espacio para las etiquetas:

new google.visualization.LineChart(document.getElementById(''visualization'')).
    draw(data, {curveType: "function",
                width: 500, height: 400,
                vAxis: {maxValue: 10},
                chartArea: {width: ''50%''}}
        );

Si es una opción, también puede colocar las etiquetas debajo del gráfico, lo que le da mucho más espacio:

new google.visualization.LineChart(document.getElementById(''visualization'')).
    draw(data, {curveType: "function",
                width: 500, height: 400,
                vAxis: {maxValue: 10},
                legend: ''bottom''}
        );

Answer 2

Existe una opción en legend.textStyle para personalizar estilos de texto de leyenda dentro de los gráficos de Google.

var options = {
                legend: { textStyle: { fontSize: 78  //size of the legend 
                } }
              }

Answer 3

Expandir la opción chartArea a un ancho del 100% resolvió el problema para mí. Al contrario de la documentación, el chartArea sí incluye la leyenda. Usé un PieChart pero la misma opción está disponible para el LineChart.

var options = {''title'':title,''width'':w,''height'':h,''chartArea'':{left:0,top:10,width:"100%"}};
var chart = new google.visualization.PieChart(document.getElementById(chartDiv));
chart.draw(data,options);

Reference .

Answer 4

Necesita hacer el cuadro más ancho o sus etiquetas más cortas.

Answer 5

Ninguna de las respuestas anteriores funcionó bien para mí. Establecer ancho a menos del 100% centra el área de trazado y deja demasiado espacio no utilizado a la izquierda. Establecerlo al 100% tampoco es una solución.

Lo que funcionó bien -ver violín de trabajo en vivo- es establecer el valor correcto para acomodar la leyenda, y luego ajustar el valor de la izquierda con el tiempo, para el título del eje Y y las etiquetas. El ancho del área de trazado se ajustará automáticamente entre estos dos márgenes fijos:

var options = {
   ...
   legend: { position: ''right'' },
   chartArea: {
      right: 130,   // set this to adjust the legend width
      left: 60,     // set this eventually, to adjust the left margin
   },
   ...
};