Chart axis color change

Marek Delinčák

unread,

May 9, 2016, 8:04:21 AM5/9/16

to c3js

Hi guys,

I started using C3 charts and it's really cool. However I need to change all chart to white. I did it with bars but I'm unable to change color of the axis and axis labels to white. I tried several CSS selectors:

.c3 line { stroke: #fff !important; }

.c3-chart-arc .c3-gauge-value { fill: #fff !important; }

.c3-chart-line { color:#fff !important; }

.c3-grid line{ color:#fff !important; }

.c3-chart-lines{ color:#fff !important; }

.c3 path, .c3 line { fill: none; stroke: #fff !important; }

.c3-axis { color: #fff !important; }

.c3-axis-x { color: #fff !important; }

.c3-axis-x-label { color:#fff; }

but none of this helps. Do you have any idea how to do that?

Thanks a lot!

Marek

mmcc...@gmail.com

unread,

May 10, 2016, 2:43:16 PM5/10/16

to c3js

.c3 {
fill:#fff;
}

/* If you want a thin axis line, add this as well.*/
.c3-axis-x, .c3-axis-y {
fill:none;
stroke:#fff;
}

/* To change tick mark font size to 12 for example, but not font COLOR, add this:*/
.tick {
font-size: 12px
}

I spent ages on this same problem, I'd love to see them change this to the intuitive parameters. I nearly lost my mind.

Marek Delinčák

unread,

May 10, 2016, 3:58:07 PM5/10/16

to c3js, mmcc...@gmail.com

Hello,

thank you very much for your reply. I used your styles and it did change part of the chart like axis values and labels ect.. (check image.. before/after). But do you think is it possible to change last think which is black on my chart the axis itselfs? :-)

Thank you very very much! Really appreciate it!

Marek

Dňa utorok, 10. mája 2016 20:43:16 UTC+2 mmcc...@gmail.com napísal(-a):

Meredith McCarron

unread,

May 10, 2016, 5:30:30 PM5/10/16

to Marek Delinčák, c3js

Hmm, strange! The code I posted works for me (turns my axis and tick marks white. Can you double-check? It's possible that a different part of my CSS is actually making that change. Here's a direct copy-paste from code that I'm using to change the axis:

Marek Delinčák

unread,

May 10, 2016, 6:17:00 PM5/10/16

to Meredith McCarron, c3js

Hello again,

yeah it was really strange. I tried to use every single class available according to documentation and also what you recommend and set all color properties to white like this:

.c3 { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.tick { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-chart { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-chart-line { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-chart-lines { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-chart-bar { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-chart-bars { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-chart-text { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-chart-texts { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-chart-arc { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-chart-arcs { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-chart-arcs-title { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-chart-arcs-background { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-chart-arcs-gauge-unit { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-chart-arcs-gauge-max { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-chart-arcs-gauge-min { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-selected-circle { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-selected-circles { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-event-rect { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-event-rects { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-event-rects-single { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-event-rects-multiple { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-zoom-rect { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-brush { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-focused { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-region { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-regions { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-tooltip { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-tooltip-name { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-shape { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-shapes { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-line { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-lines { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-bar { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-bars { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-circle { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-circles { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-arc { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-arcs { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-area { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-areas { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-empty { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-text { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-texts { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-gauge-value { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-grid { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-xgrid { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-xgrids { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-xgrid-line { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-xgrid-lines { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-xgrid-focus { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-ygrid { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-ygrids { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-ygrid-line { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-ygrid-lines { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-axis { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-axis-x { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-axis-x-label { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-axis-y { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-axis-y-label { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-axis-y2 { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-axis-y2-label { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-legend-item { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-legend-item-event { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-legend-item-tile { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-legend-item-hidden { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

.c3-legend-item-focused { fill: #fff !important; stroke: #fff !important; color: #fff !important; }

Anyway my axis lines are still black :-) So I come up with another idea. I deleted all the previous and add only one rule:

* {

stroke: #fff !important;

}

I suddenly my axis are white :-) so I started to try every single svg element and I ended with this:

path {

stroke: #fff !important;

}

then I check the svg code and used path class domain to style my axis.

.domain{

stroke: #fff !important;

}

So here is the story if anyone else would need that too :-)

Thank you very much for your help Meredith!

Cheers!

--

Ing. Marek Delinčák
Tel.: +421 908 490 926
Skype: marek.delincak
Email: marek.d...@gmail.com

Reply all

Reply to author

Forward