Feature request: Regions (dashed lines) for bar charts/area step charts

[ndabAP]

It would be cool to have regions available for bar charts/area step charts. It's especially useful for trending future values. I made a jsfiddle with the current state:

http://jsfiddle.net/11pmskwj/1/

[aendra-rininsland]

@ndabAP Interesting; by this you mean you want the ability to shade them differently? Have an example of what it should look like?

[ndabAP]

Sure :)

Made this in a rush:

[ahalota]

Has anyone looked at this recently? I'm trying to do the same thing. I can take a shot at it, but I'm not familiar with d3 or the code used in c3 really, so I'll see how that goes.

[ahalota]

Below is code for a quick fix that seems to make this work. I don't how to work with the different partial files shown in github so I just edited right into the main one on my end, so this is more for informational purposes.

I also don't think I integrated my code very well, and didn't do any check for how it reacts with large data sets, etc., but hopefully this can at least help out the next person trying to do this. Someone who knows the code better can probably work with this and fit it in.

In c3.js, I added the following line to CLASS variable, near line 5600: barRegion: 'c3-bar-region',

I updated this function. It was near line 5700, surrounded by similar functions:

c3_chart_internal_fn.classBar = function(d) {
    return this.classShape(d) + this.generateClass(CLASS.bar, d.index);
}

I replaced that function with this one:

c3_chart_internal_fn.classBar = function (d) {
        var barRegion = ' ';
        if (this.config.data_regions[d.id]){ 
            for (var i = 0; i < this.config.data_regions[d.id].length; i++){
                if (d.index >= this.config.data_regions[d.id][i]['start'] && d.index <= this.config.data_regions[d.id][i]['end']){
                    barRegion+= CLASS.barRegion;
                break;
                }
            }
        }
        return this.classShape(d) + this.generateClass(CLASS.bar, d.index) + barRegion;
    };

Then in my c3.css, I added a class that looks the way I want my dashed bars to look:

/*-- Bar for dashed/transparent regions */
.c3-bar-region {
    stroke-width: 2;
    stroke-opacity: 0.7;
    stroke-dasharray: 5 5;
    fill-opacity: 0.3;
}

.c3-bar-region._expanded_ {
    fill-opacity: 0.5;
}

[ahalota]