更改drillUpButton文本的字体颜色

Question

I wonder how to change the font color of drillUpButton text . I tried css to extract the element like: g.highcharts-button highcharts-drillup-button highcharts-button-normal text{color: blue;} However it doesn't work. Button Picture

The drillUpButton API only provide how to change the theme of the button itself but has nothing to do with the text.

drillUpButton: {
        relativeTo: 'spacingBox',
        position: {
            y: 10,
            x: 0
        },
        theme: {
           color: "#5ab7f5",
            fill: 'white',
            'stroke-width': 2,
            stroke: '#5ab7f5',
            r: 5,
            states: {
                hover: {
                    color: 'white',
                    fill: '#5ab7f5'
                },
                select: {
                    fill: '#5ab7f5'
                }
            }
        }
    },

Here is the link for reference

Answer 1

If someone wants to avoid using CSS selectors, you can add CSS style to text button using style property.

theme: {
  style: { color: "red" },
  ...
}

Answer 2

You didn't quite go far enough to tspan and you're using color instead of fill. You were also missing a couple "." when selecting the class.

Creating this rule seems to work

g.highcharts-button.highcharts-drillup-button text tspan{
  fill: blue;
}

If you don't want to type all of that out .highcharts-drillup-button text tspan should work as well.

DEMO

Answer 3

You can change the color of the text by using the highchart drillup button css styling class to apply the color to the text. The reason why simple color:red property on it wont work because it is a svg created on the run and svg also sets the fill property for the text as well which overwrites the color. On top of that you need to force your custom class colors by using the !important keyword for each property set. So just add the following class in your custom css and you drillup button text will change.

.highcharts-drillup-button text{
   color: red !important;
   fill: red !important;
}

Hope this helps.

Answer 4

Use this selector:

.highcharts-button-box+text {
  fill: red !important;
}

Example:
http://jsfiddle.net/vwdfceLz/