0

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 sub chart should be less transparent or should be provided an option to set back ground color for sub chart. Is it possible? I don't see any option to set back ground color for the sub chart on documentation page. Any guidance please ...

Madasu K
  • 1,813
  • 2
  • 38
  • 72

1 Answers1

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");
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id='chart' />
Sean
  • 14,359
  • 13
  • 74
  • 124
  • Opacity is working fine but when I try to set background color using your above solution, something like d3.selectAll("svg > g:nth-child(3)").style({"background-color": "yellow"}), it is not working. Any fix for this, to set back ground color. – Madasu K Jun 01 '15 at 08:10
  • You can't style the g-element's background, but if you insert a `rect` and then colour, that, it should work. Snippet updated. – Sean Jun 01 '15 at 13:12
  • could you please help to have the same with Angularjs directive. Please see my post at http://stackoverflow.com/questions/30665391/custom-attribute-type-directive-to-set-the-background-color-of-c3-chart/30691129#30691129. – Madasu K Jun 07 '15 at 15:30