Highstock chart: navigator displays the wrong area in negative-color

Question

Hi there friendly developer-folks

I have created a chart with highstock which is a superset of highchart, adding a so called 'navigator' (bottom chart to select a certain part of the chart).

I'm using an area-type chart and my goal is to color the areas above 0 green and red below 0. That works great in the actual chart but not in the navigator. Somehow the navigator doesn't display the area between the x-axis and the graph in red but the area below the graph. Here is an example: https://stackblitz.com/edit/react-58f7s8?embed=1&file=index.js

Did I miss something in the API, is that a bug or is it the expected behaviour?

Thanks in advance for your time! G.

btw: here is the code-snippet (which you can also find in the stackblitz):

import React, { Component } from 'react';
import { render } from 'react-dom';
import ReactHighstock from 'react-highcharts/ReactHighstock';

class App extends Component {

  render() {
     const config = {
        chart: {
          type: 'area',
        },
        series: [{
          color: 'green',
          negativeColor: 'red',
          data: [29.9, 71.5, 106.4, -129.2, -144.0, -176.0, 35.6, 148.5, 148.5, -216.4, 194.1, 95.6, 54.4]
      }]
    };
    return (
      <ReactHighstock config={config} />
    );
  }
}

render(<App />, document.getElementById('root'));

Answer 1

In case someone is looking for the same thing: The solution is to add threshold: 0 here:

navigator: {
  series: {
    threshold: 0,
},

Check API