Fill area above line in 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: