Is possible to create horizontal scrolling line chart with a locked y axis on JAVAFX?

Question

I'd like to create horizontal scrolling linechart with a locked y axis on JAVAFX. I have been searching an example or something similar but I did not find anything with JAVAFX. I try to put the linechart into a scrollpane but all is moving right and left when I scroll (of course) and I want to see always at least the legend and the y axis...

Any ideas? Thank you!

For example on chart.js something like this:

Bethink

Please share code!! – Eldred

I would like to ask, what kind of Axis your chart will have? In case of NumberAxis for X-Axis you could adjust the lower and upper bound accordingly in order to make the scrolling effect, unfortunately this can't be done with CategoryAxis. – Sluggard

Answer 1

Hi i created a new Application which does what you want. The trick is, that you set the minHeight of the chart smaller than the size of the ScrollPane because the ScrollPane needs Space for the Scrollbar. Here my example:

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.chart.LineChart;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.scene.control.ScrollPane;
import javafx.stage.Stage;


public class LineChartSample extends Application {

    @Override public void start(Stage stage) {
        stage.setTitle("Line Chart Sample");
        //defining the axes
        final NumberAxis xAxis = new NumberAxis();
        final NumberAxis yAxis = new NumberAxis();
        xAxis.setLabel("Number of Month");
        //creating the chart
        final LineChart<Number,Number> lineChart =
                new LineChart<>(xAxis, yAxis);

        lineChart.setTitle("Stock Monitoring, 2010");
        //defining a series
        XYChart.Series series = new XYChart.Series();
        series.setName("My portfolio");
        //populating the series with data
        series.getData().add(new XYChart.Data(1, 23));
        series.getData().add(new XYChart.Data(2, 14));
        series.getData().add(new XYChart.Data(3, 15));
        series.getData().add(new XYChart.Data(4, 24));
        series.getData().add(new XYChart.Data(5, 34));
        series.getData().add(new XYChart.Data(6, 36));
        series.getData().add(new XYChart.Data(7, 22));
        series.getData().add(new XYChart.Data(8, 45));
        series.getData().add(new XYChart.Data(9, 43));
        series.getData().add(new XYChart.Data(10, 17));
        series.getData().add(new XYChart.Data(11, 29));
        series.getData().add(new XYChart.Data(12, 25));

        ScrollPane root = new ScrollPane(lineChart);
        root.setMinSize(1000,600);
        lineChart.setMinSize(root.getMinWidth(),root.getMinHeight()-20);
        Scene scene  = new Scene(root,800,600);
        lineChart.getData().add(series);

        stage.setScene(scene);
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

Parnassus

You can't add linechart into scrollablepane – Rollandrollaway