search

vaadin / flow-components

Java counterpart of Vaadin Web Components
100 stars 66 forks source link

[charts] Javascript exception using chart tooltip formatter using Highcharts.numberFormat method #2475

Closed thomasdewaelheyns closed 10 months ago

thomasdewaelheyns commented 2 years ago

Description

Using the BarWithNegativeStack example chart throws a javascript exception on the tooltip formatter when moving the mouse over a chart series, giving as error code "ReferenceError: Highcharts is not defined". image The chart code is copied straight from the repository here and added to a brand new, java only, jetty-based project from the Vaadin starter.

The tooltip itself looks as follows: Tooltip tooltip = new Tooltip(); tooltip.setFormatter("function() {return '<b>'+ this.series.name +', age '+ this.point.category +'</b><br/>'+ 'Population: '+ Highcharts.numberFormat(Math.abs(this.point.y), 0)}"); conf.setTooltip(tooltip);

The strange thing is it seems to be working on the Vaadin charts demo here https://demo.vaadin.com/charts/BarWithNegativeStack which seems to use the exact same code.

Expected outcome

The tooltip to render without exceptions.

Actual outcome

Upon rendering the tooltip an exception is thrown when using Highchart methods in the formatter.

Live Demo (optional)

explorer_aDvA2sDYGG

Minimal reproducible example

An example project can be found here: https://github.com/thomasdewaelheyns/vaadin14charterror This runs like a normal vaadin project (mvn -U clean jetty:run) and all example code is contained in MainView.java.

Or create the following chart and add it to a layout

        Chart chart = new Chart(ChartType.BAR);
        chart.setWidth("800px");
        Configuration conf = chart.getConfiguration();

        conf.setTitle("Population pyramid for Germany, midyear 2010");
        conf.setSubTitle("Source: www.census.gov");

        final String[] categories = new String[] { "0-4", "5-9", "10-14",
                "15-19", "20-24", "25-29", "30-34", "35-39", "40-44", "45-49",
                "50-54", "55-59", "60-64", "65-69", "70-74", "75-79", "80-84",
                "85-89", "90-94", "95-99", "100 +" };

        XAxis x1 = new XAxis();
        conf.addxAxis(x1);
        x1.setCategories(categories);
        x1.setReversed(false);

        XAxis x2 = new XAxis();
        conf.addxAxis(x2);
        x2.setCategories(categories);
        x2.setOpposite(true);
        x2.setReversed(false);
        x2.setLinkedTo(x1);

        YAxis y = new YAxis();
        y.setMin(-4000000);
        y.setMax(4000000);
        y.setTitle(new AxisTitle(""));
        conf.addyAxis(y);

        PlotOptionsSeries plot = new PlotOptionsSeries();
        plot.setStacking(Stacking.NORMAL);
        conf.setPlotOptions(plot);
        Tooltip tooltip = new Tooltip();
        tooltip.setFormatter(
                "function() {return '<b>'+ this.series.name +', age '+ this.point.category +'</b><br/>'+ 'Population: '+ Highcharts.numberFormat(Math.abs(this.point.y), 0)}");
        conf.setTooltip(tooltip);

        conf.addSeries(new ListSeries("Male", -1746181, -1884428, -2089758,
                -2222362, -2537431, -2507081, -2443179, -2664537, -3556505,
                -3680231, -3143062, -2721122, -2229181, -2227768, -2176300,
                -1329968, -836804, -354784, -90569, -28367, -3878));
        conf.addSeries(new ListSeries("Female", 1656154, 1787564, 1981671,
                2108575, 2403438, 2366003, 2301402, 2519874, 3360596, 3493473,
                3050775, 2759560, 2304444, 2426504, 2568938, 1785638, 1447162,
                1005011, 330870, 130632, 21208));

Steps to reproduce

  1. Create a chart using a tooltip formatter which uses "Highcharts.numberFormat"
  2. Add the chart to the layout
  3. Start the application and visualize the chart
  4. Mouse over the chart series

Environment

Browsers Affected

web-padawan commented 10 months ago

Closing in favor of #5610 which is a duplicate and contains a workaround.