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











up vote
5
down vote

favorite












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'));









share|improve this question









New contributor




G. Egli is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.




















  • From Review: Please also add the source code to the body of your question.
    – sɐunıɔןɐqɐp
    2 days ago






  • 1




    This is a bug. I reported it on Highcharts github as a new issue. See: github.com/highcharts/highcharts/issues/9357.
    – Wojciech Chmiel
    2 days ago















up vote
5
down vote

favorite












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'));









share|improve this question









New contributor




G. Egli is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.




















  • From Review: Please also add the source code to the body of your question.
    – sɐunıɔןɐqɐp
    2 days ago






  • 1




    This is a bug. I reported it on Highcharts github as a new issue. See: github.com/highcharts/highcharts/issues/9357.
    – Wojciech Chmiel
    2 days ago













up vote
5
down vote

favorite









up vote
5
down vote

favorite











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'));









share|improve this question









New contributor




G. Egli is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.











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'));






highcharts






share|improve this question









New contributor




G. Egli is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.











share|improve this question









New contributor




G. Egli is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.









share|improve this question




share|improve this question








edited 2 days ago





















New contributor




G. Egli is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.









asked 2 days ago









G. Egli

262




262




New contributor




G. Egli is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.





New contributor





G. Egli is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.






G. Egli is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.












  • From Review: Please also add the source code to the body of your question.
    – sɐunıɔןɐqɐp
    2 days ago






  • 1




    This is a bug. I reported it on Highcharts github as a new issue. See: github.com/highcharts/highcharts/issues/9357.
    – Wojciech Chmiel
    2 days ago


















  • From Review: Please also add the source code to the body of your question.
    – sɐunıɔןɐqɐp
    2 days ago






  • 1




    This is a bug. I reported it on Highcharts github as a new issue. See: github.com/highcharts/highcharts/issues/9357.
    – Wojciech Chmiel
    2 days ago
















From Review: Please also add the source code to the body of your question.
– sɐunıɔןɐqɐp
2 days ago




From Review: Please also add the source code to the body of your question.
– sɐunıɔןɐqɐp
2 days ago




1




1




This is a bug. I reported it on Highcharts github as a new issue. See: github.com/highcharts/highcharts/issues/9357.
– Wojciech Chmiel
2 days ago




This is a bug. I reported it on Highcharts github as a new issue. See: github.com/highcharts/highcharts/issues/9357.
– Wojciech Chmiel
2 days ago












1 Answer
1






active

oldest

votes

















up vote
0
down vote













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



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


Check API






share|improve this answer








New contributor




G. Egli is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.


















    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });






    G. Egli is a new contributor. Be nice, and check out our Code of Conduct.










     

    draft saved


    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53203061%2fhighstock-chart-navigator-displays-the-wrong-area-in-negative-color%23new-answer', 'question_page');
    }
    );

    Post as a guest
































    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes








    up vote
    0
    down vote













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



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


    Check API






    share|improve this answer








    New contributor




    G. Egli is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
    Check out our Code of Conduct.






















      up vote
      0
      down vote













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



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


      Check API






      share|improve this answer








      New contributor




      G. Egli is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.




















        up vote
        0
        down vote










        up vote
        0
        down vote









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



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


        Check API






        share|improve this answer








        New contributor




        G. Egli is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
        Check out our Code of Conduct.









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



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


        Check API







        share|improve this answer








        New contributor




        G. Egli is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
        Check out our Code of Conduct.









        share|improve this answer



        share|improve this answer






        New contributor




        G. Egli is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
        Check out our Code of Conduct.









        answered yesterday









        G. Egli

        262




        262




        New contributor




        G. Egli is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
        Check out our Code of Conduct.





        New contributor





        G. Egli is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
        Check out our Code of Conduct.






        G. Egli is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
        Check out our Code of Conduct.






















            G. Egli is a new contributor. Be nice, and check out our Code of Conduct.










             

            draft saved


            draft discarded


















            G. Egli is a new contributor. Be nice, and check out our Code of Conduct.













            G. Egli is a new contributor. Be nice, and check out our Code of Conduct.












            G. Egli is a new contributor. Be nice, and check out our Code of Conduct.















             


            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53203061%2fhighstock-chart-navigator-displays-the-wrong-area-in-negative-color%23new-answer', 'question_page');
            }
            );

            Post as a guest




















































































            Popular posts from this blog

            Guess what letter conforming each word

            Port of Spain

            Run scheduled task as local user group (not BUILTIN)