CSS overrides not working

[pizzaboy314]

• C3 version: 0.4.22
• D3 version: 3.5.17
• Browser: Chrome
• OS: Windows 10

From my research, I see that I should be able to override CSS attributes of parts of C3 graphs by using the right class names. Though I can't find a guide of all c3 CSS classes that can be overrided, I've found the following examples that don't seem to actually override:

1. in Gauge - change label color #1744 I should be able to change main label color with

.c3-chart-arc {
    fill: white !important;
}

1. from my own dom inspection, I figured I should be able to set chart label (labels: true attribute) color using

.c3-chart-texts {
    fill: black !important;
}

1. in Spline Line Style (stroke-width) #101 and Set thickness of lines in timeseries & line charts #808 we should be able to set the line thickness using

.c3-line {
    stroke-width: 3px;
}

None of these things are working, even with the !important attribute set on the css class. Is this still supported?

[yasu47b]

did you check css cache? ( if using css file)
many browsers cache js and css file.

[pizzaboy314]

Yes. This is off a fresh start of server. I've also cleared cache as well.

[yasu47b]

I've also cleared cache as well.

if this means that restarting of server, it will sometimes fail clear cache.

if so try super reload. (Ctrl + Shift + r)

(I tried same c3 version and d3 but window7, it worked.)

[robertofabrizi]

C3 version: c3-0.5.1
D3 version: d3-4.13.0
Browser: Chrome
OS: Windows 10

Some CSS overrides are working for me, for example this works:
.c3-arcs { fill: red !important; stroke: red !important; color:red !important; }
but this one definitely doesn't:
.c3-chart-arcs-background { fill: red !important; stroke: red !important; color: red !important; }
If I roll back to c3-0.4.21 (and d3 to 3x) it works just fine.

[pizzaboy314]

if this means that restarting of server, it will sometimes fail clear cache.

No, I mean clearing the browser cache, for all time.

[NaiLi]

I seem to have the same problem. Any solution found?

[DemersM]

You have to include your custom css file after including c3.min.css

For instance:

<link href="c3.min.css" rel="stylesheet" />
<link href="customC3styles.css" rel="stylesheet" />

[robertofabrizi]

You have to include your custom css file after including c3.min.css

For instance:

<link href="c3.min.css" rel="stylesheet" />
<link href="customC3styles.css" rel="stylesheet" />

Well that's pretty obvious isn't it? It's still broken though...

[panthony]

This is probably more of a precedence issue between CSS rules than an issue with C3JS which is difficult to help with when no reproduction case is given.

[stefano-xy]

I would reopen this issue: I can replicate something similar with C3 0.7.20. In particular, I'm trying to apply stroke-width: 3px; to .c3-line or to .c3-line-trend (given trend the class name of the data) in a spline chart, but both are overridden by C3 styles. My css is imported after c3. There's seems to be no class or id I can easily override.

I have to force it via !important to make it work.

Is it how it's intended?