11

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?

2
  • 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, 2015 at 17:23
  • Let me update my data to show you why I think I cant do that
    – segFault
    Mar 19, 2015 at 17:31

1 Answer 1

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

3
  • 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, 2015 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, 2015 at 20:46
  • 1
    Check out the "Line Chart with Regions" example: [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, 2016 at 9:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.