javascript - Cómo cambiar el color del texto en Highcharts

highcharts title

Question

Esto debería ser bastante simple, pero he estudiado minuciosamente la documentación de Highcharts y no puedo encontrar una opción que aborde específicamente el color del texto (en contraste, hay opciones de color específicas para fondos, bordes, líneas, etc.). Luego encontré la opción chart.style . Parece que debería funcionar, pero no funciona.

En esta demostración de jsfiddle verás que pude cambiar la familia de fuentes, pero no el color.

¿Qué me estoy perdiendo?

Answer 1

Mirando a través de highcharts.src.js, puede personalizar los elementos individuales; por ejemplo, cambié el gráfico de su ejemplo a título y el color se recogió;

  title: {
    style: {
        fontFamily: ''monospace'',
        color: "#f00"
    }
}

Answer 2

casi todas las opciones en cuadros altos pueden tener un estilo aplicado, como he hecho con el eje y en este ejemplo:

http://jsfiddle.net/h3azu/

También recomendaría ir a esta página,

http://www.highcharts.com/demo/combo-dual-axes

y hacer clic en "ver opciones" para tener una idea de otras formas en que se puede usar la opción "estilo" para colorear texto.

Answer 3

mira este ejemplo , pude cambiar los colores de las etiquetas en tu jsfiddle. aquí está todo el parámetro de opciones:

Highcharts.setOptions({
    chart: {
        style: {
            fontFamily: ''monospace'',
            color: "#f00"
        }

    },
    title: {
      style: {
         color: ''#F00'',
         font: ''bold 16px "Trebuchet MS", Verdana, sans-serif''
      }
   },
    xAxis: {
      gridLineWidth: 1,
      lineColor: ''#000'',
      tickColor: ''#000'',
      labels: {
         style: {
            color: ''#F00'',
            font: ''11px Trebuchet MS, Verdana, sans-serif''
         }
      },
      title: {
         style: {
            color: ''#333'',
            fontWeight: ''bold'',
            fontSize: ''12px'',
            fontFamily: ''Trebuchet MS, Verdana, sans-serif''

         }            
      }
   },
   yAxis: {
      minorTickInterval: ''auto'',
      lineColor: ''#000'',
      lineWidth: 1,
      tickWidth: 1,
      tickColor: ''#000'',
      labels: {
         style: {
            color: ''#F00'',
            font: ''11px Trebuchet MS, Verdana, sans-serif''
         }
      },
      title: {
         style: {
            color: ''#333'',
            fontWeight: ''bold'',
            fontSize: ''12px'',
            fontFamily: ''Trebuchet MS, Verdana, sans-serif''
         }            
      }
   },
});