Load region with C3.js

Question

I am trying to dynamically load a region to a line chart in C3.js using the load api.

The column data loads fine but there is no change to the regions. I don't want to use the regions.add api because I require a dashed line for this project.

chart.load({
    columns:[
        ['data2', 10, 30, 20, 50, 40, 60, 50]
    ],
    regions: {
         'data2': [{'start':3, 'style':'dashed'}]
    }
    });

I would really appreciate any help, I am so stuck - thank you!

Cholecystotomy

First, your regions doesn't look like what their api demonstrates. Second, regions sits outside of data not inside like columns. To change these dynamically you might have to do something different. – Malposition

Thanks for the response. I am not using the regions api as that cannot give a dashed line effect. I am using the line chart with regions approach where regions is put inside the data object as in this example c3js.org/samples/simple_regions.html – Cholecystotomy

Touche. You can't emulate the effect with CSS? Otherwise, you might want to consider opening an issue on the official github page. – Malposition

No. The line is svg. I have opened it on Github but so far nobody knows. – Cholecystotomy

chart.regions.add({axis: 'x', start: '3', end: '3', class: 'region_new'}) – Godden

@Godden in c3 the dashed region is made using the d attribute of the path. Its not made using CSS style as you are assuming, adding a class will apply the style to full path and not to the dashed region. :) – Bremser

Answer 1

As per their documentation c3 api load you can only pass these values in load call

url, json, rows, columns, classes, categories, axes, colors, type, types, unload and done

To add regions to load call you need to raise issue with them on their github pages or check if one already exists

As of now only solution is to use regions.add but it does not support dash style as of now

check Demo:Fiddle

You can raise an issue to add dash style instead of adding regions to load call as it may be easier and faster for them to fix

Nook

Updated the demo link, copied the whole javascript as fiddle was blocking raw github content url – Nook