Baseline series should use min/max price range in visible range to calculate gradient stops

Lightweight Charts Version: 3.7.0

Steps/code to reproduce:

• Add BaselineSeries
• Set a custom price scale
• Assign scaleMargins

var series = chart.addBaselineSeries({
  priceScaleId: 'my-custom-scale',
  scaleMargins: {
    top: 0.8,
    bottom: 0,
  },
  bottomFillColor2: 'rgba(0,0,0,1)',
  bottomFillColor1: 'rgba(0,0,0,0)',
  topFillColor2: 'rgba(0,0,0,0)',
  topFillColor1: 'rgba(0,0,0,1)',
  baseValue: { type: 'price', price: 180 },
});

Actual behavior: The baseline gradient does not fully render the assigned color stop from the configuration.

Expected behavior: The baseline gradient should use the scaleMargins to compute the color stops.

// src/renderers/baseline-renderer.ts:21
const gradient = ctx.createLinearGradient(0, 0, 0, data.bottom);

data.bottom should not be the height of the current chart, but the height of the series with the current scaleMargins.

Screenshots: Expected here would be a full-black (#000000) top and bottom gradient.

Without scale margins:

Scale margins moved to top:

Scale margins moved to bottom:

CodeSandbox/JSFiddle/etc link: https://jsfiddle.net/0r3cLmjd/51/

[EastingAndNorthing]

Have you tried to move a series after that vertically? How the color is changing on this?

Yes, this will give the same result, a color change while moving the chart up/down. See https://jsfiddle.net/ean9vj3r/1/

What do you think about that @EastingAndNorthing?

I agree, compared to the baseline series on Tradingview, it does seem more logical to use the entire scale as a gradient if we’re talking about percentage values.

@EastingAndNorthing Do you still want to create a pull request for that?

Yes. I’ll also add a few lines to check whether the base value is price, leaving the upcoming percentage scale at 0..height.

[EastingAndNorthing]

Regarding your second comment, I think the most logical situation would be that the gradient is simply based on the min/max values of the series (or well, the top/bottom of the pane).

Having extra options for the start/end point in the API would seem cluttered, in my opinion 👍