Charts: how do I determine when the mouse is in the plot area

Question

I'm trying to implement logic that will do the following:
Panning plot within plot display area by clicking and dragging mouse
If the user clicks and drags in the chart plot area (the region where the chart plot actually displays, not including the axes, legends, titles, etc.), I want to be able to provide the effect of panning the plot (e.g. similar to grabbing and dragging a map in Google maps) within the plot display. This makes the most sense, of course, if the user has zoomed in to some level and the entire plot is no longer fully visible within the display.
Zooming on a plot
If the user places the mouse somewhere in the chart plot area and uses their mouse wheel, I want to be able to provide the effect of zooming in and out of the plot. The plot area itself must remain at its original size, just the representation of the plot needs to simulate the effect of being zoomed in or out on.
Thoughts, suggestions, ...
To make the zoom and pan effect, my thought was to adjust the axes bounds as appropriate to simulate these effects. The trick for some of what I'm planning on doing is finding out where the mouse is in the plot area (not the whole chart) so that I can find the x,y offsets from the plot origin (which appears to be in the upper left - at the chart level anyway). For panning, I don't think I care what the offset is, just that it's within the plot. For zooming, I may need to know where the mouse is in the plot so that the zooming could be centered on that location in the plot. This makes me think that it would also be helpful to find out how to translate the mouse x,y pixel position to a corresponding x,y value in the plot data domain.
I've been experimenting with attaching event handlers to detect various mouse actions and what information can be gleaned from these events. So far I have not found anything that allows me to determine the bounds of the plot region in the overall chart. I can get the mouse x,y position, but I don't know where it is in relation to the plot area bounds. I don't want to initiate a pan of a plot if the user happens to drag their mouse somewhere outside the plot area (i.e. over an axis, legend, etc.). Also, it would not make sense to start a zoom on the chart unless the mouse is over the plot.
Please let me know if this seems to be a reasonable approach, and if not, please suggest any ideas for alternatives. Any help, ideas and suggestions regarding how to solve these issues and/or determine this information would be welcome.

Answer 1

I experimented a bit and it seems the plot-content is the Group containing, well, the content of the plot. So in a line chart it's the smallest rectangle containing all the lines and the graphic at the data point (little circles, by default). What you probably need instead is the chart-plot-background.
Here's a quick example of a panning chart. There are probably better ways to manage the mouse dragging (it behaves somewhat badly if you drag out of the plot area and then back in, for example) but it gives you the basic idea. My original idea of adding a mouse directly to the plot area failed as the event doesn't get propagated to the plot region if you click on part of the plot content (a line, for example).
import java.util.Random;
import javafx.application.Application;
import javafx.beans.property.DoubleProperty;
import javafx.beans.property.SimpleDoubleProperty;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.event.EventHandler;
import javafx.geometry.Point2D;
import javafx.scene.Scene;
import javafx.scene.chart.LineChart;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart.Data;
import javafx.scene.chart.XYChart.Series;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.Region;
import javafx.stage.Stage;
public class PanningChart extends Application {
  @Override
  public void start(Stage primaryStage) {
    final NumberAxis xaxis = new NumberAxis("x", 0, 10, 1);
    final NumberAxis yaxis = new NumberAxis("y", 0, 100, 10);
    final LineChart<Number, Number> chart = new LineChart<>(xaxis, yaxis);
    chart.setAnimated(false);
    chart.setData(createData());
    final Region plotArea = (Region) chart.lookup(".chart-plot-background");
    final DoubleProperty lastMouseX = new SimpleDoubleProperty();
    final DoubleProperty lastMouseY = new SimpleDoubleProperty();
    chart.setOnMousePressed(new EventHandler<MouseEvent>() {
      @Override
      public void handle(MouseEvent event) {
        final double x = event.getX();
        final double y = event.getY();
        if (plotArea.getBoundsInParent().contains(new Point2D(x, y))) {
          lastMouseX.set(x);
          lastMouseY.set(y);
    chart.setOnMouseDragged(new EventHandler<MouseEvent>() {
      @Override
      public void handle(MouseEvent event) {
        final double x = event.getX();
        final double y = event.getY();
        if (plotArea.getBoundsInParent().contains(new Point2D(x, y))) {
          moveAxis(xaxis, x, lastMouseX);
          moveAxis(yaxis, y, lastMouseY);
    final BorderPane root = new BorderPane();
    root.setCenter(chart);
    primaryStage.setScene(new Scene(root, 600, 400));
    primaryStage.show();
  private void moveAxis(NumberAxis axis, double mouseLocation,
      DoubleProperty lastMouseLocation) {
    double scale = axis.getScale();
    double delta = (mouseLocation - lastMouseLocation.get()) / scale;
    axis.setLowerBound(axis.getLowerBound() - delta);
    axis.setUpperBound(axis.getUpperBound() - delta);
    lastMouseLocation.set(mouseLocation);
  private ObservableList<Series<Number, Number>> createData() {
    final ObservableList<Data<Number, Number>> data = FXCollections
        .observableArrayList();
    final Random rng = new Random();
    for (int x = 0; x <= 10; x++) {
      data.add(new Data<Number, Number>(x, rng.nextDouble() * 100));
    return FXCollections.singletonObservableList(new Series<Number, Number>(data));
  public static void main(String[] args) {
    launch(args);
998038 wrote:On a slightly different (but related) subject, where can I find an up-to-date source of information that describes the IDs and class names that JavaFX uses? I assume the ".plot-content" is pertaining to the ID of the chart plot area (or plot "child" of the chart?). Where can I find the names of the various objects that can be "looked up"?I generally try to avoid lookups as they feel a bit fragile. However occasionally there seems to be no other way, as in this case. The [url http://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html]CSS reference guide documents the css class substructure of each Node type.