Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change the text color in Highcharts

This should be pretty simple, but I've pored over the highcharts documentation and can't seem to find an option that specifically addresses the text color (in contrast, there are specific color options for backgrounds, borders, lines, etc.). Then I came across the chart.style option. It seems like it should work -- but doesn't.

In this jsfiddle demo you'll see that I was able to change the font-family, but not the color.

What am I missing?

like image 420
benekastah Avatar asked Dec 22 '11 17:12

benekastah


People also ask

How do I change text color in highcharts?

You can use plotOptions and setting color for each series type. For example if you need changing color dataLabels plotOptions. bar. dataLabels.

How do I change colors in highcharts?

Add which colors you want to colors and then set colorByPoint to true . Reference: http://api.highcharts.com/highstock#colors. http://api.highcharts.com/highcharts#plotOptions.column.colorByPoint.

How can I change font in highcharts?

Re: Changing Font There is no one place you can change the fonts for all text, instead change options. title. style. font, options.

How do I change height in highcharts?

use chart. setSize(width, height, doAnimation = true); in your actual resize function to set the height and width dynamically. Set reflow: false in the highcharts-options and of course set height and width explicitly on creation.


2 Answers

check this example, i was able to change labels colours on your jsfiddle. here's whole options parameter:

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'
         }            
      }
   },
});
like image 83
maialithar Avatar answered Sep 28 '22 04:09

maialithar


almost every option in high charts can have style applied to it, like I have done to the y-axis in this example:

http://jsfiddle.net/h3azu/

I would also recommend going to this page,

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

and clicking "view options" to get an idea of other ways the 'style' option can be used to color text.

like image 42
BananaNeil Avatar answered Sep 28 '22 05:09

BananaNeil