Support for Filling Area Between Two Ranges in LineChart

[savtym]

Description:

Currently, react-native-gifted-charts supports filling the area below a single line in a LineChart (areaChart mode). However, there is no built-in way to fill the space between two Y-values (from and to) at each X position, allowing for range-based shading (e.g., confidence intervals, tolerance bands).

I would like to request a new feature that enables defining multiple fill regions using an array of { from, to, color } objects, where each defines a range to be filled between two Y-values.

Proposed API:

<LineChart
  fillBetweenLines={[
    { from: 10, to: 30, color: 'rgba(255, 0, 0, 0.3)' },
    { from: 40, to: 60, color: 'rgba(0, 0, 255, 0.3)' },
  ]}
  width={300}
  height={200}
  color="black"
  spacing={40}
  thickness={2}
/>

Expected Behavior:

• The chart should support multiple filled regions defined by { from, to, color }.
• These regions should be drawn beneath the main line for proper layering.
• Works with both curved and non-curved line charts.

This feature would be beneficial for displaying tolerance zones, confidence intervals, and range-based shading in data visualization.

Thanks for considering this enhancement! 🚀