CODEWITHSUNDEEP
javascripthighchartsangular2-highcharts
Saif
Saif

Reputation: 1905

Highcharts how to enable scrollbar without setting min or max

As mentioned here in this answer enabling scrollbars on a highchart axis is a fairly easy process of simply enabling following options:

Option 1

You will need to use highstock.js and instead of rendering a stock chart, you have to render a highchart.

Then enable the scroll bar

  scrollbar: {
        enabled: true
    }

Option 2

Try setting min & max attributes to the x-axis.

xAxis: {
            categories: [...],
            min: 0,
            max:9
}

one thing which is wrongly presented in the option 1, is that you have to perform one additional step of setting min/max as well, i.e. only enabling scrollbar isn't enough on its own.

The issue in my particular case is setting min and max, as the data is dynamic and its not possible to statically pre assign min and max.

enter image description here

Setting static max = 4 in this fiddle does solves the issue for the static data set but this doesn't works well when number of data points is less than 4, e.g. in this case:

enter image description here

Also in my particular case users can expand chart in a modal, which is supposed to be bigger and show more information when smaller cards/charts are not enough for showing large amount of data sets, e.g. as mocked in this demo. In this case max = 4 is enough for the original chart height but not when expanded because it has more empty spaces when max = 4. So it would be better if we don't exactly need to set max, Instead if we can allow scroll by setting only bar width like following that makes more sense.

pointWidth: 25
pointPadding: 0.2

but setting only this doesn't work in the above fiddle.

enter image description here

P.S scrolling is not exactly enabled in the above stackBlitz gif, but it should be working fine in the provided blitz demo.

Is there any way we can enable scrollbars and not have to set min or max instead only pointWidth or may be some thing else and have scroll work as expected?

Upvotes: 0

Views: 2316

Answers (1)

ppotaczek
ppotaczek

Reputation: 39139

You need to use the max property, but you can calculate and set it dynamically:

function setAxisMax() {
    var pointWidth = this.series[0].options.pointWidth,
        padding = 20;

    this.update({
        xAxis: {
            max: this.plotHeight / (pointWidth + padding) - 1
        }
    }, true, true, false);
}

Highcharts.chart('container', {
    chart: {
        ...,
        events: {
            load: setAxisMax
        }
    },
    ...
});

Live demo: http://jsfiddle.net/BlackLabel/evmkqrcw/

API Reference: https://api.highcharts.com/highcharts/xAxis.max

Upvotes: 1

Related Questions