C3: Gauge - change label color

Created on 30 Jun 2016  ·  3Comments  ·  Source: c3js/c3

I would like to change the label color as my gauge is set against a black background.

.c3 text {fill: white;}

doesn't work.

Is this possible, and if so how?

Most helpful comment

This for the main label:

.c3-chart-arc .c3-gauge-value {
    fill: white;
}

and if you also want to change the min and max values:

.c3-chart-arcs .c3-chart-arcs-gauge-min {
    fill: white;
}
.c3-chart-arcs .c3-chart-arcs-gauge-max {
    fill: white;
}

All 3 comments

This for the main label:

.c3-chart-arc .c3-gauge-value {
    fill: white;
}

and if you also want to change the min and max values:

.c3-chart-arcs .c3-chart-arcs-gauge-min {
    fill: white;
}
.c3-chart-arcs .c3-chart-arcs-gauge-max {
    fill: white;
}

wow this really works, can you please guide how to change font size ?
color is working but "font-size" property not working

Hi,

The issue queue is to be used for reporting defects and problems with C3.js, in addition to feature requests and ideas.

It is not a catch-all support forum.

For general support enquiries, please use the Google Group at https://groups.google.com/forum/#!forum/c3js.

All questions involving the interplay between C3.js and any other library (such as AngularJS) should be posted there first!

Thank you!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

aishwaryak picture aishwaryak  ·  4Comments

unlight picture unlight  ·  3Comments

Shugardude picture Shugardude  ·  4Comments

DieterSpringer picture DieterSpringer  ·  4Comments

seubert picture seubert  ·  3Comments