[Question] How to make AreaStyle on fills between the series max-min.

[Mozdoba]

Describe your question

Hi everyone,

Is there a way to make sure the AreaStyle of my lines in the chart don't go below the blue support line? I only want to fill in area colors under my "futureSupportLines", (orange gradient) and my "priceLine" (transparent blue).

The colors should not extend below the blue "Support" line

orangeGradients := []string{
		"rgba(255, 165, 0, 0.3)", // Light orange for 1st year
		"rgba(255, 140, 0, 0.4)", // Slightly darker
		"rgba(255, 120, 0, 0.5)", // Darker
		"rgba(255, 100, 0, 0.6)", // Dark orange
		"rgba(255, 69, 0, 0.7)",  // Darkest orange for 5th year
	}

	// Add future support lines (starting from the highest year down to 1 year)
	for i := len(futureSupportLines) - 1; i >= 0; i-- {
		futureLine := futureSupportLines[i]
		line.AddSeries(fmt.Sprintf("%d-Yr Support", i+1), futureLine,
			echarts.WithLineChartOpts(
				echartOpts.LineChart{
					ShowSymbol: echartOpts.Bool(false),
					Smooth:     echartOpts.Bool(true),
				}),
			echarts.WithLineStyleOpts(echartOpts.LineStyle{
				Type:    "dashed",
				Color:   orangeGradients[i],
				Opacity: 0.8,
			}),
			echarts.WithAreaStyleOpts(echartOpts.AreaStyle{
				Color:   orangeGradients[i],
				Opacity: 0.2,
			}),
		)
	}

	line.AddSeries("Support", quantileLines[supportQuantile],
		echarts.WithLineChartOpts(
			echartOpts.LineChart{
				ShowSymbol: echartOpts.Bool(false),
				Smooth:     echartOpts.Bool(true),
			}),
		echarts.WithLineStyleOpts(echartOpts.LineStyle{
			Color: "blue",
		}),
	)

	// Add the historical price line with a distinct area color
	line.AddSeries("Price", priceLine,
		echarts.WithLineChartOpts(
			echartOpts.LineChart{
				ShowSymbol: echartOpts.Bool(false),
				Smooth:     echartOpts.Bool(true),
			}),
		echarts.WithItemStyleOpts(echartOpts.ItemStyle{
			Color:       types.BLACK,
			BorderColor: types.BLACK,
			BorderWidth: 3,
		}),
		echarts.WithLineStyleOpts(echartOpts.LineStyle{
			Color: types.BLACK,
		}),
		echarts.WithAreaStyleOpts(echartOpts.AreaStyle{
			Color:   "rgba(0, 128, 255, 0.5)",
			Opacity: 0.3,
		}),
	)

Code pieces of your question

No response

go-echarts version

v2.3.3

[Koooooo-7]

Hi @Mozdoba , I hope I could be here earlier. Sorry, I don't find an easy way to make AreaStyle squash the areas to the multi series top to low only. The AreaStyle only controls the single series.

--- Update

There introduces a new option named Origin which stands for:

	// Origin position of area.
	// By default, the area between axis line and data will be filled.
	// This config enables you to fill the area from data to the max or min of the axis data or a specified value.
	// Valid values:
	// 'auto' to fill between axis line and data (Default)
	// 'start' to fill between min axis value (when not inverse) and data
	// 'end' to fill between max axis value (when not inverse) and data
	//  number to fill between specified value and data

Plz upgrade to the latest v2.4.3 for a try, I hope it would help.