Fill area above line in AmCharts - amcharts

Question

I'm plotting threshold violations. In some cases, thresholds are violated when the values are above the threshold. In this case, I fill the area below the line, like so:
However, in cases where values violate the threshold when they are below it, I want to fill the area above the line. Because I don't know how, the below image looks a bit weird. It'd be better if only the big dip at the beginning was in red. Like the reverse effect of the first image.
How can I fill the area above a line chart in AmCharts 3?
My current configuration (excuse the PHP, my frontend app eats JSON):
array(
'id' => 'major',
'valueAxis' => 'result',
'valueField' => 'result',
'type' => 'smoothedLine',
'lineThickness' => 2,
'lineAlpha' => 1,
'lineColor' => $threshold_at_top ? 'gold' : 'crimson',
'fillAlphas' => $threshold_at_top ? 0.001 : 0.1,
'negativeLineAlpha' => 1,
'negativeLineColor' => $threshold_at_top ? 'crimson' : 'gold',
'negativeFillAlphas' => $threshold_at_top ? 0.1 : 0.001,
'negativeBase' => $threshold_major,
'bullet' => 'none',
'balloon' => array(
'enabled' => false
)
),
array(
'id' => 'minor',
'valueAxis' => 'result',
'valueField' => 'result',
'type' => 'smoothedLine',
'lineThickness' => 2,
'lineAlpha' => $threshold_at_top ? 1 : 0,
'lineColor' => $threshold_at_top ? 'teal' : 'crimson',
'fillAlphas' => $threshold_at_top ? 0.001 : 0.1,
'negativeLineAlpha' => $threshold_at_top ? 0 : 1,
'negativeLineColor' => $threshold_at_top ? 'crimson' : 'teal',
'negativeFillAlphas' => $threshold_at_top ? 0.1 : 0.001,
'negativeBase' => $threshold_minor,
'bullet' => 'none',
'balloonText' => '<b>Result</b><br /><span style="font-size:1.5em;">[[value]]' . ( $last_datapoint->is_percentage ? ' %' : '' ) . '</span>',
'balloon' => array(
'adjustBorderColor' => false,
'color' => '#f1f1f1',
'fillColor' => '#2d87c3'
)
)
minor is the same line chart drawn on top of major.
What I've tried so far
When $threshold_at_top == true, I add another (invisible) top graph, which is simply the same value at each datapoint. This value is above all other values of the other graphs. For example, when I'm plotting a graph with results between 0 and 100, I plot this hidden top graph at 100.
Then I add it to the graphs object (as first element):
array_unshift( $options[ 'graphs' ], array(
'id' => 'top',
'valueAxis' => 'result',
'valueField' => 'top',
'type' => 'smoothedLine',
'lineAlpha' => 0,
'fillAlphas' => 0,
'bullet' => 'none',
'balloon' => array(
'enabled' => false
)
));
Then, I tell my existing major and minor graphs to 'fillToGraph' : 'top':
$options[ 'graphs' ][ 3 ][ 'fillToGraph' ] = 'top';
$options[ 'graphs' ][ 4 ][ 'fillToGraph' ] = 'top';
This gives the desired effect, but only when zoomed in enough:
When scrolling the same chart further to the right, new datapoints come into view, and it somehow messes up the area filled:

Answer 1

I reached out to AmCharts support, and they confirmed my suspicion (emphasis mine):
I checked with colleagues and I just wanted to let you know that
regular line graphs can support both fillToGraph and negativeFill at
the same time. You can see this behavior in the example below:
https://codepen.io/team/amcharts/pen/f8d6c8c5d3a2b4550a2b99f7486355e5?editors=0010
"graphs": [{
"id": "fromGraph",
"fillAlphas": 0.2,
"fillToGraph": "toGraph",
//"type": "smoothedLine",
"lineAlpha": 1,
"showBalloon": false,
"valueField": "fromValue",
"negativeBase": 40,
"negativeLineColor": "crimson"
}...
Therefore, we suggest using regular lines instead of smoothedLines, if
at all possible.
It's not possible to create my desired effect using smoothedLine graphs. See the bug below: