Unnecessary horizontal scroll bar in RTL mode

[mehdi-vaadin]

Charts in RTL mode adds an unnecessary horizontal scroll bar to the page.

It can be reproduced with the following piece of code:

        UI.getCurrent().setDirection(Direction.RIGHT_TO_LEFT);
        Chart chart = new Chart();

        Configuration configuration = chart.getConfiguration();
        chart.getConfiguration().getChart().setType(ChartType.COLUMN);

        configuration.addSeries(new ListSeries("Tokyo", 49.9));

        XAxis x = new XAxis();
        x.setCrosshair(new Crosshair());
        x.setCategories("Jan");
        configuration.addxAxis(x);

        YAxis y = new YAxis();
        y.setMin(0);
        y.setTitle("Rainfall (mm)");
        configuration.addyAxis(y);

        add(chart);

It has the same behavior in Chrome 81 and Firefox 74.

[alvarezguille]

Same issue as reported in highcharts/highcharts#9978
Unfortunately the fix was released in next major version of Highcharts.

The following workaround (from the issue thread and fix) would work if added in __initChart right after this.configuration is initialized:

// Workaround for https://github.com/highcharts/highcharts/issues/9978
var elementsToChange = Array.prototype.slice.call(this.$.chart.getElementsByTagName('h4')).filter(el => el.style.left === '-9999px').concat(this.configuration.screenReaderRegion, this.configuration.tabExitAnchor);
elementsToChange.forEach(el => {
  el.style.left = '';
  el.style.top = '-999em';
});