C3.js making line appear dashed

Question

I am using C3.js using two Y axis. I have 2 data series:

data: {
        rows: [
        ['data1', 'data2', 'data3'],
        [90, 120, 300],
        [40, 160, 240],
        [50, 200, 290],
        [120, null, 230],
        [80, null, 300],
        [90, null, 320],
    ],
        regions: {
            'data1': [{'start':0, 'style':'dashed'},],
        }
    }

When I run this I get a dashed line and then it graphs null as a dashed line along the x axis. This is not what I want. I want it to stop graphing when the data set is null. If I remove the region I get the functionality I desire but I do not get the dashed line.

Is there a way to get the dashed line without graphing the null values?

If the values are null, can you exclude them from the data array? (i.e. do a bit of pre-processing beforehand) — blurfus, Mar 19 '15 at 17:23
Let me update my data to show you why I think I cant do that — segFault, Mar 19 '15 at 17:31

score 16 · Accepted Answer · answered Mar 20 '15 at 18:09

16

As C3 uses SVG, you can employ CSS selectors to modify the appearance of its elements.

All lines in a C3 chart will have the .c3-line class, take a look: 1.

So, we might just add this to our CSS:

.c3-line{
  stroke-dasharray: 5,5;
}

Here's some documentation for stroke-dasharray.

Note the classes in the path. We can use them to target the element with CSS

answered Mar 20 '15 at 18:09

lfarroco

574
6
14

This would apply the dash to all lines. Is there a way with c3 to apply a class to a specific series? – segFault Mar 20 '15 at 20:27
1

C3 also adds a specific class to each data row. In your example it will be named ".c3-target-data1". – lfarroco Mar 20 '15 at 20:46
1

Check out the "Line Chart with Regions" example: [http://c3js.org/samples/simple_regions.html]. If you don't like dash you can add your own style: `c3-line.lineoff {visibility:hidden;}` Then specify "lineoff" instead. – arikin May 25 '16 at 09:01

C3.js making line appear dashed

1 Answers1