how to style style line chart points in c3js

Question

I have a general c3js question. I'm trying to make the points in a C3JS line chart "hollow" (white fill, with a colored stroke), but am having a hard time figuring out how to do that. I've tried to add my own CSS, but it gets overwritten by the direct style tag in the html.

Does anyone have any suggestions?

Thanks!

Have you tried using `!important` in your CSS to give it precedence over CSS styling from c3.js? — Henry S, May 15 '15 at 09:17

score 9 · Accepted Answer · answered May 25 '15 at 08:53

9

or you can simply use the .c3-circle class as follow :

.c3-circle {
    stroke-width: 2px;
    stroke: #fff;
}

answered May 25 '15 at 08:53

Freezystem

4,494
1
32
35

score 5 · Answer 2 · answered May 15 '15 at 14:07

5

You'd probably need to dip into the D3 code to manipulate them on the svg, something like this:

d3.selectAll("circle")
  .attr("r", 10)
  .style("fill", "white")
  .style("stroke", "black")
  .style("stroke-width", 5);

answered May 15 '15 at 14:07

Sean

14,359
13
74
124

how to style style line chart points in c3js

2 Answers2