Vaadin 14: create a scrollable Drilldown BarChart with HighCharts

Flow
1

Hello everyone,

I want to create a Drilldown BarChart with HighCharts: When I drilldown from main series, I have 64 categories to display and want to display 20 of them in my panel.

Is there any possibility to deal with xAxis to do so?
Or a clue to creates a pagination?

Thanks for help

2

Hello, you can use setMax() on the xAxis to tell maximum value to show and then use configuration.getScrollbar().setEnabled(true); so a scrollbar will appear for the rest.

3

Hello Paola.

Thank you very much for your answer!
It works but it leads to another problem: if chart has to display less than 20 categories, it will display empty lines in order to reach the xAxis maximum.

Is there a way to tell HighCharts not to do so?

4

Instead of setMax() you can use setCeiling() with the maximun value you want for the x axis: configuration.getxAxis().setCeiling(20);

1 Like
5

If I use configuration.getxAxis().setCeiling(20); clicking on scrollbar will not give me next values, it is just zooming on max data series item.

Is there a way to prevent chart from zooming when using the scrollbar?

6

With the setMax() + scrollbar I would just write some extra logic to “manually” adjust the setMax() and visibility of scrollbar if there are too few entries.

7

It would be the best!
Problem is drilldown:

  • is it possible to listen to drilldown action?
  • inject extra logic in chart via Vaadin Chart Component?
8

I haven’t tried it in V14, but you can try something like addDrilldownListener(…)
There are also drill-up listeners. It does mention in docs that it’s intended to provide drill down data asynchronously there, so might not work. In V24 theres a setDrilldownCallback that I use for this purpose.

9

Thank you Markuns for your hints.
I have a Vaadin 24 version of my application and everything works perfectly with Paola’s advice (configuration.getxAxis().setCeiling(20);)

In my case:

  • in Vaadin 14 I will just limit data to 20 entries
  • in Vaadin 24 I will let it go smooth
2 Likes