How to highlight the high and low values with different colors in an area series?

Question

In LightningchartJS we can highlight the lower range as well as the higher range with different colors in an area range series. Is it possible to achieve the same in other area charts? In the current scenario, I have a bipolar area chart in which I would like to mark the high and low ranges. I tried using setHighStrokeStyle but it seems to work only for area range series do we have something similar for area series as well?

tried the following code

const recordRangeStrokeFillStyleHigh = new SolidLine().setFillStyle(new SolidFill({ color: ColorRGBA(250, 91, 70) }))
const areaProfit = xyChart.addAreaSeries({ type: AreaSeriesTypes.Positive })
areaProfit.recordRange.setHighStrokeStyle(recordRangeStrokeFillStyleHigh)

Image of Area series without the highlight

Image with high and low ranges highlighted wit different colors

Answer 1

For setting fill style of a highlight area in the bipolar area series, you should use set positive fill style highlight:

.setPositiveFillStyleHighlight( new SolidFill( { color: ColorRGBA( 255, 255, 255 ) } ) )
.setNegativeFillStyleHighlight( new SolidFill( { color: ColorRGBA( 10, 10, 10 ) } ) )

Answer 2

In your code snippet, you're using Positive Area Series, which is a monopolar area. It will not draw anything below its baseline value.

Negative Area Series is similar to the Positive Area Series, where it will only draw the area for values above the baseline value.

They can both be styled by using areaSeries.setFillStyle or areaSeries.setStrokeStyle methods to style the fill and border respectively.

For the Bipolar AreaSeries, you can use

// Change fillStyle for positive area
areaSeries.setPositiveFillStyle( new SolidFill( { color: ColorRGBA( 255, 255, 255) } ) )
// Change strokeStyle for positive area
areaSeries.setPositiveStrokeStyle( new SolidLine( { fillStyle: new SolidFill( { color: ColorRGBA( 255, 255, 255) } ), thickness: 2 } ) ) 

to change the positive area style, or

// Change the fillStyle for negative area
areaSeries.setNegativeFillStyle( new SolidFill( { color: ColorRGBA( 255, 255, 255) } ) )
// Change strokeStyle for negative area
areaSeries.setNegativeStrokeStyle( new SolidLine( { fillStyle: new SolidFill( { color: ColorRGBA( 255, 255, 255) } ), thickness: 2 } ) ) 

to change the negative area style.