0

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

Nadav
  • 357
  • 3
  • 10

1 Answers1

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

ppotaczek
  • 36,341
  • 2
  • 14
  • 24
  • Thanks, for you reply it works (seems to be some problem with the scrollbar overlaying the header & xaxis :( ) if the total height of categories is bigger than the height of the chart but in my case I need to only show the categories that have data, so it's possible that the categories height will be less than the chart height, will this still work then? – Nadav Feb 02 '21 at 08:08
  • Hi @Nadav, Let's check: http://jsfiddle.net/BlackLabel/L9s4h7kt/ - seems to work. You can also try to use scrollbar from Highstock, example: http://jsfiddle.net/BlackLabel/nqpt72bo/ – ppotaczek Feb 02 '21 at 10:38
  • Hi, thanks for you reply, The scrollbar in highstock sample looks much better: ) Is the only way to control the height of each category is to calculate the max property that plotHeight/max equals that height you want? – Nadav Feb 03 '21 at 07:16
  • Hi, yes - that seems to be the only way, http://jsfiddle.net/BlackLabel/1cj390hd/ – ppotaczek Feb 03 '21 at 11:01
  • Hi ppotaczek, thanks for you help, I followed you suggestions and made a lot of progress, But there are still some issues I'm having: 1. I seem to have ran accoss some bug in highstock 9.0.0 (or I misunderstood the documentation) If I set Highcharts.chart('container', { tooltip: { split:true, shared:false, }, I seem to actually get a shared tooltip, you need to specify split:false, shared:false to get split tooltip I've debugged it and I think the problem is in this line (in Tooltip.prototype.init ) this.shared = options.shared || this.split; – Nadav Feb 04 '21 at 16:27
  • 2. another issue I have is that I'm using Highstock & highcharts together (as explained in https://stackoverflow.com/questions/52517950/using-highcharts-highstock-together-on-same-page) and I seem to be getting different defaults when I create the graph using Highcharts.stockChart('container1', than what I get in the demos Is this possible? Thanks, Nadav – Nadav Feb 04 '21 at 16:32
  • Hi Nadav, 1. Could you add an example? I have tested the options and it works as described in the API: https://api.highcharts.com/highcharts/tooltip.split 2. What do you exactly mean? Default options for `chart` and `stockChart` can be different. – ppotaczek Feb 05 '21 at 09:46
  • Hi , see this http://jsfiddle.net/qxfkezpd/2/ I create highcharts & highstock charts using same options, highcharts have split tooltip, but highstock have shared tooltip, but https://api.highcharts.com/highstock/tooltip.split says the default should be tooltip.split=true? If I uncomment the setting of tooltip.split =true, then BOTH charts have shared tooltip, Also there seems to be something wrong with the y axis in the highstock & the vertical strollbar in the highcharts... Thanks, Nadav – Nadav Feb 07 '21 at 07:35
  • The `split` option is enabled in Highstock by default and disabled in Highcharts. As API says: `This option takes precedence over tooltip.shared.`. What is exactly wrong with the vertical scrollbar and y-axis? – ppotaczek Feb 08 '21 at 12:20
  • OK, I think I misunderstood what split mode is, thanks, regarding the y-axis: In highcharts the default settings, give me a y axis on the left with the labels outside the chart area. In highstock I get a y-axis on the right with the labels on the left of the axis, which means they are over the chart. – Nadav Feb 09 '21 at 13:17
  • please, Ignore my comment about the vertical scrollbar, it's my mistake... – Nadav Feb 09 '21 at 13:23
  • Labels are different due to the difference in default options. Please check this example: http://jsfiddle.net/BlackLabel/uepo2mk4/ and API for used y-axis options. – ppotaczek Feb 09 '21 at 14:01
  • It seems like, by default, highcharts adjusts the y-axis labels options depending on the opposite options so that the y-axis NEXT to the chart if it's on the left or on the right, In Highstock when opposite=true the labels are over the chart, which does NOT seem right to me – Nadav Feb 10 '21 at 15:28
  • I think it has something to do with option labels.reserveSpace, this option does NOT appear in the highstock documentation, but it does have affect, on the left side it functions like in highchart (i.e. reserveSpace=false will put the tltle over the labels), but on the right side, it moves the labels so they are to the right of the chart? – Nadav Feb 10 '21 at 15:44
  • Yes, the options I have used in the last example eliminate the differences. – ppotaczek Feb 11 '21 at 11:38
  • Yes, you can get it to show properly, but with the default options it do NOT show property, AND you need to use a property that does not appear in the highstocks documentation... Anyway, I got it to work, so thanks for all your help. – Nadav Feb 14 '21 at 07:35