CODEWITHSUNDEEP
javascriptangularhighcharts
Bonyfus Martin
Bonyfus Martin

Reputation: 41

Highcharts area range series change plotting area dynamically

I have a chart that has area range and scatters plot series. The area range is like a container for the scatters. Basically, if one of the scatter datapoint value is less than area range datapoint value the chart looks like the following image,

Chart example image

Is there any setting in highcharts to set the area range series span to the axis start? or if not guess I have to recalculate the minimum value (get from sccatter series if it is the minimum) for the area range and redraw?

Thanks,

Upvotes: 2

Views: 269

Answers (1)

ppotaczek
ppotaczek

Reputation: 39079

You can use area series instead of arearange, but additionally you need to exclude them in calculating axis extremes and set threshold, for example:

(function(H) {
    H.wrap(H.Axis.prototype, 'getSeriesExtremes', function(proceed) {
        var series = this.series.slice();
        this.series = series.slice(2);

        proceed.apply(this, Array.prototype.slice.call(arguments, 1));

        this.series = series;
    });
}(Highcharts));

Highcharts.chart('container', {
    ...,

    series: [{
            ...,
            threshold: -Infinity
        },
        {
            ...,
            threshold: Infinity
        },
        ...
    ]
});

Live demo: https://jsfiddle.net/BlackLabel/2qbgo8c4/

API Reference: https://api.highcharts.com/highcharts/series.area.threshold

Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

Upvotes: 1

Related Questions