C3 area line graph with different colors for different sections

Question

I'm using the C3 graph library to draw some graphs in my Javascript application.

What I'm trying to accomplish is to draw various parts of my area line graph sections in different colors. Specifically what I want to achieve is that when my graph goes down that the specific area section (column) is draw in red until the value goes up again, where it should revert back to it's default blue color.

I have put together a simple JSFiddle to demonstrate what I currently have:

c3.generate({
    bindto: "#chart",
    data: {
        columns: [
            ['data', 30, 200, 100, 400, 150, 250, 40, 134, 60],
        ],
        types: {
            data: 'area'
        }
    }
});

In this example I want the area section (column) between index 1 and 2 to be colored red.

score 0 · Answer 1 · answered Aug 14 '16 at 10:44

You ca do this with css:

.c3-event-rects{
    fill-opacity: 1!important;
}
.c3-event-rect{
    fill:#ccc;
}
.c3-event-rect.c3-event-rect-0{
    fill:#F0F4C3;
}
.c3-event-rect.c3-event-rect-1{
    fill:#8BC34A;
}
.c3-event-rect.c3-event-rect-2{
    fill:#00BCD4;
}

http://jsfiddle.net/MadalinaTn/j97ht8no/2/

C3 area line graph with different colors for different sections

1 Answers1