how to use fillOpacity below to PlotLine in highchart?

Question

I am using the below code to plot a line parallel to x-axis

chart.yAxis[0].addPlotLine({
  color: "#7cb5ec",
  id: "plotline",
  value: 700,
  width: 1,
});

please check the below screenshot.

But I want to fill the area below the line i.e. as in the below screenshot.

How Can I do this?

Answer 1

Use a plot band instead of a plotline and define color as linear gradient:

chart.yAxis[0].addPlotBand({
    color: {
        linearGradient: {
            x1: 0,
            x2: 0,
            y1: 0,
            y2: 1
        },
        stops: [
            [0, '#696ec7'],
            [1, '#c4c4c4']
        ]
    },
    from: 0,
    to: 700
});

---

Live demo: http://jsfiddle.net/BlackLabel/w0hy3z6e/

Docs: https://www.highcharts.com/docs/chart-design-and-style/colors