Change areas and lines position when area's opacity is 1

[qkreltms]

Description

How about adding an option changing areas and lines position when area's opacity set to 1?

When I set area's opacity 1, lines are look faint.

When i changed each position it looks good

I was able to fix this by adding these lines

  const changeLinesAndAreasPosition = (ctx: any) => {
    const lines = d3.select<SVGElement, SVGElement>(ctx.element).selectAll<SVGGElement, SVGGElement>(".bb-chart-line > .bb-lines").nodes();
    d3.select<SVGGElement, SVGElement>(ctx.element).selectAll<SVGGElement, SVGGElement>(".bb-chart-line > .bb-areas").nodes().forEach((area, index) => {
      if (area.parentNode) {
        area.parentNode.insertBefore(area, lines[index]);
      }
    })
  }

Steps to check or reproduce

https://codepen.io/qkreltms/pen/JjGwLgo

[netil]

Hi @qkreltms, the only difference between the node stacking order changes is to make line to be positioned over area element. Hence to make line to be rendered more sharper.

If that is something you need, how about styling with css prop. rather than handling node stacking?
Adding stroke-width will make that.

.bb-area-data1 {
  opacity: 1 !important;
  fill: lightgray !important;
  stroke-width: 1px;
}

[qkreltms]

@netil I've already tried, but it looks not clear than changing node stacking and also still looks faintstroke-width: n(n<1)

[netil]

similar as grid.front option can be implemented for that.

area: {
    // default is 'true'. false make to be positioned behind the line element
    front: false,  
}