rendering area behind bar

[michkami]

Description

When we create a chart with 2 data rows, data1 being area-spline, and data2 being a bar, the bars will be rendered behind the area, not considering the columns order of the data.
This makes the parts, where the area overlapps the bars look blueish:

The unwanted effect here is that the area will always change the color of the overlapped bar as it was decided to always render the bars first:

The wanted result is only the area being rendered behind the bars, and the line and points still being rendered in front of the bars like this:

Is there any way to achieve this without changing the way the data types are rendered in billboard?

There was also similar issue created in c3 in 2015 which I will also link here: c3js/c3#1446

[netil]

Hi @michkami, this happens because line types(including area) nodes area generated and controlled as a group, and they're rendered after bar node in DOM hierarchy order.

The simple workaround is manipulate area node hierarchy order to stay before the bar node element as:

  onafterinit: function() {
    const bars = this.$.main.select(".bb-chart-bars").node();
    const areas = this.$.main.selectAll(".bb-areas").nodes();

    areas.forEach(v => {
      bars.insertAdjacentElement("beforebegin", v);
    });
  }

I'm not sure how this functionality is needed, but I'll be considering for the next release.