Tooltip on Line Chart showing Date

Question

I want to add Tooltip when I move cursor over a chart line. I found this example:

import java.util.concurrent.ConcurrentLinkedQueue;
import java.util.concurr         


        

Answer 1

I have managed to pull something very close to what you want. Have a look at the image below

I have used DateAxis for populating date on X-axis, along with events on Y-axis. Once the data is populated in the LineChart, iterate through its data and apply a tooltip on each node.

I have also used a styleclass on mouseEntered to apply the effect as shown on the image. This styleclass is removed on mouseExit

Have a look at the code below :

ToolTipOnLineChart.java

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.Tooltip;
import javafx.stage.Stage;

import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.Date;

public class ToolTipOnLineChart extends Application {

    @SuppressWarnings({ "unchecked", "rawtypes" })
    @Override
    public void start(Stage stage) throws ParseException {
        stage.setTitle("Line Chart Sample");
        final DateAxis xAxis = new DateAxis();
        final NumberAxis yAxis = new NumberAxis();
        xAxis.setLabel("Date");
        yAxis.setLabel("Events");

        final LineChart<Date,Number> lineChart = new LineChart<>(xAxis, yAxis);
        lineChart.setTitle("Events");

        SimpleDateFormat dateFormat = new SimpleDateFormat("dd/MMM/yyyy");


        XYChart.Series<Date,Number> series = new XYChart.Series<>();
        series.setName("Events this Year");
        series.getData().add(new XYChart.Data(dateFormat.parse("11/Jan/2014"), 23));
        series.getData().add(new XYChart.Data(dateFormat.parse("09/Feb/2014"), 14));
        series.getData().add(new XYChart.Data(dateFormat.parse("22/Mar/2014"), 15));
        series.getData().add(new XYChart.Data(dateFormat.parse("14/Apr/2014"), 24));
        series.getData().add(new XYChart.Data(dateFormat.parse("22/May/2014"), 34));
        series.getData().add(new XYChart.Data(dateFormat.parse("07/Jun/2014"), 36));
        series.getData().add(new XYChart.Data(dateFormat.parse("22/Jul/2014"), 22));
        series.getData().add(new XYChart.Data(dateFormat.parse("21/Aug/2014"), 45));
        series.getData().add(new XYChart.Data(dateFormat.parse("04/Sep/2014"), 43));
        series.getData().add(new XYChart.Data(dateFormat.parse("22/Oct/2014"), 17));
        series.getData().add(new XYChart.Data(dateFormat.parse("30/Nov/2014"), 29));
        series.getData().add(new XYChart.Data(dateFormat.parse("10/Dec/2014"), 25));


        Scene scene  = new Scene(lineChart,800,600);
        scene.getStylesheets().add(getClass().getResource("chart.css").toExternalForm());
        lineChart.getData().add(series);
        stage.setScene(scene);
        stage.show();

        /**
         * Browsing through the Data and applying ToolTip
         * as well as the class on hover
         */
        for (XYChart.Series<Date, Number> s : lineChart.getData()) {
            for (XYChart.Data<Date, Number> d : s.getData()) {
                Tooltip.install(d.getNode(), new Tooltip(
                        d.getXValue().toString() + "\n" +
                                "Number Of Events : " + d.getYValue()));

                //Adding class on hover
                d.getNode().setOnMouseEntered(event -> d.getNode().getStyleClass().add("onHover"));

                //Removing class on exit
                d.getNode().setOnMouseExited(event -> d.getNode().getStyleClass().remove("onHover"));
            }
        }
    }

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

chart.css

.onHover{
    -fx-background-color: ORANGE;
}