MACRO NEPAL
JavaFX Charts Customization in Java
awiskar acharya
November 15, 2025
3:45 am

Introduction

JavaFX provides powerful charting capabilities out of the box, but real-world applications often require extensive customization for branding, improved UX, and specific business requirements. This guide covers comprehensive customization techniques for all JavaFX chart types.

Basic Chart Setup and Styling

Common Chart Base Class

public abstract class CustomChartBase {
protected static final String DEFAULT_CSS = """
.chart {
-fx-background-color: transparent;
-fx-padding: 20px;
}
.chart-plot-background {
-fx-background-color: transparent;
}
.chart-title {
-fx-font-size: 18px;
-fx-font-weight: bold;
-fx-text-fill: #2c3e50;
}
""";
protected void applyCommonStyles(Node node) {
if (node instanceof Parent parent) {
parent.getStylesheets().add(
getClass().getResource("/styles/charts.css").toExternalForm()
);
}
}
protected String createInlineStyle(String... styles) {
return String.join("; ", styles) + ";";
}
}

Line Chart Customization

Advanced Line Chart with Custom Features

public class CustomLineChart extends CustomChartBase {
private LineChart<String, Number> lineChart;
private XYChart.Series<String, Number> mainSeries;
private XYChart.Series<String, Number> trendSeries;
public CustomLineChart(String title, String xAxisLabel, String yAxisLabel) {
initializeChart(title, xAxisLabel, yAxisLabel);
setupInteractions();
applyCustomStyling();
}
private void initializeChart(String title, String xAxisLabel, String yAxisLabel) {
CategoryAxis xAxis = new CategoryAxis();
NumberAxis yAxis = new NumberAxis();
xAxis.setLabel(xAxisLabel);
yAxis.setLabel(yAxisLabel);
lineChart = new LineChart<>(xAxis, yAxis);
lineChart.setTitle(title);
lineChart.setAnimated(true);
lineChart.setLegendVisible(true);
lineChart.setCreateSymbols(true);
// Create main data series
mainSeries = new XYChart.Series<>();
mainSeries.setName("Actual Values");
// Create trend line series
trendSeries = new XYChart.Series<>();
trendSeries.setName("Trend Line");
lineChart.getData().addAll(mainSeries, trendSeries);
}
public void addDataPoint(String category, Number value) {
XYChart.Data<String, Number> dataPoint = new XYChart.Data<>(category, value);
mainSeries.getData().add(dataPoint);
// Add custom node to data point
dataPoint.setNode(createCustomDataPoint());
// Update trend line
updateTrendLine();
}
private Node createCustomDataPoint() {
Circle point = new Circle(4);
point.setFill(Color.web("#3498db"));
point.setStroke(Color.web("#2980b9"));
point.setStrokeWidth(1.5);
// Add hover effect
point.setOnMouseEntered(e -> {
point.setRadius(6);
point.setFill(Color.web("#e74c3c"));
showTooltip(point, e.getSceneX(), e.getSceneY());
});
point.setOnMouseExited(e -> {
point.setRadius(4);
point.setFill(Color.web("#3498db"));
hideTooltip();
});
return point;
}
private void updateTrendLine() {
List<XYChart.Data<String, Number>> data = mainSeries.getData();
if (data.size() < 2) return;
trendSeries.getData().clear();
// Simple linear regression for trend line
double[] xValues = new double[data.size()];
double[] yValues = new double[data.size()];
for (int i = 0; i < data.size(); i++) {
xValues[i] = i;
yValues[i] = data.get(i).getYValue().doubleValue();
}
LinearRegression regression = new LinearRegression(xValues, yValues);
for (int i = 0; i < data.size(); i++) {
double trendValue = regression.predict(i);
trendSeries.getData().add(new XYChart.Data<>(
data.get(i).getXValue(), trendValue
));
}
}
public void applyGradientStroke() {
// Apply gradient to line
mainSeries.getNode().lookup(".chart-series-line")
.setStyle("-fx-stroke: linear-gradient(from 0% 0% to 100% 0%, #3498db 0%, #e74c3c 100%);");
}
public void setLineStyle(LineStyle style) {
String cssStyle = switch (style) {
case DASHED -> "-fx-stroke-dash-array: 10 5;";
case DOTTED -> "-fx-stroke-dash-array: 2 5;";
case SOLID -> "-fx-stroke-dash-array: none;";
};
mainSeries.getNode().lookup(".chart-series-line")
.setStyle(cssStyle + " -fx-stroke-width: 2.5;");
}
public void addVerticalMarker(String category, String label) {
// Find the x position for the category
CategoryAxis xAxis = (CategoryAxis) lineChart.getXAxis();
double markerX = calculateCategoryPosition(category, xAxis);
Line marker = new Line(markerX, 0, markerX, lineChart.getHeight());
marker.setStroke(Color.RED);
marker.setStrokeWidth(1);
marker.getStrokeDashArray().addAll(5d, 5d);
marker.setOpacity(0.7);
// Add label
Text markerLabel = new Text(label);
markerLabel.setFill(Color.RED);
markerLabel.setFont(Font.font("Arial", FontWeight.BOLD, 12));
StackPane markerPane = new StackPane();
markerPane.getChildren().addAll(marker, markerLabel);
markerPane.setLayoutX(markerX - 20);
markerPane.setLayoutY(10);
((Pane) lineChart.lookup(".chart-plot-background")).getChildren().add(markerPane);
}
private double calculateCategoryPosition(String category, CategoryAxis axis) {
// Simplified calculation - in real implementation, 
// you'd need to access internal axis calculations
return 100 + (mainSeries.getData().indexOf(
mainSeries.getData().stream()
.filter(d -> d.getXValue().equals(category))
.findFirst()
.orElse(null)) * 50);
}
private void setupInteractions() {
// Zoom functionality
lineChart.setOnScroll(e -> {
if (e.isControlDown()) {
double zoomFactor = e.getDeltaY() > 0 ? 1.1 : 0.9;
NumberAxis yAxis = (NumberAxis) lineChart.getYAxis();
double lowerBound = yAxis.getLowerBound();
double upperBound = yAxis.getUpperBound();
double newLower = lowerBound * zoomFactor;
double newUpper = upperBound * zoomFactor;
yAxis.setLowerBound(newLower);
yAxis.setUpperBound(newUpper);
e.consume();
}
});
// Pan functionality
final double[] sceneX = new double[1];
final double[] sceneY = new double[1];
lineChart.setOnMousePressed(e -> {
sceneX[0] = e.getSceneX();
sceneY[0] = e.getSceneY();
});
lineChart.setOnMouseDragged(e -> {
if (e.isSecondaryButtonDown()) {
NumberAxis yAxis = (NumberAxis) lineChart.getYAxis();
double deltaY = (e.getSceneY() - sceneY[0]) / 50;
yAxis.setLowerBound(yAxis.getLowerBound() + deltaY);
yAxis.setUpperBound(yAxis.getUpperBound() + deltaY);
sceneY[0] = e.getSceneY();
}
});
}
private void applyCustomStyling() {
// Axis styling
lineChart.getXAxis().setStyle(
createInlineStyle(
"-fx-tick-label-fill: #7f8c8d",
"-fx-font-size: 11px",
"-fx-border-color: #bdc3c7 transparent transparent transparent"
)
);
lineChart.getYAxis().setStyle(
createInlineStyle(
"-fx-tick-label-fill: #7f8c8d",
"-fx-font-size: 11px",
"-fx-border-color: transparent #bdc3c7 transparent transparent"
)
);
// Chart styling
lineChart.setStyle(
createInlineStyle(
"-fx-background-color: #ecf0f1",
"-fx-border-color: #bdc3c7",
"-fx-border-radius: 5",
"-fx-background-radius: 5"
)
);
}
// Tooltip management
private Tooltip currentTooltip;
private void showTooltip(Node node, double x, double y) {
if (currentTooltip != null) {
currentTooltip.hide();
}
currentTooltip = new Tooltip("Value: " + 
((XYChart.Data<?, ?>) ((Circle) node).getUserData()).getYValue());
currentTooltip.show(node, x, y);
}
private void hideTooltip() {
if (currentTooltip != null) {
currentTooltip.hide();
currentTooltip = null;
}
}
public LineChart<String, Number> getChart() {
return lineChart;
}
public enum LineStyle {
SOLID, DASHED, DOTTED
}
// Linear regression helper class
private static class LinearRegression {
private final double intercept, slope;
public LinearRegression(double[] x, double[] y) {
double meanX = Arrays.stream(x).average().orElse(0);
double meanY = Arrays.stream(y).average().orElse(0);
double numerator = 0;
double denominator = 0;
for (int i = 0; i < x.length; i++) {
numerator += (x[i] - meanX) * (y[i] - meanY);
denominator += (x[i] - meanX) * (x[i] - meanX);
}
slope = numerator / denominator;
intercept = meanY - slope * meanX;
}
public double predict(double x) {
return slope * x + intercept;
}
}
}

Bar Chart Customization

Advanced Bar Chart with Animation and Effects

public class CustomBarChart extends CustomChartBase {
private BarChart<String, Number> barChart;
private Map<String, Color> categoryColors;
private boolean animated = true;
public CustomBarChart(String title, String xAxisLabel, String yAxisLabel) {
initializeChart(title, xAxisLabel, yAxisLabel);
setupColorScheme();
applyCustomStyling();
setupInteractions();
}
private void initializeChart(String title, String xAxisLabel, String yAxisLabel) {
CategoryAxis xAxis = new CategoryAxis();
NumberAxis yAxis = new NumberAxis();
xAxis.setLabel(xAxisLabel);
yAxis.setLabel(yAxisLabel);
barChart = new BarChart<>(xAxis, yAxis);
barChart.setTitle(title);
barChart.setLegendVisible(false);
barChart.setAnimated(animated);
barChart.setCategoryGap(20);
barChart.setBarGap(5);
}
public void addSeries(String seriesName, Map<String, Number> data) {
XYChart.Series<String, Number> series = new XYChart.Series<>();
series.setName(seriesName);
data.forEach((category, value) -> {
XYChart.Data<String, Number> dataPoint = new XYChart.Data<>(category, value);
series.getData().add(dataPoint);
// Apply custom styling when data is added
if (animated) {
applyDataPointAnimation(dataPoint);
}
});
barChart.getData().add(series);
applySeriesStyling(series);
}
private void applyDataPointAnimation(XYChart.Data<String, Number> dataPoint) {
dataPoint.nodeProperty().addListener((obs, oldNode, newNode) -> {
if (newNode != null) {
// Initial state (invisible)
newNode.setScaleY(0);
newNode.setTranslateY(barChart.getHeight());
// Animate to final state
ScaleTransition st = new ScaleTransition(Duration.millis(500), newNode);
st.setToY(1);
TranslateTransition tt = new TranslateTransition(Duration.millis(500), newNode);
tt.setToY(0);
ParallelTransition pt = new ParallelTransition(st, tt);
pt.play();
// Add hover effects
setupBarHoverEffects(newNode, dataPoint);
}
});
}
private void setupBarHoverEffects(Node bar, XYChart.Data<String, Number> dataPoint) {
String category = dataPoint.getXValue();
Color baseColor = categoryColors.getOrDefault(category, Color.STEELBLUE);
bar.setOnMouseEntered(e -> {
bar.setStyle(
createInlineStyle(
"-fx-background-color: derive(" + toHex(baseColor) + ", -20%);",
"-fx-background-radius: 3 3 0 0;",
"-fx-effect: dropshadow(gaussian, " + toHex(baseColor) + ", 10, 0.5, 0, 0);"
)
);
showValueLabel(bar, dataPoint.getYValue().doubleValue());
});
bar.setOnMouseExited(e -> {
bar.setStyle(
createInlineStyle(
"-fx-background-color: " + toHex(baseColor) + ";",
"-fx-background-radius: 3 3 0 0;",
"-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.3), 5, 0, 0, 1);"
)
);
hideValueLabel();
});
}
private void showValueLabel(Node bar, double value) {
Text valueLabel = new Text(String.format("$%.2f", value));
valueLabel.setFill(Color.WHITE);
valueLabel.setFont(Font.font("Arial", FontWeight.BOLD, 12));
StackPane labelContainer = new StackPane(valueLabel);
labelContainer.setStyle(
createInlineStyle(
"-fx-background-color: rgba(0,0,0,0.8);",
"-fx-background-radius: 3;",
"-fx-padding: 5px;"
)
);
// Position above the bar
Bounds barBounds = bar.getBoundsInParent();
labelContainer.setLayoutX(barBounds.getMinX() + barBounds.getWidth() / 2 - 30);
labelContainer.setLayoutY(barBounds.getMinY() - 30);
bar.setUserData(labelContainer);
((Pane) bar.getParent()).getChildren().add(labelContainer);
}
private void hideValueLabel() {
// Implementation to remove value label
}
public void setGradientFill(boolean enabled) {
if (enabled) {
barChart.getData().forEach(series -> {
series.getData().forEach(data -> {
data.getNode().setStyle(
"-fx-background-color: linear-gradient(to bottom, #3498db, #2980b9);"
);
});
});
}
}
public void addDataLabels() {
barChart.getData().forEach(series -> {
series.getData().forEach(data -> {
data.nodeProperty().addListener((obs, oldNode, newNode) -> {
if (newNode != null) {
Text dataLabel = new Text(data.getYValue().toString());
dataLabel.setFill(Color.WHITE);
dataLabel.setFont(Font.font("Arial", FontWeight.BOLD, 10));
StackPane labelPane = new StackPane(dataLabel);
labelPane.setStyle(
createInlineStyle(
"-fx-background-color: rgba(0,0,0,0.7);",
"-fx-background-radius: 2;",
"-fx-padding: 2px 4px;"
)
);
// Position label at top of bar
Bounds bounds = newNode.getBoundsInParent();
labelPane.setLayoutX(bounds.getMinX() + bounds.getWidth() / 2 - 15);
labelPane.setLayoutY(bounds.getMinY() - 20);
((Pane) newNode.getParent()).getChildren().add(labelPane);
}
});
});
});
}
public void setStacked(boolean stacked) {
if (stacked) {
barChart.setCategoryGap(0);
barChart.setBarGap(0);
} else {
barChart.setCategoryGap(20);
barChart.setBarGap(5);
}
}
public void applyPatternFills() {
String[] patterns = {
"M0,0 H10 V10 H0 Z",  // Squares
"M0,0 L10,10 M10,0 L0,10",  // Crosshatch
"M0,5 H10 M5,0 V10"   // Grid
};
int patternIndex = 0;
for (XYChart.Series<String, Number> series : barChart.getData()) {
for (XYChart.Data<String, Number> data : series.getData()) {
if (data.getNode() != null) {
String patternStyle = String.format(
"-fx-background-color: pattern(linear, 0, 0, 10, 10, false, null) %s;",
patterns[patternIndex % patterns.length]
);
data.getNode().setStyle(patternStyle);
}
}
patternIndex++;
}
}
private void setupColorScheme() {
categoryColors = new HashMap<>();
String[] colors = {"#3498db", "#e74c3c", "#2ecc71", "#f39c12", "#9b59b6", "#1abc9c"};
// Assign colors to categories
CategoryAxis xAxis = (CategoryAxis) barChart.getXAxis();
// Note: This would need to be updated as categories are added
}
private void applySeriesStyling(XYChart.Series<String, Number> series) {
series.getNode().lookup(".chart-bar").setStyle(
createInlineStyle(
"-fx-background-radius: 3 3 0 0;",
"-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.3), 5, 0, 0, 1);"
)
);
}
private void setupInteractions() {
// Context menu
barChart.setNodeOrientation(NodeOrientation.INHERIT);
barChart.setOnContextMenuRequested(e -> {
ContextMenu contextMenu = new ContextMenu();
MenuItem exportItem = new MenuItem("Export as PNG");
exportItem.setOnAction(ev -> exportAsPNG());
MenuItem toggleAnimation = new MenuItem("Toggle Animation");
toggleAnimation.setOnAction(ev -> {
animated = !animated;
barChart.setAnimated(animated);
});
contextMenu.getItems().addAll(exportItem, toggleAnimation);
contextMenu.show(barChart, e.getScreenX(), e.getScreenY());
});
}
private void exportAsPNG() {
WritableImage image = barChart.snapshot(new SnapshotParameters(), null);
FileChooser fileChooser = new FileChooser();
fileChooser.setTitle("Save Chart as PNG");
fileChooser.getExtensionFilters().add(
new FileChooser.ExtensionFilter("PNG files", "*.png")
);
File file = fileChooser.showSaveDialog(barChart.getScene().getWindow());
if (file != null) {
try {
ImageIO.write(SwingFXUtils.fromFXImage(image, null), "png", file);
} catch (IOException e) {
e.printStackTrace();
}
}
}
private String toHex(Color color) {
return String.format("#%02x%02x%02x",
(int) (color.getRed() * 255),
(int) (color.getGreen() * 255),
(int) (color.getBlue() * 255));
}
public BarChart<String, Number> getChart() {
return barChart;
}
}

Pie Chart Customization

Interactive Pie Chart with Advanced Features

public class CustomPieChart extends CustomChartBase {
private PieChart pieChart;
private Map<String, Color> sliceColors;
private boolean showPercentage = true;
private boolean explodeOnHover = true;
public CustomPieChart(String title) {
initializeChart(title);
setupColorScheme();
applyCustomStyling();
}
private void initializeChart(String title) {
pieChart = new PieChart();
pieChart.setTitle(title);
pieChart.setLegendVisible(true);
pieChart.setLabelsVisible(true);
pieChart.setStartAngle(90); // Start from top
pieChart.setClockwise(true);
}
public void addData(String name, double value) {
PieChart.Data slice = new PieChart.Data(name, value);
pieChart.getData().add(slice);
// Apply custom styling
applySliceStyling(slice);
// Setup interactions
setupSliceInteractions(slice);
}
private void applySliceStyling(PieChart.Data slice) {
slice.getNode().setStyle(
createInlineStyle(
"-fx-background-color: " + getSliceColor(slice.getName()) + ";",
"-fx-border-color: white;",
"-fx-border-width: 2;"
)
);
// Custom label formatting
if (showPercentage) {
slice.setName(String.format("%s (%.1f%%)", 
slice.getName(), 
(slice.getPieValue() / getTotalValue()) * 100));
}
}
private void setupSliceInteractions(PieChart.Data slice) {
Node sliceNode = slice.getNode();
sliceNode.setOnMouseEntered(e -> {
if (explodeOnHover) {
// Create explode effect
ScaleTransition st = new ScaleTransition(Duration.millis(200), sliceNode);
st.setToX(1.1);
st.setToY(1.1);
st.play();
// Add glow effect
sliceNode.setEffect(new DropShadow(10, Color.BLACK));
}
// Highlight slice
sliceNode.setStyle(
createInlineStyle(
"-fx-background-color: derive(" + getSliceColor(slice.getName()) + ", 20%);",
"-fx-border-color: white;",
"-fx-border-width: 2;"
)
);
});
sliceNode.setOnMouseExited(e -> {
if (explodeOnHover) {
ScaleTransition st = new ScaleTransition(Duration.millis(200), sliceNode);
st.setToX(1.0);
st.setToY(1.0);
st.play();
sliceNode.setEffect(null);
}
// Restore original color
sliceNode.setStyle(
createInlineStyle(
"-fx-background-color: " + getSliceColor(slice.getName()) + ";",
"-fx-border-color: white;",
"-fx-border-width: 2;"
)
);
});
sliceNode.setOnMouseClicked(e -> {
if (e.getClickCount() == 2) {
// Double-click to explode slice
explodeSlice(slice);
}
});
}
private void explodeSlice(PieChart.Data slice) {
// Calculate explode distance
double angle = calculateSliceAngle(slice);
double distance = 20; // pixels
double translateX = Math.cos(Math.toRadians(angle)) * distance;
double translateY = Math.sin(Math.toRadians(angle)) * distance;
TranslateTransition tt = new TranslateTransition(Duration.millis(500), slice.getNode());
tt.setToX(translateX);
tt.setToY(translateY);
tt.play();
}
private double calculateSliceAngle(PieChart.Data slice) {
// Calculate the middle angle of the slice
double total = getTotalValue();
double startAngle = pieChart.getStartAngle();
// Find the slice's position in the data
int sliceIndex = pieChart.getData().indexOf(slice);
double cumulativeValue = 0;
for (int i = 0; i < sliceIndex; i++) {
cumulativeValue += pieChart.getData().get(i).getPieValue();
}
double sliceStartAngle = startAngle + (cumulativeValue / total) * 360;
double sliceMiddleAngle = sliceStartAngle + (slice.getPieValue() / total) * 360 / 2;
return sliceMiddleAngle;
}
public void setDonutMode(boolean enabled, double innerRadiusPercentage) {
if (enabled) {
pieChart.setStyle(
createInlineStyle(
"-fx-pie-label-visible: false;",
"-fx-border-color: transparent;"
)
);
// Create donut hole effect
Circle hole = new Circle(innerRadiusPercentage);
hole.setFill(Color.TRANSPARENT);
hole.setStroke(Color.WHITE);
hole.setStrokeWidth(2);
StackPane chartContainer = new StackPane(pieChart, hole);
// You would need to replace the chart in its parent container
}
}
public void applyGradientFills() {
for (PieChart.Data slice : pieChart.getData()) {
Color baseColor = getSliceColor(slice.getName());
String gradientStyle = String.format(
"-fx-background-color: linear-gradient(from 0%% 0%% to 100%% 100%%, " +
"derive(%s, 30%%) 0%%, %s 50%%, derive(%s, -30%%) 100%%);",
toHex(baseColor), toHex(baseColor), toHex(baseColor)
);
slice.getNode().setStyle(gradientStyle);
}
}
public void addPatternFills() {
String[] patterns = {
"M0,0 L10,10 M9,-1 L11,1 M-1,9 L1,11", // Diagonal lines
"M0,5 H10 M5,0 V10",                   // Grid
"M2.5,2.5 L7.5,7.5 M7.5,2.5 L2.5,7.5" // X pattern
};
int patternIndex = 0;
for (PieChart.Data slice : pieChart.getData()) {
String patternStyle = String.format(
"-fx-background-color: pattern(linear, 0, 0, 10, 10, false, null) %s;",
patterns[patternIndex % patterns.length]
);
slice.getNode().setStyle(patternStyle);
patternIndex++;
}
}
public void setLabelPosition(LabelPosition position) {
switch (position) {
case INSIDE -> {
pieChart.setLabelsVisible(true);
pieChart.setStyle("-fx-pie-label-visible: true;");
}
case OUTSIDE -> {
pieChart.setLabelsVisible(true);
// Custom implementation for outside labels would be needed
}
case NONE -> pieChart.setLabelsVisible(false);
}
}
public void addLeaderLines() {
// Custom implementation for leader lines
// This would require extending PieChart skin
}
private double getTotalValue() {
return pieChart.getData().stream()
.mapToDouble(PieChart.Data::getPieValue)
.sum();
}
private String getSliceColor(String sliceName) {
return sliceColors.containsKey(sliceName) ? 
toHex(sliceColors.get(sliceName)) : toHex(Color.LIGHTGRAY);
}
private void setupColorScheme() {
sliceColors = new HashMap<>();
Color[] palette = {
Color.web("#3498db"), Color.web("#e74c3c"), Color.web("#2ecc71"),
Color.web("#f39c12"), Color.web("#9b59b6"), Color.web("#1abc9c"),
Color.web("#34495e"), Color.web("#d35400"), Color.web("#c0392b")
};
// Assign colors to slices
for (int i = 0; i < pieChart.getData().size(); i++) {
if (i < palette.length) {
sliceColors.put(pieChart.getData().get(i).getName(), palette[i]);
}
}
}
private void applyCustomStyling() {
// Legend styling
pieChart.lookup(".chart-legend").setStyle(
createInlineStyle(
"-fx-background-color: transparent;",
"-fx-border-color: #bdc3c7;",
"-fx-border-width: 1;",
"-fx-border-radius: 3;"
)
);
// Title styling
pieChart.lookup(".chart-title").setStyle(
createInlineStyle(
"-fx-font-size: 16px;",
"-fx-font-weight: bold;",
"-fx-text-fill: #2c3e50;"
)
);
}
public PieChart getChart() {
return pieChart;
}
public enum LabelPosition {
INSIDE, OUTSIDE, NONE
}
}

Area Chart Customization

Advanced Area Chart with Gradient Fills

public class CustomAreaChart extends CustomChartBase {
private AreaChart<Number, Number> areaChart;
private Map<String, Color> seriesColors;
public CustomAreaChart(String title, String xAxisLabel, String yAxisLabel) {
initializeChart(title, xAxisLabel, yAxisLabel);
setupColorScheme();
applyCustomStyling();
}
private void initializeChart(String title, String xAxisLabel, String yAxisLabel) {
NumberAxis xAxis = new NumberAxis();
NumberAxis yAxis = new NumberAxis();
xAxis.setLabel(xAxisLabel);
yAxis.setLabel(yAxisLabel);
areaChart = new AreaChart<>(xAxis, yAxis);
areaChart.setTitle(title);
areaChart.setLegendVisible(true);
areaChart.setCreateSymbols(false);
areaChart.setAnimated(true);
}
public void addSeries(String seriesName, List<XYChart.Data<Number, Number>> data) {
XYChart.Series<Number, Number> series = new XYChart.Series<>();
series.setName(seriesName);
series.getData().addAll(data);
areaChart.getData().add(series);
applySeriesGradient(series);
}
private void applySeriesGradient(XYChart.Series<Number, Number> series) {
series.getNode().setStyle(
"-fx-background-color: linear-gradient(from 0% 0% to 0% 100%, " +
"rgba(52, 152, 219, 0.8) 0%, rgba(52, 152, 219, 0.3) 80%, transparent 100%);"
);
}
public void setStacked(boolean stacked) {
// Area charts are naturally stacked, but we can adjust appearance
if (stacked) {
areaChart.getData().forEach(series -> {
series.getNode().setStyle(
"-fx-background-color: linear-gradient(from 0% 0% to 0% 100%, " +
"rgba(52, 152, 219, 0.6) 0%, rgba(52, 152, 219, 0.2) 100%);"
);
});
}
}
public void addThresholdLine(double threshold, String label) {
// Create a horizontal line at the threshold value
Line thresholdLine = new Line();
thresholdLine.setStroke(Color.RED);
thresholdLine.setStrokeWidth(2);
thresholdLine.getStrokeDashArray().addAll(5d, 5d);
// Bind line to chart coordinates
thresholdLine.startXProperty().bind(
Bindings.createDoubleBinding(() -> 
getXAxis().getDisplayPosition(0), 
getXAxis().boundsInParentProperty()
)
);
thresholdLine.endXProperty().bind(
Bindings.createDoubleBinding(() -> 
getXAxis().getDisplayPosition(getXAxis().getUpperBound()), 
getXAxis().boundsInParentProperty()
)
);
thresholdLine.startYProperty().bind(
Bindings.createDoubleBinding(() -> 
getYAxis().getDisplayPosition(threshold), 
getYAxis().boundsInParentProperty()
)
);
thresholdLine.endYProperty().bind(thresholdLine.startYProperty());
// Add to chart
((Pane) areaChart.lookup(".chart-plot-background")).getChildren().add(thresholdLine);
// Add label
Text thresholdLabel = new Text(label);
thresholdLabel.setFill(Color.RED);
thresholdLabel.setFont(Font.font("Arial", FontWeight.BOLD, 12));
StackPane labelPane = new StackPane(thresholdLabel);
labelPane.setStyle(
createInlineStyle(
"-fx-background-color: rgba(255,255,255,0.9);",
"-fx-border-color: red;",
"-fx-border-width: 1;",
"-fx-padding: 2 5;"
)
);
// Position label
labelPane.layoutXProperty().bind(
Bindings.createDoubleBinding(() -> 
getXAxis().getDisplayPosition(getXAxis().getUpperBound()) - 50, 
getXAxis().boundsInParentProperty()
)
);
labelPane.layoutYProperty().bind(
Bindings.createDoubleBinding(() -> 
getYAxis().getDisplayPosition(threshold) - 20, 
getYAxis().boundsInParentProperty()
)
);
((Pane) areaChart.lookup(".chart-plot-background")).getChildren().add(labelPane);
}
private NumberAxis getXAxis() {
return (NumberAxis) areaChart.getXAxis();
}
private NumberAxis getYAxis() {
return (NumberAxis) areaChart.getYAxis();
}
private void setupColorScheme() {
seriesColors = new HashMap<>();
Color[] palette = {
Color.web("#3498db"), Color.web("#e74c3c"), Color.web("#2ecc71"),
Color.web("#f39c12"), Color.web("#9b59b6")
};
int colorIndex = 0;
for (XYChart.Series<Number, Number> series : areaChart.getData()) {
if (colorIndex < palette.length) {
seriesColors.put(series.getName(), palette[colorIndex]);
colorIndex++;
}
}
}
private void applyCustomStyling() {
// Chart background
areaChart.setStyle(
createInlineStyle(
"-fx-background-color: #f8f9fa;",
"-fx-border-color: #dee2e6;",
"-fx-border-width: 1;",
"-fx-background-radius: 5;",
"-fx-border-radius: 5;"
)
);
// Plot background
areaChart.lookup(".chart-plot-background").setStyle(
createInlineStyle(
"-fx-background-color: white;"
)
);
}
public AreaChart<Number, Number> getChart() {
return areaChart;
}
}

CSS Styling for Charts

Comprehensive CSS Stylesheet

/* charts.css */
.chart {
-fx-background-color: #ffffff;
-fx-padding: 20px;
-fx-background-radius: 8px;
-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.1), 10, 0, 0, 2);
}
.chart-title {
-fx-font-size: 18px;
-fx-font-weight: bold;
-fx-text-fill: #2c3e50;
-fx-padding: 0 0 10px 0;
}
.chart-plot-background {
-fx-background-color: transparent;
}
.chart-vertical-grid-lines {
-fx-stroke: #ecf0f1;
-fx-stroke-dash-array: none;
}
.chart-horizontal-grid-lines {
-fx-stroke: #ecf0f1;
-fx-stroke-dash-array: none;
}
.chart-legend {
-fx-background-color: transparent;
-fx-border-color: #bdc3c7;
-fx-border-width: 1;
-fx-border-radius: 4px;
-fx-padding: 8px;
}
.chart-legend-item {
-fx-text-fill: #34495e;
}
/* Axis styling */
.axis {
-fx-tick-label-fill: #7f8c8d;
-fx-tick-length: 5px;
-fx-minor-tick-length: 3px;
-fx-border-color: transparent;
}
.axis-label {
-fx-text-fill: #34495e;
-fx-font-weight: bold;
}
.axis-tick-mark {
-fx-stroke: #bdc3c7;
-fx-stroke-width: 1;
}
.axis-minor-tick-mark {
-fx-stroke: #ecf0f1;
-fx-stroke-width: 1;
}
/* Line Chart specific */
.chart-line-symbol {
-fx-background-color: #3498db, white;
-fx-background-insets: 0, 2;
-fx-background-radius: 5px;
-fx-padding: 5px;
}
.chart-series-line {
-fx-stroke: #3498db;
-fx-stroke-width: 2px;
}
/* Bar Chart specific */
.chart-bar {
-fx-background-color: #3498db;
-fx-background-radius: 3 3 0 0;
-fx-border-color: #2980b9;
-fx-border-width: 0 0 0 0;
}
.data0.chart-bar {
-fx-background-color: #3498db;
}
.data1.chart-bar {
-fx-background-color: #e74c3c;
}
.data2.chart-bar {
-fx-background-color: #2ecc71;
}
/* Pie Chart specific */
.chart-pie {
-fx-border-color: white;
-fx-border-width: 2px;
}
.chart-pie-label {
-fx-fill: white;
-fx-font-weight: bold;
-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.3), 2, 0, 1, 1);
}
.default-color0.chart-pie { -fx-pie-color: #3498db; }
.default-color1.chart-pie { -fx-pie-color: #e74c3c; }
.default-color2.chart-pie { -fx-pie-color: #2ecc71; }
.default-color3.chart-pie { -fx-pie-color: #f39c12; }
.default-color4.chart-pie { -fx-pie-color: #9b59b6; }
/* Area Chart specific */
.chart-area-symbol {
-fx-background-color: #3498db, white;
-fx-background-insets: 0, 2;
-fx-background-radius: 4px;
-fx-padding: 4px;
}
.chart-series-area-line {
-fx-stroke: #3498db;
-fx-stroke-width: 2px;
}
.chart-series-area-fill {
-fx-fill: linear-gradient(from 0% 0% to 0% 100%, 
rgba(52, 152, 219, 0.8) 0%, 
rgba(52, 152, 219, 0.3) 80%, 
transparent 100%);
}
/* Tooltip styling */
.chart-tooltip {
-fx-background-color: rgba(0, 0, 0, 0.8);
-fx-text-fill: white;
-fx-background-radius: 4px;
-fx-padding: 8px 12px;
-fx-font-size: 12px;
}
/* Animation classes */
.chart-animated {
-fx-animated: true;
}
.chart-smooth {
-fx-create-symbols: false;
}
/* Responsive design */
@media -fx-platform: "mobile" {
.chart {
-fx-padding: 10px;
}
.chart-title {
-fx-font-size: 16px;
}
.axis {
-fx-tick-label-font-size: 10px;
}
}

Usage Example

Complete Demo Application

public class ChartCustomizationDemo extends Application {
@Override
public void start(Stage primaryStage) {
VBox root = new VBox(20);
root.setPadding(new Insets(20));
root.setStyle("-fx-background-color: #f4f6f7;");
// Create customized charts
CustomLineChart lineChart = createLineChart();
CustomBarChart barChart = createBarChart();
CustomPieChart pieChart = createPieChart();
CustomAreaChart areaChart = createAreaChart();
// Add to layout
root.getChildren().addAll(
createTitle("JavaFX Charts Customization Demo"),
lineChart.getChart(),
barChart.getChart(),
createChartsRow(pieChart.getChart(), areaChart.getChart())
);
Scene scene = new Scene(root, 1200, 1000);
scene.getStylesheets().add(getClass().getResource("/styles/charts.css").toExternalForm());
primaryStage.setTitle("JavaFX Charts Customization");
primaryStage.setScene(scene);
primaryStage.show();
}
private CustomLineChart createLineChart() {
CustomLineChart chart = new CustomLineChart(
"Sales Performance", "Months", "Revenue ($)"
);
// Add sample data
String[] months = {"Jan", "Feb", "Mar", "Apr", "May", "Jun"};
double[] values = {12000, 18000, 15000, 22000, 19000, 25000};
for (int i = 0; i < months.length; i++) {
chart.addDataPoint(months[i], values[i]);
}
// Apply customizations
chart.setLineStyle(CustomLineChart.LineStyle.SOLID);
chart.applyGradientStroke();
chart.addVerticalMarker("Mar", "Campaign Start");
return chart;
}
private CustomBarChart createBarChart() {
CustomBarChart chart = new CustomBarChart(
"Product Sales by Category", "Categories", "Units Sold"
);
// Add sample data
Map<String, Number> data = Map.of(
"Electronics", 1500,
"Clothing", 2200,
"Books", 800,
"Home & Garden", 1200,
"Sports", 900
);
chart.addSeries("Q1 Sales", data);
chart.addDataLabels();
chart.setGradientFill(true);
return chart;
}
private CustomPieChart createPieChart() {
CustomPieChart chart = new CustomPieChart("Market Share");
// Add sample data
chart.addData("Company A", 35.5);
chart.addData("Company B", 25.2);
chart.addData("Company C", 18.7);
chart.addData("Company D", 12.4);
chart.addData("Others", 8.2);
chart.setLabelPosition(CustomPieChart.LabelPosition.INSIDE);
chart.applyGradientFills();
return chart;
}
private CustomAreaChart createAreaChart() {
CustomAreaChart chart = new CustomAreaChart(
"Website Traffic", "Time", "Visitors"
);
// Add sample data
List<XYChart.Data<Number, Number>> series1 = Arrays.asList(
new XYChart.Data<>(1, 100), new XYChart.Data<>(2, 150),
new XYChart.Data<>(3, 200), new XYChart.Data<>(4, 180),
new XYChart.Data<>(5, 250), new XYChart.Data<>(6, 300)
);
List<XYChart.Data<Number, Number>> series2 = Arrays.asList(
new XYChart.Data<>(1, 50), new XYChart.Data<>(2, 120),
new XYChart.Data<>(3, 180), new XYChart.Data<>(4, 220),
new XYChart.Data<>(5, 280), new XYChart.Data<>(6, 350)
);
chart.addSeries("Organic Traffic", series1);
chart.addSeries("Paid Traffic", series2);
chart.addThresholdLine(200, "Target");
return chart;
}
private Label createTitle(String text) {
Label title = new Label(text);
title.setStyle("""
-fx-font-size: 24px;
-fx-font-weight: bold;
-fx-text-fill: #2c3e50;
-fx-padding: 0 0 10px 0;
""");
return title;
}
private HBox createChartsRow(Node... charts) {
HBox row = new HBox(20);
row.getChildren().addAll(charts);
return row;
}
public static void main(String[] args) {
launch(args);
}
}

Key Customization Features Covered

  1. Visual Styling: Colors, gradients, patterns, borders, shadows
  2. Interactivity: Hover effects, click handlers, tooltips
  3. Animations: Transitions, scale effects, smooth updates
  4. Advanced Features: Trend lines, threshold markers, data labels
  5. Responsive Design: Mobile-friendly adaptations
  6. Export Capabilities: PNG export functionality
  7. CSS Integration: Comprehensive styling through CSS
  8. Performance: Optimized rendering and updates

These customization techniques allow you to create professional, interactive, and visually appealing charts that meet modern UI/UX standards while maintaining the power and flexibility of JavaFX.

Category : JAVA

Leave a Reply

Your email address will not be published. Required fields are marked *


Macro Nepal Helper