Vaadin chart XAxis setMax does not work in combined chart

24 views Asked by At

I have a specification that need to combine and show spline chart and column chart, and the spline line needs to reach the end of the chart. But I'm unable to achieve that even when I set a DataSeriesItem at max date value of XAxis. This only happens in combination of spline chart and column chart. If it is a standalone spline chart, everything is showing correctly. Am I missing any configuration ?

Here is my sample code

public class SplineView extends VerticalLayout {
    public SplineView() {
        Chart chart = new Chart(ChartType.SPLINE);
        chart.setTimeline(true);
        Configuration configuration = chart.getConfiguration();
        configuration.getTitle().setText("AAPL Stock Price");
        configuration.getTooltip().setEnabled(true);
        XAxis xAxis = configuration.getxAxis();
        xAxis.setType(AxisType.DATETIME);
        xAxis.setTickWidth(2);
        xAxis.setOrdinal(false);
        xAxis.setMax(Date.from(Instant.now()));

        YAxis columnYAxis = new YAxis();
        columnYAxis.setShowEmpty(false);
        columnYAxis.setVisible(false);
        configuration.addyAxis(columnYAxis);
        DataSeries dataSeries = new DataSeries();
        Random random = new Random();
        Map<Integer, DataSeries> multipleDataSeries = new HashMap();
        var stockPrices = StockPrices.fetchAaplPrice();

        for (var stock  : stockPrices) {
            StockPrices.PriceData data = (StockPrices.PriceData)stock.next();
            DataSeriesItem item = new DataSeriesItem();
            item.setX(Instant.ofEpochMilli(data.getDate()).plus(2920L, ChronoUnit.DAYS));
            item.setY(data.getPrice());
            dataSeries.add(item);
            Integer randomNumber = random.nextInt();
            DataSeries columnDataSeries;
            if (multipleDataSeries.containsKey(randomNumber)) {
                columnDataSeries = multipleDataSeries.get(randomNumber);
            } else {
                columnDataSeries = new DataSeries();
                PlotOptionsColumn plotOptionsColumn = new PlotOptionsColumn();
                plotOptionsColumn.setPointWidth(30);
                columnDataSeries.setPlotOptions(plotOptionsColumn);
                multipleDataSeries.put(randomNumber, columnDataSeries);
            }

            if (random.nextInt(100) < 10) {
                DataSeriesItem columnItem = new DataSeriesItem();
                columnItem.setX(Instant.ofEpochMilli(data.getDate()).plus(2920L, ChronoUnit.DAYS));
                columnItem.setY(data.getPrice());
                columnDataSeries.add(columnItem);
            }
        }

        DataSeriesItem nowItem = new DataSeriesItem();
        nowItem.setX(Instant.now());
        nowItem.setY(120);
        dataSeries.add(nowItem);
        configuration.addSeries(dataSeries);
        multipleDataSeries.values().forEach((s) -> {
            configuration.addSeries(s);
        });
        RangeSelector rangeSelector = new RangeSelector();
        rangeSelector.setSelected(1);
        configuration.setRangeSelector(rangeSelector);
        this.add(new Component[]{chart});
    }
}

[Here is the chart view][1] [1]: https://i.stack.imgur.com/0Yax5.jpg

0

There are 0 answers