Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

CSS overrides not working

See original GitHub issue
  • 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 #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 #101 and #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? bitmoji

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:1
  • Comments:10 (1 by maintainers)

github_iconTop GitHub Comments

NaiLicommented, Apr 20, 2018

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

robertofabrizicommented, Mar 28, 2018

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Custom Class Not Overriding Other CSS - html - Stack Overflow
You have to add the class before the element to specify under what circumstances which item is being selected. Thus
Read more >
Css override not working - OutSystems
Hello,. I'm trying to override (display: inline-block; ) in Basic.css file by creating a class in my own css file:
Read more >
How to fix style override issues - EventON - Documentation
Step 3: Write a CSS style to override this issue. Get the class name of the style that is overridden in EventON (in...
Read more >
How to Override CSS Styles - W3docs
Example of overriding CSS style with the ID selector:​​ It's only applicable if both the ID and the Class are used in the...
Read more >
Local Overrides Not Working - Google Groups
Configure (enable) Local Overrides. From DevTools > Network panel, right click on webpage1. html and select 'Save for overrides' (only showing up for...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found