trying to use highchart xrange to display large number of categories

Question

I'm trying to use highcharts xrange to display a large number of categories (>20). currently, I can show the data, but the categories are automatically resized so that they fit the height of the chart

What the client wants is to a. configure the height of the categories to absolute size b. display a vertical scrollbar

Is this possible?

Thanks, Nadav

Answer 1

You can use scrollablePlotArea and dynamically calculate the minHeight property. For example:

chart: {
    events: {
        load: function(){
            var categoryWidth = 50,
                points = this.series[0].points;
            
            this.update({
                chart: {
                    scrollablePlotArea: {
                        minHeight: this.chartHeight - this.plotHeight + categoryWidth * points.length
                    }
                }
            }, true, true, false);
        }
    },
}

---

Live demo: http://jsfiddle.net/BlackLabel/5qp7rv1j/

API Reference:

https://api.highcharts.com/highcharts/chart.scrollablePlotArea

https://api.highcharts.com/class-reference/Highcharts.Chart#update