ECharts User's Guide | Oorian Framework

1. Overview

The Oorian ECharts Library provides a comprehensive Java wrapper around Apache ECharts, a powerful, feature-rich charting library maintained by the Apache Software Foundation. It enables Oorian developers to create interactive, animated charts entirely in Java, following the Oorian philosophy of pure server-side development.

Key Features

15 chart types: line, bar, pie, scatter, gauge, radar, candlestick, sunburst, funnel, treemap, heatmap, graph, boxplot, Sankey, tree, parallel, and theme river
Full configuration support for titles, legends, tooltips, toolboxes, axes, and grids
Type-safe series classes with chart-specific properties and convenience methods
Automatic JavaScript resource management via EChartsChart.create()
JSON serialization through the Oorian Jsonable interface
Charts render as Div elements, fully compatible with Oorian layout and styling
Hierarchical data support for sunburst, treemap, and tree charts

2. Getting Started

Required Files

The ECharts extension consists of three components:

File	Description
`oorian-echarts-x.y.z.jar`	The Oorian ECharts library JAR. Add this to your web application's classpath (e.g., `WEB-INF/lib`). Available from the downloads page.
`oorian-echarts-x.y.z.js`	The Oorian-to-ECharts bridge script. This client-side file connects the Java API to the native ECharts library. Deploy it to your web application's public folder. Available from the downloads page.
`echarts.min.js`	The native Apache ECharts JavaScript library. Download from the ECharts download page.

Initialize the Library

In your page's createBody() method, call ECharts.initialize(this) to add all required JavaScript resources.

Java

@Override
protected void createBody(Body body)
{
    ECharts.initialize(this);
}

That's it! The initialize() call adds both the ECharts library and bridge script to the page head. No JavaScript code is needed.

Custom Configuration (Optional)

If your files are in non-default locations, set the paths before calling initialize():

Java

ECharts.setApacheEChartsJs("/assets/echarts/echarts.min.js");
ECharts.setOorianEChartsJs("/assets/echarts/oorian.echarts.js");
ECharts.initialize(this);

Create a Chart

After initializing the library, create chart components and add them to the page body.

Java

@Page("/dashboard")
public class DashboardPage extends HtmlPage
{
    @Override
    protected void createBody(Body body)
    {
        // Create a bar chart
        EChartsBarChart chart = new EChartsBarChart();
        chart.getStyle().setWidth("100%");
        chart.getStyle().setHeight("400px");

        // Set title
        chart.setTitle(new EChartsTitle("Monthly Sales"));

        // Configure tooltip
        EChartsTooltip tooltip = new EChartsTooltip();
        tooltip.setTrigger("axis");
        chart.setTooltip(tooltip);

        // Configure X axis
        EChartsAxis xAxis = new EChartsAxis();
        xAxis.setType("category");
        xAxis.addData("Jan");
        xAxis.addData("Feb");
        xAxis.addData("Mar");
        chart.addXAxis(xAxis);

        // Configure Y axis
        EChartsAxis yAxis = new EChartsAxis();
        yAxis.setType("value");
        chart.addYAxis(yAxis);

        // Add data series
        EChartsBarSeries series = chart.createBarSeries("Sales");
        series.addData(120);
        series.addData(200);
        series.addData(150);

        body.addElement(chart);
    }
}

3. Line & Area Charts

EChartsLineChart displays data as connected line segments, ideal for showing trends over time. By enabling area fill, you get area charts. Multiple series can be overlaid or stacked.

Simple Line Chart

Java

EChartsLineChart chart = new EChartsLineChart();
chart.getStyle().setWidth("100%");
chart.getStyle().setHeight("400px");

// Title and tooltip
chart.setTitle(new EChartsTitle("Weekly Temperature"));
EChartsTooltip tooltip = new EChartsTooltip();
tooltip.setTrigger("axis");
chart.setTooltip(tooltip);

// X axis with categories
EChartsAxis xAxis = new EChartsAxis();
xAxis.setType("category");
xAxis.addData("Mon"); xAxis.addData("Tue"); xAxis.addData("Wed");
xAxis.addData("Thu"); xAxis.addData("Fri"); xAxis.addData("Sat");
xAxis.addData("Sun");
chart.addXAxis(xAxis);

// Y axis
EChartsAxis yAxis = new EChartsAxis();
yAxis.setType("value");
yAxis.setName("Temperature");
chart.addYAxis(yAxis);

// Data series
EChartsLineSeries series = chart.createLineSeries("Temperature");
series.addData(10); series.addData(11); series.addData(13);
series.addData(11); series.addData(12); series.addData(15);
series.addData(17);

Smooth Line Chart

Enable smooth curves by calling setSmooth(true) on the series:

Java

EChartsLineSeries series = chart.createLineSeries("Stock A");
series.setSmooth(true);
series.addData(150); series.addData(230); series.addData(224);
series.addData(218); series.addData(195); series.addData(250);

Area Chart

Convert a line chart to an area chart by adding an AreaStyle:

Java

EChartsLineSeries series = chart.createLineSeries("Visitors");
series.setSmooth(true);
series.setAreaStyle(new AreaStyle());  // Fills area under the line
series.addData(820); series.addData(932); series.addData(901);

EChartsLineSeries Properties

Method	Description
`setSmooth(Boolean)`	Enable smooth/curved lines
`setStack(String)`	Stack group name for stacked area charts
`setStep(String)`	Step line type: "start", "middle", or "end"
`setSymbol(String)`	Symbol type: "circle", "rect", "triangle", etc.
`setSymbolSize(Number)`	Size of data point symbols
`setShowSymbol(Boolean)`	Whether to show symbols on data points
`setConnectNulls(Boolean)`	Connect across null/missing values
`setAreaStyle(AreaStyle)`	Fill area under the line
`setLineStyle(LineStyle)`	Customize line width, color, dash pattern
`setItemStyle(ItemStyle)`	Customize data point colors and borders
`setLabel(Label)`	Show data labels on points
`setEmphasis(Emphasis)`	Highlight styling on hover

4. Bar Charts

EChartsBarChart displays data as vertical or horizontal bars, ideal for comparing quantities across categories. Multiple series create grouped bars; use setStack() for stacked bars.

Simple Bar Chart

Java

EChartsBarChart chart = new EChartsBarChart();
chart.getStyle().setWidth("100%");
chart.getStyle().setHeight("400px");
chart.setTitle(new EChartsTitle("Monthly Sales"));

EChartsTooltip tooltip = new EChartsTooltip();
tooltip.setTrigger("axis");
chart.setTooltip(tooltip);

// Category axis
EChartsAxis xAxis = new EChartsAxis();
xAxis.setType("category");
xAxis.addData("Jan"); xAxis.addData("Feb"); xAxis.addData("Mar");
xAxis.addData("Apr"); xAxis.addData("May"); xAxis.addData("Jun");
chart.addXAxis(xAxis);

// Value axis
EChartsAxis yAxis = new EChartsAxis();
yAxis.setType("value");
chart.addYAxis(yAxis);

// Data
EChartsBarSeries series = chart.createBarSeries("Sales");
series.addData(120); series.addData(200); series.addData(150);
series.addData(80);  series.addData(170); series.addData(210);

Grouped Bar Chart

Add multiple series to create side-by-side grouped bars automatically:

Java

// Add a legend to distinguish series
chart.setLegend(new EChartsLegend());

EChartsBarSeries series2023 = chart.createBarSeries("2023");
series2023.addData(320); series2023.addData(332); series2023.addData(301);

EChartsBarSeries series2024 = chart.createBarSeries("2024");
series2024.addData(220); series2024.addData(182); series2024.addData(191);

Stacked Bar Chart

Assign the same stack group name to multiple series:

Java

EChartsBarSeries seriesA = chart.createBarSeries("Product A");
seriesA.setStack("total");
seriesA.addData(120); seriesA.addData(132); seriesA.addData(101);

EChartsBarSeries seriesB = chart.createBarSeries("Product B");
seriesB.setStack("total");
seriesB.addData(220); seriesB.addData(182); seriesB.addData(191);

EChartsBarSeries seriesC = chart.createBarSeries("Product C");
seriesC.setStack("total");
seriesC.addData(150); seriesC.addData(232); seriesC.addData(201);

EChartsBarSeries Properties

Method	Description
`setStack(String)`	Stack group name for stacked bars
`setBarWidth(Number)`	Width of individual bars
`setBarMaxWidth(Number)`	Maximum bar width
`setBarGap(Number)`	Gap between bars in same category
`setBarCategoryGap(Number)`	Gap between categories
`setLarge(Boolean)`	Enable large data mode optimization
`setXAxisIndex(Integer)`	Index of X axis for multi-axis charts
`setYAxisIndex(Integer)`	Index of Y axis for multi-axis charts
`setItemStyle(ItemStyle)`	Customize bar colors, borders, corners
`setLabel(Label)`	Show data labels on bars
`setEmphasis(Emphasis)`	Highlight styling on hover

5. Pie & Doughnut Charts

EChartsPieChart displays data as proportional segments of a circle. Set inner and outer radius to create doughnut charts. Use setRoseType(true) for nightingale/rose charts.

Simple Pie Chart

Java

EChartsPieChart chart = new EChartsPieChart();
chart.getStyle().setWidth("100%");
chart.getStyle().setHeight("400px");

EChartsTitle title = new EChartsTitle("Market Share");
title.setLeft("center");
chart.setTitle(title);

EChartsTooltip tooltip = new EChartsTooltip();
tooltip.setTrigger("item");
chart.setTooltip(tooltip);

EChartsLegend legend = new EChartsLegend();
legend.setOrient("vertical");
legend.setLeft("left");
chart.setLegend(legend);

// Pie data uses name-value pairs
EChartsPieSeries series = chart.createPieSeries("Market Share");
series.setRadius(150);
series.addData("Product A", 1048);
series.addData("Product B", 735);
series.addData("Product C", 580);
series.addData("Product D", 484);
series.addData("Product E", 300);

Pie vs. Cartesian: Pie charts do not use X or Y axes. Data is added as name-value pairs using series.addData(String name, Number value) rather than plain numeric values.

Doughnut Chart

Set inner and outer radius to create a ring/doughnut:

Java

EChartsPieSeries series = chart.createPieSeries("Traffic");
series.setRadius(80, 140);  // inner radius, outer radius (pixels)

// Or use percentage strings:
series.setRadius("40%", "70%");

Rose / Nightingale Chart

Java

EChartsPieSeries series = chart.createPieSeries("Categories");
series.setRadius(40, 140);
series.setRoseType(true);  // Varies radius by value

EChartsPieSeries Properties

Method	Description
`addData(String, Number)`	Add a named data segment
`setRadius(float)`	Set pie radius in pixels
`setRadius(String)`	Set radius as percentage (e.g., "70%")
`setRadius(Number, Number)`	Set inner/outer radius for doughnut
`setRadius(String, String)`	Set inner/outer radius as percentages
`setCenter(String, String)`	Set center position (e.g., "50%", "50%")
`setRoseType(Boolean)`	Enable nightingale/rose chart mode
`setStartAngle(Number)`	Starting angle in degrees
`setClockwise(Boolean)`	Draw clockwise or counter-clockwise
`setAvoidLabelOverlap(Boolean)`	Prevent label overlap
`setLabel(Label)`	Configure label display
`setLabelLine(LabelLine)`	Configure connecting lines to labels

6. Scatter Charts

EChartsScatterChart plots data points on a two-dimensional coordinate system. Ideal for showing correlations, clusters, and distributions.

Basic Scatter Chart

Java

EChartsScatterChart chart = new EChartsScatterChart();
chart.getStyle().setWidth("100%");
chart.getStyle().setHeight("400px");

chart.setTitle(new EChartsTitle("Height vs Weight"));

// Both axes are value type for scatter
EChartsAxis xAxis = new EChartsAxis();
xAxis.setType("value");
xAxis.setName("Height (cm)");
chart.addXAxis(xAxis);

EChartsAxis yAxis = new EChartsAxis();
yAxis.setType("value");
yAxis.setName("Weight (kg)");
chart.addYAxis(yAxis);

// Scatter data uses [x, y] coordinate pairs
EChartsScatterSeries series = chart.createScatterSeries("Male");
series.addData(175); // Use JsonArray or addData for pairs
series.addData(180);
series.addData(165);

EChartsScatterSeries Properties

Method	Description
`setSymbol(String)`	Point shape: "circle", "rect", "triangle", "diamond", etc.
`setSymbolSize(Number)`	Size of scatter points
`setItemStyle(ItemStyle)`	Color and border of points
`setLabel(Label)`	Data labels on points
`setEmphasis(Emphasis)`	Hover highlight style
`setLarge(Boolean)`	Optimize for large datasets

7. Gauge & Radar Charts

Gauge Chart

EChartsGaugeChart displays a single value within a defined range, like a speedometer. Ideal for KPIs and real-time monitoring dashboards.

Java

EChartsGaugeChart chart = new EChartsGaugeChart();
chart.getStyle().setWidth("100%");
chart.getStyle().setHeight("400px");

EChartsGaugeSeries gauge = chart.createGaugeSeries("CPU Usage");
gauge.setMin(0);
gauge.setMax(100);
gauge.setRadius(120);         // or setRadius("75%")
gauge.setSplitNumber(10);
gauge.addData("CPU", 67);    // name-value pair

EChartsGaugeSeries Properties

Method	Description
`addData(String, Number)`	Add a named value to the gauge
`setMin(Number) / setMax(Number)`	Value range
`setRadius(Number) / setRadius(String)`	Gauge radius in pixels or percentage
`setCenter(String, String)`	Position within chart area
`setStartAngle(Number) / setEndAngle(Number)`	Arc extent in degrees
`setSplitNumber(Integer)`	Number of tick divisions
`setPointer(Pointer)`	Customize the gauge needle
`setAxisLine(AxisLine)`	Customize the arc line
`setDetail(Detail)`	Configure the value display

Radar Chart

EChartsRadarChart displays multivariate data on axes starting from the same center point. Perfect for comparing attributes across dimensions.

Java

EChartsRadarChart chart = new EChartsRadarChart();
chart.getStyle().setWidth("100%");
chart.getStyle().setHeight("500px");

chart.setTitle(new EChartsTitle("Player Comparison"));

// Define radar indicators (name, maxValue pairs)
EChartsRadar radar = chart.createRadar(
    "Speed", 100,
    "Power", 100,
    "Defense", 100,
    "Agility", 100,
    "Stamina", 100
);
radar.setRadius(120);

// Add data series
EChartsRadarSeries series = chart.createRadarSeries("Players");
series.addData("Player 1", 85, 70, 90, 95, 80);

Radar Indicators: The createRadar() convenience method accepts alternating name/max-value pairs as varargs. Each pair defines one axis of the radar polygon.

8. Specialized Charts

The ECharts library includes several specialized chart types for domain-specific visualization needs.

Candlestick Chart

Displays OHLC (Open-High-Low-Close) financial data. Each data point contains four values.

Java

EChartsCandlestickChart chart = new EChartsCandlestickChart();

EChartsAxis xAxis = new EChartsAxis();
xAxis.setType("category");
xAxis.addData("2024-01-01"); xAxis.addData("2024-01-02");
chart.addXAxis(xAxis);

EChartsCandlestickSeries series = chart.createCandlestickSeries("Stock Price");
// Format: open, close, low, high
series.addData(100, 102, 99, 104);
series.addData(102, 98, 97, 103);

Funnel Chart

Displays stages of a process with decreasing values, ideal for conversion funnels and sales pipelines.

Java

EChartsFunnelChart chart = new EChartsFunnelChart();

EChartsFunnelSeries series = chart.createFunnelSeries("Sales Funnel");
series.addData("Visits", 1200);
series.addData("Signups", 800);
series.addData("Trials", 400);
series.addData("Purchases", 200);

Heatmap Chart

Displays data intensity as colored cells. Each data point is a [x, y, value] triplet.

Java

EChartsHeatmapChart chart = new EChartsHeatmapChart();

EChartsAxis xAxis = new EChartsAxis();
xAxis.setType("category");
xAxis.addData("Mon"); xAxis.addData("Tue"); xAxis.addData("Wed");
chart.addXAxis(xAxis);

EChartsAxis yAxis = new EChartsAxis();
yAxis.setType("category");
yAxis.addData("Morning"); yAxis.addData("Afternoon");
chart.addYAxis(yAxis);

EChartsHeatmapSeries series = chart.createHeatmapSeries("Activity");
series.addData(0, 0, 10);  // Monday Morning: 10
series.addData(0, 1, 25);  // Monday Afternoon: 25
series.addData(1, 0, 15);  // Tuesday Morning: 15

Graph / Network Chart

Displays nodes and their relationships with force-directed or circular layouts.

Java

EChartsGraphChart chart = new EChartsGraphChart();

EChartsGraphSeries series = chart.createGraphSeries("Network");
series.setLayout("force");
series.configureForce(100, 50);  // repulsion, edgeLength
series.setRoam(true);
series.setDraggable(true);

// Add nodes
series.addNode("Alice", 10);
series.addNode("Bob", 8);
series.addNode("Charlie", 6);

// Add links between nodes
series.addLink("Alice", "Bob");
series.addLink("Bob", "Charlie");
series.addLink("Alice", "Charlie");

Sankey Diagram

Displays flow data with node widths and link widths proportional to values.

Java

EChartsSankeyChart chart = new EChartsSankeyChart();

EChartsSankeySeries series = chart.createSankeySeries("Energy Flow");
series.addNode("Coal");
series.addNode("Natural Gas");
series.addNode("Electricity");
series.addNode("Industry");

series.addLink("Coal", "Electricity", 100);
series.addLink("Natural Gas", "Electricity", 50);
series.addLink("Electricity", "Industry", 80);

Treemap Chart

Displays hierarchical data as nested rectangles, with area proportional to value.

Java

EChartsTreemapChart chart = new EChartsTreemapChart();

EChartsTreemapSeries series = chart.createTreemapSeries("Disk Usage");

// Use static helper methods for hierarchical data
TreemapData root = EChartsTreemapChart.createData("Root", 100);
root.addChild(EChartsTreemapChart.createData("Documents", 40));
root.addChild(EChartsTreemapChart.createData("Pictures", 35));
root.addChild(EChartsTreemapChart.createData("Videos", 25));
series.addData(root);

Other Specialized Charts

Chart Type	Class	Use Case
Sunburst	`EChartsSunburstChart`	Hierarchical data as concentric rings
Tree	`EChartsTreeChart`	Org charts, decision trees, file systems
Boxplot	`EChartsBoxplotChart`	Statistical distributions (min, Q1, median, Q3, max)
Parallel	`EChartsParallelChart`	Multi-dimensional data comparison
Theme River	`EChartsThemeRiverChart`	Thematic trends over time (streamgraph)

9. Configuration Options

Every chart inherits a rich set of configuration options from the EChartsChart base class. These options control the chart's appearance, interactivity, and layout.

Title

The EChartsTitle class configures the chart's main title and optional subtitle.

Java

// Simple title
chart.setTitle(new EChartsTitle("My Chart"));

// Title with subtitle
chart.setTitle(new EChartsTitle("Revenue Report", "Q4 2024"));

// Fully configured title
EChartsTitle title = new EChartsTitle();
title.setText("Sales Dashboard");
title.setSubtext("Updated daily");
title.setLeft("center");   // "left", "center", "right", or pixel/percent
title.setTop("10");
chart.setTitle(title);

Tooltip

The EChartsTooltip class controls hover information display.

Java

EChartsTooltip tooltip = new EChartsTooltip();
tooltip.setTrigger("axis");      // "item", "axis", or "none"
tooltip.setTriggerOn("mousemove"); // "mousemove", "click", or "mousemove|click"
tooltip.setFormatter("{b}: {c}"); // Template string
chart.setTooltip(tooltip);

Trigger Type	Description	Best For
`"item"`	Shows tooltip for individual data items	Pie, scatter, funnel charts
`"axis"`	Shows tooltip for all series at the same axis position	Line, bar, candlestick charts
`"none"`	Disables tooltip	When tooltip is not needed

Legend

The EChartsLegend class controls the series visibility toggles.

Java

EChartsLegend legend = new EChartsLegend();
legend.setType("scroll");       // "plain" or "scroll" for many items
legend.setOrient("vertical");    // "horizontal" or "vertical"
legend.setLeft("left");
legend.setTop("middle");
chart.setLegend(legend);

Grid

The EChartsGrid class defines the layout container for cartesian coordinate charts.

Java

EChartsGrid grid = new EChartsGrid();
grid.setLeft("10%");
grid.setRight("10%");
grid.setTop("60");
grid.setBottom("60");
grid.setContainLabel(true);  // Auto-include axis labels in grid bounds
chart.setGrid(grid);

Axis

The EChartsAxis class configures X and Y axes with extensive options for type, range, labels, ticks, and lines.

Java

EChartsAxis axis = new EChartsAxis();
axis.setType("category");     // "value", "category", "time", or "log"
axis.setName("Month");
axis.setNameLocation("end");   // "start", "center", or "end"
axis.setBoundaryGap(true);
axis.setMin(0);
axis.setMax(100);

// Sub-components
axis.setAxisLine(new AxisLine());
axis.setAxisTick(new AxisTick());
axis.setAxisLabel(new AxisLabel());
axis.setSplitLine(new SplitLine());
axis.setSplitArea(new SplitArea());
axis.setAxisPointer(new AxisPointer());

Axis Type	Description	Data Method
`"value"`	Continuous numeric axis	Auto-calculated from series data
`"category"`	Discrete category axis	`addData(String)` for each category
`"time"`	Time/date axis	Timestamp data in series
`"log"`	Logarithmic axis	Auto-calculated, set `logBase`

Toolbox

The EChartsToolbox class adds interactive tools like save-as-image, data view, zoom, and reset to the chart.

Java

EChartsToolbox toolbox = new EChartsToolbox();
chart.setToolbox(toolbox);

10. Styling & Customization

The ECharts library provides fine-grained control over visual appearance through a hierarchy of style objects.

Chart Size

Since each chart is a Div, you set its size using standard Oorian style methods:

Java

// Fixed size
chart.getStyle().setWidth("800px");
chart.getStyle().setHeight("500px");

// Responsive width
chart.getStyle().setWidth("100%");
chart.getStyle().setHeight("400px");

Height Required: Charts must have an explicit height set. Unlike width, height cannot be "auto" because ECharts needs a defined pixel height to render the canvas correctly.

ItemStyle

Controls the appearance of data elements (bars, points, pie slices, etc.):

Java

ItemStyle style = new ItemStyle();
style.setColor("#5470c6");
style.setBorderColor("#333");
style.setBorderWidth(1);
style.setBorderRadius(4);
style.setOpacity(0.8);
series.setItemStyle(style);

LineStyle

Controls line appearance for line charts and graph edges:

Java

LineStyle lineStyle = new LineStyle();
lineStyle.setColor("#ee6666");
lineStyle.setWidth(3);
lineStyle.setType("dashed");  // "solid", "dashed", or "dotted"
lineSeries.setLineStyle(lineStyle);

TextStyle

Controls text appearance for titles, labels, and axis names:

Java

TextStyle textStyle = new TextStyle();
textStyle.setColor("#333");
textStyle.setFontSize(14);
textStyle.setFontWeight("bold");
textStyle.setFontFamily("Arial");
title.setTextStyle(textStyle);

Label

Controls data labels displayed on or near data elements:

Java

Label label = new Label();
label.setShow(true);
label.setPosition("top");    // "top", "inside", "outside", etc.
label.setFormatter("{c}");    // {a}=series name, {b}=data name, {c}=value
series.setLabel(label);

Emphasis

Controls the highlight effect when hovering over data elements:

Java

Emphasis emphasis = new Emphasis();
emphasis.setFocus("series");  // Highlight the entire series on hover
series.setEmphasis(emphasis);

Styling Summary

Style Class	Used On	Key Properties
`ItemStyle`	Series data elements	color, borderColor, borderWidth, borderRadius, opacity, shadowColor, shadowBlur
`LineStyle`	Lines, edges, axis lines	color, width, type, opacity, shadowColor
`AreaStyle`	Area under lines	color, opacity
`TextStyle`	Title, labels, axis names	color, fontSize, fontWeight, fontFamily, fontStyle
`Label`	Data labels	show, position, formatter, color, fontSize
`LabelLine`	Pie chart label connectors	show, length, lineStyle
`Emphasis`	Hover effects	focus, itemStyle, label, lineStyle
`Pointer`	Gauge needle	show, length, width
`Detail`	Gauge value display	show, formatter, fontSize, color

11. API Reference

ECharts (Entry Point)

Static configuration class for JavaScript resource paths.

Java

static void setApacheEChartsJs(String path)
static void setOorianEChartsJs(String path)
static void setScriptPath(String path)
static String getApacheEChartsJs()
static String getOorianEChartsJs()

EChartsChart<T> (Abstract Base Class)

Base class for all chart types. Extends Div<T> and implements Jsonable.

Setters:

Java

void setTitle(EChartsTitle title)
void setLegend(EChartsLegend legend)
void setGrid(EChartsGrid grid)
void setTooltip(EChartsTooltip tooltip)
void setToolbox(EChartsToolbox toolbox)
void setXAxis(List<EChartsAxis> xAxis)
void setYAxis(List<EChartsAxis> yAxis)
void setSeries(List<EChartsSeries> series)

Add Methods:

Java

void addXAxis(EChartsAxis axis)
void addYAxis(EChartsAxis axis)
void addSeries(EChartsSeries series)

Getters:

Java

EChartsTitle getTitle()
EChartsLegend getLegend()
EChartsGrid getGrid()
EChartsTooltip getTooltip()
EChartsToolbox getToolbox()
List<EChartsAxis> getXAxis()
List<EChartsAxis> getYAxis()
List<EChartsSeries> getSeries()

EChartsChart Type Factory Methods

Each chart class provides a factory method that creates, names, adds, and returns the appropriate series type:

Chart Class	Factory Method	Returns
`EChartsBarChart`	`createBarSeries(String name)`	`EChartsBarSeries`
`EChartsLineChart`	`createLineSeries(String name)`	`EChartsLineSeries`
`EChartsPieChart`	`createPieSeries(String name)`	`EChartsPieSeries`
`EChartsScatterChart`	`createScatterSeries(String name)`	`EChartsScatterSeries`
`EChartsGaugeChart`	`createGaugeSeries(String name)`	`EChartsGaugeSeries`
`EChartsRadarChart`	`createRadarSeries(String name)`	`EChartsRadarSeries`
`EChartsCandlestickChart`	`createCandlestickSeries(String name)`	`EChartsCandlestickSeries`
`EChartsSunburstChart`	`createSunburstSeries(String name)`	`EChartsSunburstSeries`
`EChartsFunnelChart`	`createFunnelSeries(String name)`	`EChartsFunnelSeries`
`EChartsTreemapChart`	`createTreemapSeries(String name)`	`EChartsTreemapSeries`
`EChartsHeatmapChart`	`createHeatmapSeries(String name)`	`EChartsHeatmapSeries`
`EChartsGraphChart`	`createGraphSeries(String name)`	`EChartsGraphSeries`
`EChartsBoxplotChart`	`createBoxplotSeries(String name)`	`EChartsBoxplotSeries`
`EChartsSankeyChart`	`createSankeySeries(String name)`	`EChartsSankeySeries`
`EChartsTreeChart`	`createTreeSeries(String name)`	`EChartsTreeSeries`
`EChartsParallelChart`	`createParallelSeries(String name)`	`EChartsParallelSeries`
`EChartsThemeRiverChart`	`createThemeRiverSeries(String name)`	`EChartsThemeRiverSeries`

EChartsSeries (Abstract Base Class)

Base class for all series types. Manages type, name, and data list.

Java

void setType(String type)
void setName(String name)
void setData(List<Object> data)
void addData(Object item)
String getType()
String getName()
List<Object> getData()

EChartsRadarChart (Additional Methods)

Java

EChartsRadar createRadar(Object... indicators)
void addRadar(EChartsRadar radar)

EChartsParallelChart (Additional Methods)

Java

void addParallelAxis(String name, Number min, Number max)
void addParallelAxis(String name)

EChartsThemeRiverChart (Additional Methods)

Java

void addLegendItem(String themeName)

EChartsGraphSeries (Node/Link Methods)

Java

void addNode(String name, Number value)
void addNode(String name, Number value, int category)
void addNode(String name, Number value, Number x, Number y)
void addLink(String source, String target)
void addLink(String source, String target, Number value)
void addCategory(String name)
EChartsGraphSeries configureForce(Number repulsion, Number edgeLength)
void setLayout(String layout) // "none", "circular", "force"
void setRoam(Boolean roam)
void setDraggable(Boolean draggable)

Static Helper Methods

Java

EChartsTreemapChart.createData(String name, Number value)
EChartsTreemapChart.createData(String name, Number value, List<TreemapData> children)
EChartsSunburstChart.createData(String name, Number value)
EChartsSunburstChart.createData(String name, Number value, List<SunburstData> children)

Complete Options Reference

Option Class	Key Methods
`EChartsTitle`	setText, setSubtext, setLeft, setTop, setRight, setBottom, setTextStyle, setSubtextStyle
`EChartsLegend`	setType, setOrient, setLeft, setTop, setRight, setBottom, setData, addData, setTextStyle
`EChartsGrid`	setLeft, setTop, setRight, setBottom, setWidth, setHeight, setContainLabel
`EChartsTooltip`	setShow, setTrigger, setTriggerOn, setFormatter, setValueFormatter, setAxisPointer, setTextStyle
`EChartsAxis`	setType, setName, setNameLocation, setData, addData, setMin, setMax, setBoundaryGap, setAxisLine, setAxisTick, setAxisLabel, setSplitLine, setSplitArea, setAxisPointer
`ItemStyle`	setColor, setBorderColor, setBorderWidth, setBorderRadius, setOpacity, setShadowColor, setShadowBlur
`LineStyle`	setColor, setWidth, setType, setOpacity, setShadowColor
`TextStyle`	setColor, setFontSize, setFontWeight, setFontFamily, setFontStyle
`Label`	setShow, setPosition, setFormatter, setColor, setFontSize
`AxisLine`	setShow, setLineStyle
`AxisTick`	setShow, setAlignWithLabel, setLength
`AxisLabel`	setShow, setRotate, setFormatter
`SplitLine`	setShow, setLineStyle
`Emphasis`	setFocus, setItemStyle, setLabel, setLineStyle

Oorian Integration: All chart classes extend Div, so they support the full Oorian element API including addClass(), getStyle(), setId(), event registration, and parent-child hierarchy. Charts integrate seamlessly with any Oorian layout.

← Back to Documentation View Feature Overview →

Table of Contents

1. Overview

Key Features

2. Getting Started

Required Files

Initialize the Library

Custom Configuration (Optional)

Create a Chart

3. Line & Area Charts

Simple Line Chart

Smooth Line Chart

Area Chart

EChartsLineSeries Properties

4. Bar Charts

Simple Bar Chart

Grouped Bar Chart

Stacked Bar Chart

EChartsBarSeries Properties

5. Pie & Doughnut Charts

Simple Pie Chart

Doughnut Chart

Rose / Nightingale Chart

EChartsPieSeries Properties

6. Scatter Charts

Basic Scatter Chart

EChartsScatterSeries Properties

7. Gauge & Radar Charts

Gauge Chart

EChartsGaugeSeries Properties

Radar Chart

8. Specialized Charts

Candlestick Chart

Funnel Chart

Heatmap Chart

Graph / Network Chart

Sankey Diagram

Treemap Chart

Other Specialized Charts

9. Configuration Options

Title

Tooltip

Legend

Grid

Axis

Toolbox

10. Styling & Customization

Chart Size

ItemStyle

LineStyle

TextStyle

Label

Emphasis

Styling Summary

11. API Reference

ECharts (Entry Point)

EChartsChart<T> (Abstract Base Class)

EChartsChart Type Factory Methods

EChartsSeries (Abstract Base Class)

EChartsRadarChart (Additional Methods)

EChartsParallelChart (Additional Methods)

EChartsThemeRiverChart (Additional Methods)

EChartsGraphSeries (Node/Link Methods)

Static Helper Methods

Complete Options Reference