BarChart: Highlight behind bars

[huntabyte]

Currently, the Highlight rect is always positioned in front of the bars in the DOM order. It would be very beneficial to have a way to render it before the bars in the DOM order so it can be displayed behind the bars without having the highlight color overtop of the bars.

Edit I lied, the area is rendered before the bars so it should be behind them and is likely a skill issue on my end!

Second edit: The highlighted area has a z-index of 50, perhaps that's my issue?

CleanShot.2024-10-22.at.20.27.36.mp4

Notice how the highlight is always rendering on top of the bars thus changing the color of them in the process.

[techniq]

Hey @huntabyte, we chatted on Discord but leaving this here for anyone else. Currently all highlights on the simplified charts are rendered on top of the marks, but you can turn off the "default highlight" and render your own in the below-marks slot

<Preview data={dateSeriesData}>
  <div class="h-[300px] p-4 border rounded">
    <BarChart data={dateSeriesData} x="date" y="value" props={{ highlight: { area: false } }}>
      <svelte:fragment slot="below-marks">
        <Highlight area={{ class: 'fill-surface-content/10' }} />
      </svelte:fragment>
    </BarChart>
  </div>
</Preview>

I added an example to the docs.

In the future, we might support <BarChart highlight={false}> to completely disable the built-in highlight, or allow customizing the render order of each slot, similar to Svelte UX's <Pagination show=[...]>