Need To Set Back Ground Color For C3 Sub Chart Or Make It Less Transparent Than Main Chart

When I am using sub chart, one problem I am facing with user experience is both Main chart and Sub chart are of same importance, I mean same color, etc Instead what I expect is the

Solution 1:

You'd need to style it manually. I don't see that C3 uses any particular selector to distinguish the subchart from the main chart, so you might have to use n-th child to do it. Something like in the example code below.

var chart = c3.generate({
    data: {
        columns: [
            ['sample', 30, 200, 100, 400, 150, 250]
        ]
    },
    subchart: {
        show: true
    }
});

d3.selectAll("svg > g:nth-child(3)").insert("rect", ":first-child").attr("width", "100%").attr("height", "100%").attr("fill", "yellow");

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script><linkhref="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css"rel="stylesheet" /><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script><divid='chart' />