VisArea gradient doesn't work properly with non-zero yDomain

[caiotarifa]

When using a custom yDomain that doesn't start at zero, the gradient in VisArea component doesn't render properly. The background gradient seems to be calculated from y=0 rather than from the minimum value in the yDomain.

Minimal reproduction (Vue):

<template>
  <VisXYContainer :data="data" : svg-defs="svgDefs" :y-domain="[145, undefined]">
    <VisLine :x="d => d.x" :y="d => d.y" />
    <VisArea :x="d => d.x" :y="d => d.y" color="url(#gradient)" />
  </VisXYContainer>
</template>

<script setup>
const svgDefs = `
  <linearGradient id="gradient" gradientTransform="rotate(90)">
    <stop offset="0%" stop-color="#3366FF" stop-opacity="1" />
    <stop offset="100%" stop-color="#3366FF" stop-opacity="0" />
  </linearGradient>
`;

// Sample data with y values that don't include zero
const data = [
  { x: 1, y: 150 },
  { x: 2, y: 145 },
  { x: 3, y: 155 },
  { x: 4, y: 148 }
];
</script>

[lee00678]

Hi @caiotarifa can you clarify your question a little bit? I'm not sure why you want the yDomain to be undefined, I'm getting different results for :y-domain="[160, 0]" vs :y-domain="[160, 50]"

https://stackblitz.com/edit/9hzar2cp?file=src%2FApp.vue

[rokotyan]

@lee00678 For reference: I use undefined in the domain quite often to allow the chart calculate it.

[caiotarifa]

Hi @lee00678.

undefined is a documented behavior, it allows the chart library to auto calculate the maximum value.

The problem here, as demonstrated in your prints, is: any value in yDomain should not interfere with the gradient distribution.

[lee00678]

Hi @lee00678.

undefined is a documented behavior, it allows the chart library to auto calculate the maximum value.

The problem here, as demonstrated in your prints, is: any value in yDomain should not interfere with the gradient distribution.

I see, you are right, does seem like an issue.