C3: Can we set the color of the axis?

[panubear]

Hi, Is there any way to set the color of X & Y axis? I find that we could set the tick text and text label from c3.css but I don't know how to change the color of axis reference line.

[masayuki0812]

Hi @panubear , You can use .c3-axis-x and .c3-axis-y to change the style. Please see this fiddle http://jsfiddle.net/2fLPX/

I'll add .c3-axis class to all axis on next version. After that, you could write a style for all axis like this:

.c3 .c3-axis path, .c3 .c3-axis line {
  ...
}

[panubear]

:+1: Thank you so much for your kindly help. Just let you know that you mixed-up the jsfiddle already.

[masayuki0812]

Oh sorry.. the correct fiddle is here http://jsfiddle.net/dthM9/

[panubear]

Hi, I did not see ".c3 .c3-axis-x path, .c3 .c3-axis-x line" & ".c3 .c3-axis-y path, .c3 .c3-axis-y line" on version 0.1.42 yet. It would be great if you could add this on the next version.

[masayuki0812]

Hi, Sorry for lying.. I added the class by the commit above. This commit will be included in next release.

[panubear]

Many thanks. :100:

[bkeys]

Thank you for saving my ass

[ceremcem]

Here is my current css to style axis, ticks and the legend text:

.inverted .c3 .c3-axis-x path,
.inverted .c3 .c3-axis-x line,

.inverted .c3 .c3-axis-y path,
.inverted .c3 .c3-axis-y line {
    stroke: white;
}

.inverted .c3 .c3-axis-x g,
.inverted .c3 .c3-axis-y g,
.inverted .c3 .c3-legend-item-data text {
    fill: whitesmoke;
}

Add .inverted class to the container (.chart) and you're set to go.

[javierpacareu]

@ceremcem I used your style and added a couple of things:

.inverted .c3 {
    background-color: #4F5E63;
}
.inverted .c3 .c3-axis-x path,
.inverted .c3 .c3-axis-x line,
.inverted .c3 .c3-axis-y path,
.inverted .c3 .c3-axis-y line {
    stroke: white;
}

.inverted .c3 .c3-axis-x g,
.inverted .c3 .c3-axis-y g,
.inverted .c3 .c3-legend-item-data text,
.inverted .c3 .c3-axis-y-label,
.inverted .c3 .c3-axis-x-label,
.inverted .c3 .c3-legend-item {
    fill: whitesmoke;
}

/*when displaying the data on the chart */
.inverted .c3 text.c3-text { 
    fill: whitesmoke!important;
    stroke: whitesmoke!important;
    stroke-opacity: 0.3!important;
}

/* for the tooltip text color */
.inverted .c3 .c3-tooltip-container {
    color:darkgrey;
}

Looking like this:

I was trying to make it look like Excel style hope it helps
Cheers