CODEWITHSUNDEEP
javascriptc3.js
chemisax
chemisax

Reputation: 333

How to specify order of combined charts in c3.js?

I'm building a combined chart of type area and bar. The bar part of the chart is appearing under the area part so it becomes covered by the area part. Like this:

chart with order problem

I want to bring the bars in front of the area.

I've tried changing the order in data.order but it does not work.

The expected result is this:

chart with order problem

In the inspector, if I change the order of the elements manually so that c3-charts-bars is after c3-charts-lines I get the expected result but, does anyone know how to do that using the c3.js API?

Upvotes: 0

Views: 107

Answers (1)

chemisax
chemisax

Reputation: 333

I'm actually using react-c3 to wrap the c3 library so my solution was based on the GitHub issue solution.

...
oninit: () => {
    let container = ReactDom.findDOMNode(this);
    let chart = container.getElementsByClassName('c3-chart')[0];
    let bars = chart.getElementsByClassName('c3-chart-bars')[0];
    bars.parentNode.append(bars);
},
...

Upvotes: 1

Related Questions