1. Overview
The Oorian ApexCharts Library provides a complete Java wrapper around ApexCharts, a modern interactive charting library for the web. It enables Oorian developers to create rich, animated charts entirely in Java, following the Oorian philosophy of pure server-side development.
Key Features
- Fluent Java API supporting 17 chart types: line, area, bar, column, pie, donut, radial bar, scatter, bubble, heatmap, treemap, radar, polar area, range bar, range area, candlestick, and box plot
- Convenience shortcut classes (
ApexLineChart,ApexBarChart,ApexPieChart, etc.) for quick chart creation - Rich data series support: simple values, XY points, bubble points, OHLC candlestick data, five-number summary box plots, and range data
- Configurable toolbar, zoom, animations, data labels, legend, and grid
- Custom colors per chart or per series
- Stacked and 100% stacked chart support
- Mixed chart types within a single chart
- Dynamic series updates with animation control
- CDN or local resource loading
- Dark theme support with foreground color configuration
2. Getting Started
Required Files
The ApexCharts extension consists of three components:
| File | Description |
|---|---|
oorian-apexcharts-x.y.z.jar |
The Oorian ApexCharts library JAR. Add this to your web application's classpath (e.g., WEB-INF/lib). Available from the downloads page. |
oorian-apexcharts-x.y.z.js |
The Oorian-to-ApexCharts bridge script. This client-side file connects the Java API to the native ApexCharts library. Deploy it to your web application's public folder. Available from the downloads page. |
apexcharts.min.js |
The native ApexCharts JavaScript library. By default, this is loaded from CDN (cdn.jsdelivr.net). To host locally, download it from the ApexCharts GitHub releases page and deploy it alongside the bridge script. |
CDN Mode (Default): By default, the library loads apexcharts.min.js from cdn.jsdelivr.net. You can disable CDN mode with ApexCharts.setUseCdn(false) to use local files instead. The bridge script is always loaded locally.
Initialize the Library
In your page's createBody() method, call ApexCharts.initialize(this) to wire up all required JavaScript resources and the initialization script.
@Override
protected void createBody(Body body)
{
ApexCharts.initialize(this);
}That's it! The initialize() call adds the JavaScript resources to the page head and the initialization script to the body. No JavaScript code is needed.
Custom Configuration (Optional)
If your files are in non-default locations, set the paths before calling initialize():
ApexCharts.setApexChartsRootPath("/assets/apexcharts");
ApexCharts.setOorianApexChartsJsPath("/assets/oorian/");
ApexCharts.setUseCdn(false);
ApexCharts.initialize(this);Create a Chart
After initializing the library, create chart components and add them to the page body.
ApexChart chart = new ApexChart(ApexChart.TYPE_LINE);
chart.setTitle("Monthly Sales");
chart.setChartHeight(350);
chart.setCategories("Jan", "Feb", "Mar", "Apr", "May");
chart.addSeries(new ApexSeries("Sales").setData(30, 40, 35, 50, 49));
body.addElement(chart);3. Chart Types
The library supports 17 chart types. You can create charts two ways: using the generic ApexChart with a TYPE_* constant, or using a dedicated shortcut class.
| Type Constant | Shortcut Class | Description |
|---|---|---|
TYPE_LINE | ApexLineChart | Data points connected by line segments; ideal for trends over time |
TYPE_AREA | ApexAreaChart | Line chart with filled area below for quantitative data |
TYPE_BAR | ApexBarChart | Horizontal bars for comparing categories |
TYPE_COLUMN | ApexColumnChart | Vertical bars for comparing categories |
TYPE_PIE | ApexPieChart | Circular chart divided into proportional slices |
TYPE_DONUT | ApexDonutChart | Pie chart with a hollow center |
TYPE_RADIAL_BAR | ApexRadialBarChart | Circular progress-style segments |
TYPE_SCATTER | ApexScatterChart | XY data points for correlation analysis |
TYPE_BUBBLE | ApexBubbleChart | Scatter chart with bubble size as third dimension |
TYPE_HEATMAP | ApexHeatmapChart | Colored grid where intensity represents value |
TYPE_TREEMAP | ApexTreemapChart | Hierarchical data as nested rectangles |
TYPE_RADAR | ApexRadarChart | Multi-axis comparison chart (spider/web) |
TYPE_POLAR_AREA | ApexPolarAreaChart | Equal-angle segments with varying radii |
TYPE_RANGE_BAR | ApexRangeBarChart | Horizontal bars with start and end values (timeline/Gantt) |
TYPE_RANGE_AREA | ApexRangeAreaChart | Filled areas with upper and lower bounds |
TYPE_CANDLESTICK | ApexCandlestickChart | Financial OHLC data visualization |
TYPE_BOX_PLOT | ApexBoxPlotChart | Statistical distributions with five-number summaries |
Generic ApexChart vs. Shortcut Classes
Both approaches produce the same result. Use whichever reads better for your use case:
// Generic approach with type constant
ApexChart chart = new ApexChart(ApexChart.TYPE_LINE);
// Shortcut class approach
ApexLineChart chart = new ApexLineChart();
// You can also set the type later
ApexChart chart = new ApexChart();
chart.setType(ApexChart.TYPE_AREA);The shortcut classes extend ApexChart and pre-set the chart type in their constructor. They inherit all configuration methods from ApexChart.
Column vs. Bar: In ApexCharts, both column (vertical) and bar (horizontal) charts use the underlying "bar" type. The library handles this internally — TYPE_COLUMN sets the type to "bar" with horizontal: false, while TYPE_BAR sets horizontal: true.
4. Series & Data
The ApexSeries class represents a data series in a chart. It supports multiple data formats for different chart types.
Creating Series
// Named series with numeric data
ApexSeries series = new ApexSeries("Revenue");
series.setData(100, 200, 150, 300);
// Fluent API
ApexSeries series = new ApexSeries("Revenue")
.setData(100, 200, 150, 300)
.setColor("#008FFB");
// Unnamed series
ApexSeries series = new ApexSeries();
series.setName("Revenue");
series.addData(100);
series.addData(200);Data Formats
ApexSeries supports five data formats, selected automatically based on which add methods you use:
| Format | Method | Use Case |
|---|---|---|
| Simple numeric | setData(Number...) / addData(Number) | Line, area, bar, column, radar charts |
| XY data points | addDataPoint(Object x, Number y) | Scatter charts, custom axis data |
| Bubble points | addBubblePoint(Object x, Number y, Number z) | Bubble charts (z = bubble size) |
| Candlestick (OHLC) | addCandlestickPoint(Object x, Number open, Number high, Number low, Number close) | Candlestick financial charts |
| Box plot | addBoxPlotPoint(Object x, Number min, Number q1, Number median, Number q3, Number max) | Box plot statistical charts |
| Range | addRangePoint(Object x, Number start, Number end) | Range bar and range area charts |
| Timeline | addTimelinePoint(String x, long start, long end) | Gantt/timeline charts (timestamps) |
Adding Series to Charts
// Single series
chart.addSeries(new ApexSeries("Sales").setData(10, 20, 30));
// Multiple series
chart.addSeries(new ApexSeries("Product A").setData(44, 55, 57));
chart.addSeries(new ApexSeries("Product B").setData(35, 41, 36));
chart.addSeries(new ApexSeries("Product C").setData(27, 30, 47));Mixed Chart Types
For mixed charts, set the type on each series individually:
ApexSeries columnSeries = new ApexSeries("Revenue")
.setType(ApexChart.TYPE_COLUMN)
.setData(440, 505, 414);
ApexSeries lineSeries = new ApexSeries("Orders")
.setType(ApexChart.TYPE_LINE)
.setData(23, 42, 35);Pie/Donut Data
Pie, donut, radial bar, and polar area charts use a different data format with labels and values instead of named series:
chart.setPieData(
new String[]{"Chrome", "Firefox", "Safari", "Edge"},
new Number[]{65, 15, 10, 7}
);Series from a List
You can also set data from a List<Number> for programmatic data population:
List<Number> values = fetchDataFromDatabase();
ApexSeries series = new ApexSeries("Data").setData(values);5. Line & Area Charts
Line charts display data as connected points, ideal for showing trends over time. Area charts fill the region below the line for visual emphasis.
Basic Line Chart
ApexChart chart = new ApexChart(ApexChart.TYPE_LINE);
chart.setTitle("Monthly Sales");
chart.setChartHeight(350);
chart.setCurve(ApexChart.CURVE_SMOOTH);
chart.setCategories("Jan", "Feb", "Mar", "Apr", "May", "Jun");
chart.addSeries(new ApexSeries("Sales").setData(30, 40, 35, 50, 49, 60));
chart.setColors("#008FFB");Area Chart
ApexAreaChart chart = new ApexAreaChart();
chart.setTitle("Website Traffic");
chart.setChartHeight(350);
chart.setCurve(ApexChart.CURVE_SMOOTH);
chart.setCategories("Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun");
chart.addSeries(new ApexSeries("Visitors").setData(1200, 1400, 1100, 1700, 1500, 900, 800));
chart.setColors("#00E396");Curve Types
| Constant | Value | Description |
|---|---|---|
ApexChart.CURVE_SMOOTH | "smooth" | Smooth bezier curves between data points |
ApexChart.CURVE_STRAIGHT | "straight" | Straight lines connecting data points |
ApexChart.CURVE_STEPLINE | "stepline" | Step function lines (horizontal then vertical) |
Multi-Series Line Chart
ApexLineChart chart = new ApexLineChart();
chart.setTitle("Product Comparison");
chart.setChartHeight(350);
chart.setCurve(ApexChart.CURVE_SMOOTH);
chart.setCategories("Q1", "Q2", "Q3", "Q4");
chart.addSeries(new ApexSeries("Product A").setData(44, 55, 57, 56));
chart.addSeries(new ApexSeries("Product B").setData(35, 41, 36, 26));
chart.addSeries(new ApexSeries("Product C").setData(27, 30, 47, 52));
chart.setColors("#008FFB", "#00E396", "#FEB019");Stroke Configuration
Control line width and line cap style for line-based charts:
chart.setStrokeWidth(3); // Line thickness in pixels (default: 2)
chart.setStrokeLineCap("round"); // "butt", "round", or "square"6. Bar & Column Charts
Column charts display data as vertical bars, while bar charts use horizontal bars. Both support grouped, stacked, and 100% stacked layouts.
Vertical Column Chart
ApexColumnChart chart = new ApexColumnChart();
chart.setTitle("Revenue by Quarter");
chart.setChartHeight(350);
chart.setCategories("Q1", "Q2", "Q3", "Q4");
chart.addSeries(new ApexSeries("2023").setData(44, 55, 57, 56));
chart.addSeries(new ApexSeries("2024").setData(76, 85, 101, 98));
chart.setColors("#008FFB", "#00E396");
chart.setDataLabels(true);Horizontal Bar Chart
ApexBarChart chart = new ApexBarChart();
chart.setTitle("Top Countries by Sales");
chart.setChartHeight(350);
chart.setCategories("USA", "UK", "Germany", "France", "Japan");
chart.addSeries(new ApexSeries("Sales").setData(400, 320, 280, 250, 230));
chart.setColors("#FEB019");Stacked Column Chart
ApexChart chart = new ApexChart(ApexChart.TYPE_COLUMN);
chart.setTitle("Sales by Product Category");
chart.setChartHeight(350);
chart.setStacked(true);
chart.setCategories("Jan", "Feb", "Mar", "Apr", "May");
chart.addSeries(new ApexSeries("Electronics").setData(44, 55, 41, 67, 22));
chart.addSeries(new ApexSeries("Clothing").setData(13, 23, 20, 8, 13));
chart.addSeries(new ApexSeries("Home").setData(11, 17, 15, 15, 21));
chart.setColors("#008FFB", "#00E396", "#FEB019");100% Stacked Chart
Enable percentage stacking to show relative proportions:
chart.setStacked(true);
chart.setStackedPercent(true);Funnel Chart
Funnel charts are created using bar charts with the funnel option enabled:
ApexChart chart = new ApexChart(ApexChart.TYPE_BAR);
chart.setTitle("Sales Funnel");
chart.setFunnel(true);
chart.setCategories("Visited", "Added to Cart", "Checkout", "Purchased");
chart.addSeries(new ApexSeries("Funnel").setData(1000, 600, 400, 200));7. Pie, Donut & Radial Bar Charts
These chart types display proportional data. Instead of named series, they use labels and values set via the setPieData() method.
Pie Chart
ApexPieChart chart = new ApexPieChart();
chart.setTitle("Market Share");
chart.setChartHeight(350);
chart.setPieData(
new String[]{"Chrome", "Firefox", "Safari", "Edge", "Other"},
new Number[]{65, 15, 10, 7, 3}
);
chart.setColors("#008FFB", "#00E396", "#FEB019", "#FF4560", "#775DD0");Donut Chart
ApexDonutChart chart = new ApexDonutChart();
chart.setTitle("Sales by Category");
chart.setChartHeight(350);
chart.setPieData(
new String[]{"Electronics", "Clothing", "Home", "Books", "Sports"},
new Number[]{44, 55, 13, 33, 22}
);
chart.setColors("#008FFB", "#00E396", "#FEB019", "#FF4560", "#775DD0");Radial Bar Chart
Radial bar charts display progress or completion as circular segments. Values typically represent percentages (0 - 100).
ApexRadialBarChart chart = new ApexRadialBarChart();
chart.setTitle("Goal Progress");
chart.setChartHeight(350);
chart.setPieData(
new String[]{"Sales", "Revenue", "Customers", "Growth"},
new Number[]{70, 85, 60, 92}
);
chart.setColors("#008FFB", "#00E396", "#FEB019", "#FF4560");
chart.setStrokeLineCap("round");Polar Area Chart
ApexPolarAreaChart chart = new ApexPolarAreaChart();
chart.setTitle("Budget Allocation");
chart.setChartHeight(350);
chart.setPieData(
new String[]{"Engineering", "Marketing", "Sales", "Support"},
new Number[]{42, 28, 18, 12}
);Data Labels: Radial bar charts automatically display data labels showing the name and value of each segment. For pie and donut charts, enable data labels explicitly with chart.setDataLabels(true).
8. Scatter, Bubble & Radar Charts
Scatter Chart
Scatter charts display data points by their x and y coordinates. Use addDataPoint() on the series to add XY data:
ApexScatterChart chart = new ApexScatterChart();
chart.setTitle("Height vs Weight");
chart.setChartHeight(350);
chart.setXAxisTitle("Weight (kg)");
chart.setYAxisTitle("Height (cm)");
ApexSeries teamA = new ApexSeries("Team A");
teamA.addDataPoint(50, 160);
teamA.addDataPoint(60, 165);
teamA.addDataPoint(70, 175);
teamA.addDataPoint(80, 180);
chart.addSeries(teamA);
ApexSeries teamB = new ApexSeries("Team B");
teamB.addDataPoint(55, 155);
teamB.addDataPoint(65, 170);
teamB.addDataPoint(75, 172);
chart.addSeries(teamB);
chart.setColors("#008FFB", "#FF4560");Bubble Chart
Bubble charts add a third dimension using bubble size. Use addBubblePoint(x, y, z) where z controls the bubble size:
ApexBubbleChart chart = new ApexBubbleChart();
chart.setTitle("Market Analysis");
chart.setChartHeight(400);
chart.setXAxisTitle("Revenue ($M)");
chart.setYAxisTitle("Growth (%)");
ApexSeries series = new ApexSeries("Companies");
series.addBubblePoint(10, 25, 15); // x=revenue, y=growth, z=size
series.addBubblePoint(25, 18, 30);
series.addBubblePoint(40, 12, 22);
series.addBubblePoint(55, 35, 10);
chart.addSeries(series);Radar Chart
Radar charts (also known as spider or web charts) display multivariate data on axes starting from the same point. Categories define the axis labels:
ApexRadarChart chart = new ApexRadarChart();
chart.setTitle("Skill Comparison");
chart.setChartHeight(350);
chart.setCategories("JavaScript", "Python", "Java", "C++", "Go", "Rust");
chart.addSeries(new ApexSeries("Developer A").setData(80, 90, 70, 60, 50, 40));
chart.addSeries(new ApexSeries("Developer B").setData(60, 70, 90, 80, 75, 85));
chart.setColors("#008FFB", "#FF4560");9. Financial Charts
ApexCharts provides candlestick charts for visualizing financial OHLC (Open, High, Low, Close) data, commonly used for stock and cryptocurrency trading charts.
Candlestick Chart
ApexCandlestickChart chart = new ApexCandlestickChart();
chart.setTitle("Stock Price (AAPL)");
chart.setChartHeight(400);
chart.setToolbar(true);
chart.setZoom(true);
ApexSeries series = new ApexSeries("AAPL");
// addCandlestickPoint(x, open, high, low, close)
series.addCandlestickPoint("Jan 01", 150.00, 155.00, 148.50, 153.25);
series.addCandlestickPoint("Jan 02", 153.25, 158.00, 152.00, 157.50);
series.addCandlestickPoint("Jan 03", 157.50, 159.00, 154.00, 155.00);
series.addCandlestickPoint("Jan 04", 155.00, 156.50, 150.00, 151.25);
series.addCandlestickPoint("Jan 05", 151.25, 154.00, 149.00, 152.75);
chart.addSeries(series);
chart.setXAxisTitle("Date");
chart.setYAxisTitle("Price ($)");Custom Candlestick Colors
Customize the colors for bullish (upward) and bearish (downward) candles:
chart.setCandlestickColors("#26A69A", "#EF5350"); // green up, red down
chart.setCandlestickWickUseFillColor(true); // wick matches candle colorCryptocurrency Example
ApexChart chart = new ApexChart(ApexChart.TYPE_CANDLESTICK);
chart.setTitle("Cryptocurrency (BTC/USD)");
chart.setChartHeight(400);
chart.setCandlestickColors("#26A69A", "#EF5350");
chart.setCandlestickWickUseFillColor(true);
ApexSeries series = new ApexSeries("BTC");
series.addCandlestickPoint("Mon", 42000, 43500, 41500, 43000);
series.addCandlestickPoint("Tue", 43000, 44000, 42000, 42500);
series.addCandlestickPoint("Wed", 42500, 43000, 40000, 41000);
series.addCandlestickPoint("Thu", 41000, 42500, 40500, 42000);
series.addCandlestickPoint("Fri", 42000, 45000, 41500, 44500);
chart.addSeries(series);Candlestick Configuration Methods
| Method | Description |
|---|---|
setCandlestickColors(String upColor, String downColor) | Set colors for bullish (up) and bearish (down) candles |
setCandlestickWickUseFillColor(boolean) | When true, wicks use the same color as the candle body |
10. Statistical & Range Charts
Box Plot Chart
Box plot charts display statistical distributions showing the five-number summary: minimum, first quartile (Q1), median, third quartile (Q3), and maximum.
ApexBoxPlotChart chart = new ApexBoxPlotChart();
chart.setTitle("Test Scores Distribution");
chart.setChartHeight(400);
ApexSeries series = new ApexSeries("Scores");
// addBoxPlotPoint(x, min, Q1, median, Q3, max)
series.addBoxPlotPoint("Math", 45, 62, 75, 85, 98);
series.addBoxPlotPoint("Science", 50, 65, 78, 88, 95);
series.addBoxPlotPoint("English", 40, 55, 70, 82, 92);
series.addBoxPlotPoint("History", 35, 50, 65, 80, 90);
series.addBoxPlotPoint("Art", 55, 68, 80, 90, 100);
chart.addSeries(series);
chart.setXAxisTitle("Subject");
chart.setYAxisTitle("Score");Custom Box Plot Colors
chart.setBoxPlotColors("#5C4742", "#A5978B"); // upper, lower quartile colorsRange Bar Chart
Range bar charts display horizontal bars with start and end values. They are commonly used for timelines and Gantt charts.
ApexRangeBarChart chart = new ApexRangeBarChart();
chart.setTitle("Temperature Range");
chart.setChartHeight(350);
ApexSeries series = new ApexSeries("Temperature");
// addRangePoint(x, start, end)
series.addRangePoint("January", -5, 10);
series.addRangePoint("February", -3, 12);
series.addRangePoint("March", 2, 18);
series.addRangePoint("April", 8, 24);
chart.addSeries(series);Timeline Chart (Gantt)
Use addTimelinePoint() with timestamps for Gantt-style timeline charts:
ApexRangeBarChart chart = new ApexRangeBarChart();
chart.setTitle("Project Timeline");
chart.setChartHeight(350);
ApexSeries series = new ApexSeries("Tasks");
// addTimelinePoint(taskName, startTimestamp, endTimestamp)
series.addTimelinePoint("Design", 1704067200000L, 1706745600000L);
series.addTimelinePoint("Development", 1706745600000L, 1714521600000L);
series.addTimelinePoint("Testing", 1712016000000L, 1717200000000L);
chart.addSeries(series);Range Area Chart
Range area charts display data as filled areas with upper and lower bounds, useful for showing ranges or confidence intervals:
ApexRangeAreaChart chart = new ApexRangeAreaChart();
chart.setTitle("Confidence Interval");
chart.setChartHeight(350);
ApexSeries series = new ApexSeries("Range");
series.addRangePoint("Jan", 10, 30);
series.addRangePoint("Feb", 15, 35);
series.addRangePoint("Mar", 20, 40);
series.addRangePoint("Apr", 18, 38);
chart.addSeries(series);11. Heatmap & Treemap Charts
Heatmap Chart
Heatmap charts display data as a colored grid where color intensity represents value magnitude. Each series represents a row, and data points within a series use addDataPoint() for column/value pairs:
ApexHeatmapChart chart = new ApexHeatmapChart();
chart.setTitle("Activity by Day");
chart.setChartHeight(350);
chart.setDataLabels(true);
ApexSeries monday = new ApexSeries("Monday");
monday.addDataPoint("9AM", 30);
monday.addDataPoint("10AM", 55);
monday.addDataPoint("11AM", 80);
monday.addDataPoint("12PM", 45);
chart.addSeries(monday);
ApexSeries tuesday = new ApexSeries("Tuesday");
tuesday.addDataPoint("9AM", 20);
tuesday.addDataPoint("10AM", 65);
tuesday.addDataPoint("11AM", 70);
tuesday.addDataPoint("12PM", 50);
chart.addSeries(tuesday);Heatmap Configuration
| Method | Description |
|---|---|
setHeatmapDistributed(boolean) | When true, each cell gets its own color instead of using a gradient |
setHeatmapEnableShades(boolean) | Enable or disable shade variations based on value intensity |
setHeatmapColorScale(String minColor, String maxColor) | Set colors for the minimum and maximum value ranges |
// Custom heatmap color scale
chart.setHeatmapColorScale("#00A100", "#FF0000");
chart.setHeatmapEnableShades(true);
chart.setHeatmapDistributed(false);Treemap Chart
Treemap charts display hierarchical data as nested rectangles. Each data point is represented by a rectangle whose size is proportional to its value:
ApexTreemapChart chart = new ApexTreemapChart();
chart.setTitle("Disk Usage");
chart.setChartHeight(350);
chart.setDataLabels(true);
ApexSeries series = new ApexSeries("Usage");
series.addDataPoint("Documents", 250);
series.addDataPoint("Photos", 180);
series.addDataPoint("Videos", 400);
series.addDataPoint("Music", 120);
series.addDataPoint("Applications", 300);
chart.addSeries(series);Treemap Configuration
| Method | Description |
|---|---|
setTreemapDistributed(boolean) | When true, each cell gets its own color instead of using the series color |
setTreemapEnableShades(boolean) | Enable or disable shade variations for treemap cells |
// Distributed coloring for treemap
chart.setTreemapDistributed(true);
chart.setColors("#008FFB", "#00E396", "#FEB019", "#FF4560", "#775DD0");12. API Reference
Core Classes
| Class | Description |
|---|---|
ApexCharts | Static entry point. Configures resource paths, CDN mode, and adds JS to the page head. |
ApexChartsComponent<T> | Abstract base class for all ApexCharts components. Provides options management, sizing, and client-side method invocation. |
ApexChartsInitScript | Initialization script that triggers OorianApexCharts.initializeAll() on DOMContentLoaded. Add once per page. |
ApexChart | Main chart class. Extends ApexChartsComponent. Provides the full fluent API for chart configuration. |
ApexSeries | Data series class supporting simple values, XY points, bubble points, OHLC candlestick data, box plot summaries, and range data. |
Version | Library version information. Access via Version.release and Version.product. |
Shortcut Chart Classes
| Class | Extends | Pre-set Type |
|---|---|---|
ApexLineChart | ApexChart | TYPE_LINE |
ApexAreaChart | ApexChart | TYPE_AREA |
ApexBarChart | ApexChart | TYPE_BAR |
ApexColumnChart | ApexChart | TYPE_COLUMN |
ApexPieChart | ApexChart | TYPE_PIE |
ApexDonutChart | ApexChart | TYPE_DONUT |
ApexRadialBarChart | ApexChart | TYPE_RADIAL_BAR |
ApexScatterChart | ApexChart | TYPE_SCATTER |
ApexBubbleChart | ApexChart | TYPE_BUBBLE |
ApexHeatmapChart | ApexChart | TYPE_HEATMAP |
ApexTreemapChart | ApexChart | TYPE_TREEMAP |
ApexRadarChart | ApexChart | TYPE_RADAR |
ApexPolarAreaChart | ApexChart | TYPE_POLAR_AREA |
ApexRangeBarChart | ApexChart | TYPE_RANGE_BAR |
ApexRangeAreaChart | ApexChart | TYPE_RANGE_AREA |
ApexCandlestickChart | ApexChart | TYPE_CANDLESTICK |
ApexBoxPlotChart | ApexChart | TYPE_BOX_PLOT |
ApexCharts Entry Point Methods
public static void addAllResources(Head head) — Adds all required ApexCharts JavaScript resources to the page head. This is the recommended way to include ApexCharts on your page.
public static void addApexChartsJavascript(Head head) — Adds only the ApexCharts library JavaScript (CDN or local based on configuration).
public static void addOorianApexChartsJavascript(Head head) — Adds only the Oorian-to-ApexCharts bridge script.
public static void setApexChartsRootPath(String path) — Sets the root path for ApexCharts library files. Default: "/apexcharts"
public static void setOorianApexChartsJsPath(String path) — Sets the path for the Oorian bridge script. Default: "" (web root)
public static void setUseCdn(boolean useCdn) — Sets whether to use CDN resources or local files. Default: true
ApexChart Configuration Methods
| Category | Methods |
|---|---|
| Chart Type | setType(String) |
| Title | setTitle(String), setTitleAlign(String) |
| Dimensions | setChartHeight(int), setChartWidth(int), setWidth(String), setHeight(String) |
| Curves | setCurve(String) |
| Stacking | setStacked(boolean), setStackedPercent(boolean) |
| Display | setToolbar(boolean), setZoom(boolean), setAnimations(boolean), setDataLabels(boolean), setGrid(boolean) |
| Legend | setLegend(boolean), setLegendPosition(String), setLegendLabelColor(String) |
| Data | setCategories(String...), addSeries(ApexSeries), setPieData(String[], Number[]), setColors(String...) |
| Axes | setXAxisTitle(String), setYAxisTitle(String), setXAxisLabelColor(String), setYAxisLabelColor(String) |
| Stroke | setStrokeWidth(int), setStrokeLineCap(String) |
| Theme | setForegroundColor(String) |
| Bar/Column | setFunnel(boolean) |
| Candlestick | setCandlestickColors(String, String), setCandlestickWickUseFillColor(boolean) |
| Box Plot | setBoxPlotColors(String, String) |
| Heatmap | setHeatmapDistributed(boolean), setHeatmapEnableShades(boolean), setHeatmapColorScale(String, String) |
| Treemap | setTreemapDistributed(boolean), setTreemapEnableShades(boolean) |
ApexSeries Methods
| Method | Description |
|---|---|
setName(String) | Set the series name (displayed in legend) |
setType(String) | Set the chart type for this series (mixed charts) |
setColor(String) | Set the color for this series |
setData(Number...) | Set numeric data values (varargs) |
setData(List<Number>) | Set numeric data values (from list) |
addData(Number) | Append a single numeric value |
addDataPoint(Object x, Number y) | Add an XY data point (scatter, heatmap, treemap) |
addBubblePoint(Object x, Number y, Number z) | Add a bubble data point (x, y, bubble size) |
addCandlestickPoint(Object x, Number open, Number high, Number low, Number close) | Add an OHLC candlestick data point |
addBoxPlotPoint(Object x, Number min, Number q1, Number median, Number q3, Number max) | Add a five-number summary data point |
addRangePoint(Object x, Number start, Number end) | Add a range data point (rangeBar, rangeArea) |
addTimelinePoint(String x, long start, long end) | Add a timeline point with timestamps (Gantt charts) |
toJsonObject() | Serialize the series to a JsonObject |
Dynamic Update Methods
Update chart data after the chart has been rendered:
public void updateSeries(ApexSeries... newSeries) — Updates the chart with new series data (animated).
public void updateSeries(boolean animate, ApexSeries... newSeries) — Updates the chart with new series data, with animation control.
public void updatePieData(Number... values) — Updates pie/donut/radialBar chart data with new values (animated).
public void updatePieData(boolean animate, Number... values) — Updates pie/donut/radialBar chart data with animation control.
Type Constants
| Constant | Value |
|---|---|
TYPE_LINE | "line" |
TYPE_AREA | "area" |
TYPE_BAR | "bar" |
TYPE_COLUMN | "column" |
TYPE_PIE | "pie" |
TYPE_DONUT | "donut" |
TYPE_RADIAL_BAR | "radialBar" |
TYPE_SCATTER | "scatter" |
TYPE_BUBBLE | "bubble" |
TYPE_HEATMAP | "heatmap" |
TYPE_TREEMAP | "treemap" |
TYPE_RADAR | "radar" |
TYPE_POLAR_AREA | "polarArea" |
TYPE_RANGE_BAR | "rangeBar" |
TYPE_RANGE_AREA | "rangeArea" |
TYPE_CANDLESTICK | "candlestick" |
TYPE_BOX_PLOT | "boxPlot" |
Other Constants
| Category | Constants |
|---|---|
| Curve types | CURVE_SMOOTH, CURVE_STRAIGHT, CURVE_STEPLINE |
| Legend positions | LEGEND_TOP, LEGEND_RIGHT, LEGEND_BOTTOM, LEGEND_LEFT |
| Title alignments | ALIGN_LEFT, ALIGN_CENTER, ALIGN_RIGHT |
Version Information: The library version can be accessed programmatically via com.oorian.apexcharts.Version.release (currently "2.0.5"). Call Version.print() to output version details to the console.