Controlling fill direction of a Line series

Normally, a Line series with fill enabled, will fill any space between itself and a horizontal “zero line”. This tutorial will explore, how we can tame it to our specific needs.

Base chart

Consider this basic chart. It’s a two-Value axis chart with a Line series, wiggling around zero values - both horizontally and vertically.

Open in CodePen

As you can see, the fill goes all the way to the zero line. That’s the default behavior.

Modifying base value

In fact, the line fill does not extend to zero line. It rather extends to “base value”, which, coincidentally is zero.

Let’s say we don’t want the fill to go up and down, but rather fill all the way down.

To do that, we need to set Y axis’ baseValue to some low number:

yAxis.baseValue = -1000;

yAxis.baseValue = -1000;

{
  // ...
  "yAxes": [{
    // ...
    "baseValue": -1000
  }]
}

Let’s see how our chart has changed.

Open in CodePen

Should we want to fill upwards, we’d set it to some big value, instead.

Open in CodePen

Changing fill direction

Now, let’s say we want the fill to happen sideways, instead of vertically.

We can achieve that by changing baseAxis of our series. All we have to do is to tell that our Y axis is now the “base axis”.

series.baseAxis = yAxis;

series.baseAxis = yAxis;

{
  // ...
  "yAxes": [{
    // ...
    "id": "x1"
  }],
  "series": [{
    // ...
    "baseAxis": "x1"
  }]
}

Open in CodePen

Since we changed base axis to a vertical one, the vertical zero line is the target to fill now.

We can use the same baseValue to implement fill span.

Open in CodePen