Chart.js User's Guide | Oorian Framework

1. Overview

The Oorian ChartJs Library provides a complete Java wrapper around Chart.js, one of the most popular open-source charting libraries for the web. It enables Oorian developers to create rich, interactive charts entirely in Java, following the Oorian philosophy of pure server-side development.

Key Features

Fluent Java API for all eight Chart.js chart types
Type-safe enums for chart types, legend positions, interaction modes, and more
Convenience shortcut classes (CjLineChart, CjBarChart, etc.) for quick chart creation
Full configuration support for scales, plugins, tooltips, legends, and animations
Static factory methods on CjDataset and CjDataPoint for concise code
Responsive charts with configurable aspect ratio
Client-side method invocation (updateChart(), reset(), destroy())

2. Getting Started

Required Files

The Chart.js extension consists of three components:

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

Initialize the Library

In your page's createBody() method, call ChartJs.initialize(this) to add all required JavaScript and the initialization script.

Java

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

That's it! The initialize() call adds the Chart.js library and bridge script 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():

Java

ChartJs.setChartJsRootPath("/assets/chartjs");
ChartJs.setOorianChartJsPath("/assets/oorian");
ChartJs.initialize(this);

Create a Chart

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

Java

@Override
protected void createBody(Body body)
{
    CjChart chart = new CjChart(ChartType.LINE)
        .setLabels("Jan", "Feb", "Mar", "Apr", "May")
        .addDataset(new CjDataset("Sales")
            .setData(10, 20, 15, 25, 30)
            .setBorderColor("rgb(75, 192, 192)")
            .setTension(0.4))
        .setTitle("Monthly Sales")
        .setResponsive(true);

    body.addElement(chart);
}

3. Chart Types

The library supports all eight Chart.js chart types. You can create charts two ways: using the generic CjChart with a ChartType enum, or using a dedicated shortcut class.

ChartType Enum	Shortcut Class	Description
`ChartType.LINE`	`CjLineChart`	Data points connected by line segments; ideal for trends over time
`ChartType.BAR`	`CjBarChart`	Rectangular bars proportional to values; supports horizontal mode
`ChartType.PIE`	`CjPieChart`	Circular chart divided into slices showing proportions
`ChartType.DOUGHNUT`	`CjDoughnutChart`	Pie chart with a hollow center
`ChartType.RADAR`	`CjRadarChart`	Spider/web chart for comparing multiple variables
`ChartType.POLAR_AREA`	`CjPolarAreaChart`	Segments with equal angles but different radii
`ChartType.SCATTER`	`CjScatterChart`	X/Y data points without connecting lines
`ChartType.BUBBLE`	`CjBubbleChart`	Scatter chart where point size encodes a third dimension

Generic CjChart vs. Shortcut Classes

Both approaches produce the same result. Use whichever reads better for your use case:

Java

// Generic approach
CjChart chart = new CjChart(ChartType.LINE);

// Shortcut class approach
CjLineChart chart = new CjLineChart();

The shortcut classes extend CjChart, so they inherit all configuration methods. CjBarChart adds a setHorizontal(boolean) convenience method, and CjScatterChart adds an addScatterData(String, List<CjDataPoint>) method.

4. Datasets & Data Points

Every chart requires at least one CjDataset. A dataset contains the data values and all styling for a single data series in the chart.

Creating Datasets

Java

// Constructor with label
CjDataset ds = new CjDataset("Revenue");
ds.setData(100, 200, 150, 300);

// Fluent API
CjDataset ds = new CjDataset("Revenue")
    .setData(100, 200, 150, 300)
    .setBackgroundColor("rgba(75, 192, 192, 0.2)")
    .setBorderColor("rgb(75, 192, 192)")
    .setBorderWidth(2);

// Static factory methods
CjDataset line = CjDataset.line("Sales", 10, 20, 30, 40);
CjDataset bar = CjDataset.bar("Votes", 12, 19, 3);
CjDataset pie = CjDataset.pie("Share", 55, 35, 10);

CjDataPoint for Scatter and Bubble Charts

Scatter and bubble charts use CjDataPoint objects instead of simple numbers. Each data point has x, y, and optionally r (radius for bubble charts).

Java

// Scatter point (x, y)
CjDataPoint p1 = CjDataPoint.of(10, 20);
CjDataPoint p2 = new CjDataPoint(15, 25);

// Bubble point (x, y, radius)
CjDataPoint b1 = CjDataPoint.bubble(20, 30, 15);
CjDataPoint b2 = new CjDataPoint(40, 10, 10);

// Scatter dataset with factory method
CjDataset scatter = CjDataset.scatter("Points",
    CjDataPoint.of(10, 20),
    CjDataPoint.of(15, 25),
    CjDataPoint.of(20, 30));

Color Configuration

Datasets support single colors and per-data-point color arrays. This is especially useful for pie and bar charts where each segment or bar should have a distinct color.

Java

// Single color (applies to entire dataset)
ds.setBackgroundColor("rgba(54, 162, 235, 0.7)");
ds.setBorderColor("rgb(54, 162, 235)");

// Per-data-point colors (one color per value)
ds.setBackgroundColors(
    "rgba(255, 99, 132, 0.7)",
    "rgba(54, 162, 235, 0.7)",
    "rgba(255, 206, 86, 0.7)");

// Varargs shorthand (multiple colors auto-detect as array)
ds.setBackgroundColor(
    "rgba(255, 99, 132, 0.8)",
    "rgba(54, 162, 235, 0.8)",
    "rgba(255, 206, 86, 0.8)");

Adding Data to Charts

There are multiple ways to associate data with a chart:

Java

// Method 1: addDataset() with pre-built dataset
chart.addDataset(new CjDataset("Sales").setData(10, 20, 30));

// Method 2: setData() convenience on CjChart
chart.setData("Sales", 10, 20, 30);

// Method 3: Set all datasets at once
chart.setDatasets(Arrays.asList(dataset1, dataset2, dataset3));

5. Line & Area Charts

Line charts display data as points connected by line segments. Setting fill(true) on a dataset converts it to an area chart.

Basic Line Chart

Java

CjLineChart chart = new CjLineChart()
    .setLabels("January", "February", "March", "April", "May", "June")
    .addDataset(new CjDataset("Monthly Sales")
        .setData(65, 59, 80, 81, 56, 55)
        .setBorderColor("rgb(75, 192, 192)")
        .setBackgroundColor("rgb(75, 192, 192)")
        .setTension(0.1))
    .setTitle("Basic Line Chart")
    .setResponsive(true)
    .setMaintainAspectRatio(false);

Area Chart (Filled)

Java

CjChart chart = new CjChart(ChartType.LINE)
    .setLabels("Q1", "Q2", "Q3", "Q4")
    .addDataset(new CjDataset("Revenue")
        .setData(3000, 4500, 4200, 5800)
        .setBorderColor("rgba(75, 192, 192, 1)")
        .setBackgroundColor("rgba(75, 192, 192, 0.3)")
        .setFill(true)
        .setTension(0.4))
    .setTitle("Quarterly Revenue")
    .setYAxisBeginAtZero(true);

Line Dataset Properties

Method	Type	Description
`setTension(double)`	`double`	Bezier curve tension. `0` = straight lines, `0.4` = smooth curves
`setFill(boolean)`	`boolean`	Fill the area under the line
`setFill(FillMode)`	`FillMode`	Fill mode: `ORIGIN`, `START`, `END`, `FALSE`
`setStepped(boolean)`	`boolean`	Use stepped lines instead of smooth/straight
`setPointStyle(PointStyle)`	`PointStyle`	Shape of data points (CIRCLE, CROSS, TRIANGLE, STAR, etc.)
`setPointRadius(int)`	`int`	Radius of data points in pixels
`setPointHoverRadius(int)`	`int`	Radius of data points on hover
`setPointBackgroundColor(String)`	`String`	Color of the point fill
`setPointBorderColor(String)`	`String`	Color of the point border
`setShowLine(boolean)`	`boolean`	Show/hide the connecting line

Multi-Dataset Line Chart with Legend

Java

CjChart chart = new CjChart(ChartType.LINE)
    .setLabels("Jan", "Feb", "Mar", "Apr", "May", "Jun")
    .addDataset(new CjDataset("Dataset 1")
        .setData(65, 59, 80, 81, 56, 55)
        .setBorderColor("rgb(255, 99, 132)"))
    .addDataset(new CjDataset("Dataset 2")
        .setData(28, 48, 40, 19, 86, 27)
        .setBorderColor("rgb(54, 162, 235)"))
    .setTitle("Multi-Dataset Line Chart")
    .setLegendPosition(LegendPosition.BOTTOM);

6. Bar Charts

Bar charts display data as rectangular bars. The library supports vertical bars (default), horizontal bars, grouped bars, and stacked bars.

Vertical Bar Chart

Java

CjBarChart chart = new CjBarChart()
    .setLabels("Red", "Blue", "Yellow", "Green", "Purple")
    .addDataset(new CjDataset("Votes")
        .setData(12, 19, 3, 5, 2)
        .setBackgroundColors(
            "rgba(255, 99, 132, 0.7)",
            "rgba(54, 162, 235, 0.7)",
            "rgba(255, 206, 86, 0.7)",
            "rgba(75, 192, 192, 0.7)",
            "rgba(153, 102, 255, 0.7)")
        .setBorderWidth(1)
        .setBorderRadius(4))
    .setTitle("Favorite Colors")
    .setYAxisBeginAtZero(true);

Horizontal Bar Chart

Use the CjBarChart.setHorizontal(true) convenience method, or set IndexAxis.Y on any chart:

Java

// Using CjBarChart convenience method
CjBarChart chart = new CjBarChart()
    .setHorizontal(true)
    .setLabels("Product A", "Product B", "Product C")
    .addDataset(new CjDataset("Sales").setData(85, 72, 90));

// Using setIndexAxis() directly
CjChart chart = new CjChart(ChartType.BAR)
    .setIndexAxis(IndexAxis.Y)
    .setLabels("Product A", "Product B", "Product C")
    .addDataset(new CjDataset("Sales").setData(85, 72, 90));

Stacked Bar Chart

Stacked bars require configuring both axes to stack using CjScales:

Java

CjScales scales = new CjScales()
    .setXStacked(true)
    .setYStacked(true)
    .setYBeginAtZero(true);

CjChart chart = new CjChart(ChartType.BAR)
    .setLabels("Q1", "Q2", "Q3", "Q4")
    .addDataset(new CjDataset("North")
        .setData(20, 25, 30, 28)
        .setBackgroundColor("rgba(255, 99, 132, 0.8)"))
    .addDataset(new CjDataset("South")
        .setData(15, 20, 18, 22)
        .setBackgroundColor("rgba(54, 162, 235, 0.8)"))
    .setScales(scales)
    .setTitle("Stacked Sales by Region")
    .setLegendPosition(LegendPosition.RIGHT);

Bar Dataset Properties

Method	Type	Description
`setBarPercentage(double)`	`0.0 - 1.0`	Width of the bar relative to the category width
`setCategoryPercentage(double)`	`0.0 - 1.0`	Width of the category relative to available space
`setBarThickness(int)`	`int`	Fixed bar thickness in pixels
`setMaxBarThickness(int)`	`int`	Maximum bar thickness in pixels
`setBorderRadius(int)`	`int`	Border radius for rounded bar corners
`setBorderSkipped(String)`	`String`	Which border to skip: "start", "end", "bottom", "top", etc.

7. Pie, Doughnut & Polar Area Charts

These chart types display proportional data as segments of a circle. Each typically uses a single dataset with per-segment colors.

Pie Chart

Java

CjPieChart chart = new CjPieChart()
    .setLabels("Red", "Blue", "Yellow", "Green", "Purple")
    .addDataset(new CjDataset("Dataset")
        .setData(12, 19, 3, 5, 8)
        .setBackgroundColor(
            "rgba(255, 99, 132, 0.8)",
            "rgba(54, 162, 235, 0.8)",
            "rgba(255, 206, 86, 0.8)",
            "rgba(75, 192, 192, 0.8)",
            "rgba(153, 102, 255, 0.8)")
        .setBorderColor("white")
        .setBorderWidth(2)
        .setHoverOffset(10))
    .setTitle("Color Distribution")
    .setLegendPosition(LegendPosition.RIGHT);

Doughnut Chart

A doughnut chart is a pie chart with a hollow center. Use setCutout() to control the hole size:

Java

CjDoughnutChart chart = new CjDoughnutChart()
    .setLabels("Desktop", "Mobile", "Tablet")
    .addDataset(new CjDataset("Traffic Sources")
        .setData(55, 35, 10)
        .setBackgroundColor(
            "rgba(255, 99, 132, 0.8)",
            "rgba(54, 162, 235, 0.8)",
            "rgba(255, 206, 86, 0.8)")
        .setCutout("60%")
        .setHoverOffset(8))
    .setTitle("Website Traffic by Device");

Half Doughnut (Gauge-Style)

Combine setCircumference() and setRotation() to create a half-circle gauge:

Java

ds.setCutout("70%")
   .setCircumference(180)
   .setRotation(-90);

Polar Area Chart

Java

CjPolarAreaChart chart = new CjPolarAreaChart()
    .setLabels("Sales", "Marketing", "Development", "Support")
    .addDataset(new CjDataset("Budget")
        .setData(11, 16, 25, 8)
        .setBackgroundColor(
            "rgba(255, 99, 132, 0.7)",
            "rgba(54, 162, 235, 0.7)",
            "rgba(255, 206, 86, 0.7)",
            "rgba(75, 192, 192, 0.7)"))
    .setTitle("Budget Allocation");

Pie/Doughnut Dataset Properties

Method	Type	Description
`setCutout(String)`	`String`	Inner cutout size (e.g., `"50%"` for doughnut)
`setCircumference(int)`	`int`	Arc circumference in degrees (360 = full circle)
`setRotation(int)`	`int`	Starting angle offset in degrees
`setSpacing(int)`	`int`	Spacing between arcs in pixels
`setOffset(int)`	`int`	Arc offset from center in pixels
`setHoverOffset(int)`	`int`	Additional offset on hover in pixels

8. Scatter & Bubble Charts

Scatter and bubble charts use CjDataPoint objects with explicit x/y (and optionally r) coordinates rather than simple numeric arrays.

Scatter Chart

Java

CjScatterChart chart = new CjScatterChart()
    .addDataset(new CjDataset("Data Points")
        .setDataPoints(
            CjDataPoint.of(10, 20),
            CjDataPoint.of(15, 25),
            CjDataPoint.of(20, 30),
            CjDataPoint.of(25, 22),
            CjDataPoint.of(30, 35))
        .setBackgroundColor("rgba(54, 162, 235, 0.8)")
        .setPointRadius(8)
        .setPointHoverRadius(12))
    .setTitle("Scatter Plot")
    .setXAxisTitle("X Value")
    .setYAxisTitle("Y Value");

CjScatterChart Convenience Method

The CjScatterChart class provides an addScatterData() method that accepts a label and a list of points:

Java

public CjScatterChart addScatterData(String label, List<CjDataPoint> points)

Multi-Dataset Scatter with Point Styles

Java

CjChart chart = new CjChart(ChartType.SCATTER)
    .addDataset(new CjDataset("Group A")
        .setDataPoints(
            CjDataPoint.of(10, 18),
            CjDataPoint.of(15, 20))
        .setBackgroundColor("rgba(255, 99, 132, 0.8)")
        .setPointStyle(PointStyle.CIRCLE)
        .setPointRadius(10))
    .addDataset(new CjDataset("Group B")
        .setDataPoints(
            CjDataPoint.of(25, 35),
            CjDataPoint.of(30, 42))
        .setBackgroundColor("rgba(75, 192, 192, 0.8)")
        .setPointStyle(PointStyle.TRIANGLE)
        .setPointRadius(10))
    .setLegendPosition(LegendPosition.BOTTOM);

Bubble Chart

Java

CjBubbleChart chart = new CjBubbleChart()
    .addDataset(new CjDataset("Dataset 1")
        .setDataPoints(
            CjDataPoint.bubble(20, 30, 15),
            CjDataPoint.bubble(40, 10, 10),
            CjDataPoint.bubble(30, 22, 20))
        .setBackgroundColor("rgba(255, 99, 132, 0.6)")
        .setBorderColor("rgba(255, 99, 132, 1)"))
    .setTitle("Bubble Chart")
    .setSubtitle("Bubble size represents data magnitude")
    .setXAxisTitle("X Dimension")
    .setYAxisTitle("Y Dimension");

9. Scales & Axes

Scales control the axes of your chart. You can configure axes using convenience methods directly on CjChart, or build a detailed CjScales configuration.

Convenience Methods on CjChart

For common axis configurations, use the shorthand methods directly on the chart:

Java

chart.setXAxisTitle("Month");
chart.setYAxisTitle("Sales ($)");
chart.setYAxisBeginAtZero(true);
chart.setYAxisMin(0);
chart.setYAxisMax(100);
chart.setXAxisType(ScaleType.CATEGORY);
chart.setYAxisType(ScaleType.LINEAR);

CjScales for Advanced Configuration

For more control, create a CjScales object. It supports X, Y, and R (radial) axes with convenience methods or full CjAxisConfig objects.

Java

// Using CjScales convenience methods
CjScales scales = new CjScales()
    .setXTitle("Month")
    .setYTitle("Revenue")
    .setYBeginAtZero(true)
    .setYMax(100000)
    .setXGridDisplay(false);

chart.setScales(scales);

Java

// Using CjAxisConfig objects for full control
CjAxisConfig xAxis = new CjAxisConfig()
    .setType(ScaleType.CATEGORY)
    .setTitle("Month")
    .setGridDisplay(false)
    .setTicksColor("#666")
    .setTicksFontSize(12);

CjAxisConfig yAxis = new CjAxisConfig()
    .setType(ScaleType.LINEAR)
    .setBeginAtZero(true)
    .setTitle("Revenue ($)")
    .setTitleColor("#333")
    .setTitleFont("14", "bold")
    .setGridColor("rgba(0,0,0,0.1)")
    .setGridLineWidth(1);

CjScales scales = new CjScales()
    .setXAxis(xAxis)
    .setYAxis(yAxis);

chart.setScales(scales);

ScaleType Enum

Value	Chart.js Value	Description
`ScaleType.LINEAR`	`"linear"`	Linear numeric scale (default for most charts)
`ScaleType.LOGARITHMIC`	`"logarithmic"`	Logarithmic scale for exponential data
`ScaleType.CATEGORY`	`"category"`	Categorical labels (default for bar/line x-axis)
`ScaleType.TIME`	`"time"`	Time-based scale (requires date adapter)
`ScaleType.TIMESERIES`	`"timeseries"`	Time series with equal spacing
`ScaleType.RADIAL_LINEAR`	`"radialLinear"`	Radial scale for radar/polar charts

CjAxisConfig Properties

Category	Methods
Basic	`setType()`, `setMin()`, `setMax()`, `setBeginAtZero()`, `setStacked()`, `setReverse()`, `setDisplay()`
Title	`setTitle()`, `setTitleDisplay()`, `setTitleColor()`, `setTitleFont()`
Grid	`setGridDisplay()`, `setGridColor()`, `setGridLineWidth()`
Ticks	`setTicksDisplay()`, `setTicksColor()`, `setTicksFontSize()`

Radial Axis (Radar / Polar Area)

Radar and polar area charts use the R-axis instead of X/Y:

Java

CjScales scales = new CjScales()
    .setRBeginAtZero(true)
    .setRMin(0)
    .setRMax(100);

CjRadarChart chart = new CjRadarChart()
    .setScales(scales);

10. Plugins: Title, Legend & Tooltip

Chart.js plugins control the title, subtitle, legend, and tooltip display. You can configure them using convenience methods on CjChart, or build a detailed CjPlugins configuration.

Convenience Methods on CjChart

Java

chart.setTitle("Monthly Sales Report");
chart.setSubtitle("Data for Q1 2025");
chart.setLegendPosition(LegendPosition.BOTTOM);
chart.setLegendVisible(false);
chart.setTooltipEnabled(true);

CjPlugins for Advanced Configuration

Java

CjPlugins plugins = new CjPlugins()
    .setTitle(new CjTitleConfig("Monthly Sales Report")
        .setColor("#333")
        .setFontSize(18)
        .setFontWeight("bold")
        .setPadding(20))
    .setSubtitle(new CjTitleConfig("January - June 2025")
        .setColor("#666")
        .setFontSize(14))
    .setLegend(new CjLegendConfig()
        .setPosition(LegendPosition.BOTTOM)
        .setLabelsColor("#444")
        .setLabelsFontSize(12)
        .setLabelsUsePointStyle(true))
    .setTooltip(new CjTooltipConfig()
        .setEnabled(true)
        .setMode(InteractionMode.INDEX)
        .setBackgroundColor("rgba(0,0,0,0.8)")
        .setTitleColor("#fff")
        .setBodyColor("#fff")
        .setCornerRadius(6)
        .setPadding(12));

chart.setPlugins(plugins);

LegendPosition Enum

Value	Description
`LegendPosition.TOP`	Above the chart (default)
`LegendPosition.BOTTOM`	Below the chart
`LegendPosition.LEFT`	Left side of the chart
`LegendPosition.RIGHT`	Right side of the chart
`LegendPosition.CHARTAREA`	Inside the chart area

CjPlugins Convenience Methods

CjPlugins also provides convenience methods that mirror the config object setters, so you can mix both styles:

Java

CjPlugins plugins = new CjPlugins()
    .setTitleText("Sales Report")
    .setTitleColor("#333")
    .setTitleFont(18, "bold")
    .setSubtitleText("Q1 2025")
    .setLegendPosition(LegendPosition.BOTTOM)
    .setLegendLabelsColor("#666")
    .setTooltipEnabled(true)
    .setTooltipMode(InteractionMode.INDEX)
    .setTooltipBackgroundColor("rgba(0,0,0,0.8)")
    .setTooltipBorderColor("#ccc")
    .setTooltipBorderWidth(1);

CjTooltipConfig Properties

Category	Methods
Basic	`setEnabled()`, `setMode()`, `setIntersect()`, `setPosition()`
Colors	`setBackgroundColor()`, `setTitleColor()`, `setBodyColor()`, `setFooterColor()`, `setBorderColor()`, `setBorderWidth()`
Styling	`setCornerRadius()`, `setCaretSize()`, `setCaretPadding()`, `setPadding()`
Fonts	`setTitleFontSize()`, `setTitleFontWeight()`, `setBodyFontSize()`, `setFooterFontSize()`

11. Interaction & Animation

Interaction Configuration

Control how the chart responds to mouse hover and click events. Use convenience methods on CjChart or build a CjInteractionConfig.

Java

// Convenience methods
chart.setInteractionMode(InteractionMode.INDEX);
chart.setInteractionIntersect(false);
chart.setHoverMode(InteractionMode.NEAREST);

// Full configuration object
CjInteractionConfig interaction = new CjInteractionConfig()
    .setMode(InteractionMode.INDEX)
    .setIntersect(false)
    .setAxis("x");

InteractionMode Enum

Value	Description
`InteractionMode.POINT`	Only when hovering directly over a data point
`InteractionMode.NEAREST`	Nearest data point to the cursor
`InteractionMode.INDEX`	All data points at the same index across datasets
`InteractionMode.DATASET`	All data points in the nearest dataset
`InteractionMode.X`	All items at the same x-axis value
`InteractionMode.Y`	All items at the same y-axis value

Animation Configuration

Control chart animations using convenience methods or a CjAnimationConfig object:

Java

// Convenience methods
chart.setAnimationDuration(2000);  // 2 seconds
chart.setAnimationsEnabled(false); // Disable animations

// Full configuration
CjAnimationConfig animation = new CjAnimationConfig()
    .setDuration(1000)
    .setEasing("easeOutQuart")
    .setDelay(500)
    .setLoop(false);

Disabling Animations: When you call setAnimationsEnabled(false) or new CjAnimationConfig().setEnabled(false), the animation configuration serializes as false (a JSON boolean), which tells Chart.js to skip all animations. This is useful for charts with large datasets.

Responsive Behavior

Java

// Make the chart responsive (fills its container)
chart.setResponsive(true);
chart.setMaintainAspectRatio(false);

// Fixed aspect ratio (2:1)
chart.setMaintainAspectRatio(true);
chart.setAspectRatio(2.0);

// Set explicit dimensions
chart.setWidth("800px");
chart.setHeight("400px");

// Or in pixels
chart.setWidth(800);
chart.setHeight(400);

Client-Side API Methods

The following methods invoke Chart.js client-side methods via the Oorian bridge:

Method	Description
`chart.updateChart()`	Re-renders the chart with current configuration
`chart.reset()`	Resets the chart to its initial animation state
`chart.render()`	Forces a re-render of the chart
`chart.stop()`	Stops any currently running animations
`chart.resize()`	Triggers a resize recalculation
`chart.destroy()`	Destroys the Chart.js instance and releases resources

12. API Reference

Core Classes

Class	Description
`ChartJs`	Static entry point. Configures resource paths and adds JS/CSS to the page head.
`ChartJsComponent<T>`	Abstract base class for all Chart.js components. Provides config management, sizing, and client-side method invocation.
`ChartJsInitScript`	Internal JavaScript initialization script. Automatically created when the first chart is added to a page.
`CjChart`	Main chart class. Extends `ChartJsComponent`. Provides the full fluent API for chart configuration.
`CjChartData`	Data container holding labels and datasets. Used internally by `CjChart`.
`CjChartOptions`	Options container holding responsive, interaction, animation, scales, and plugin configurations.
`CjDataset`	A single data series with values, colors, and chart-type-specific styling. Implements `Jsonable`.
`CjDataPoint`	An x/y/r data point for scatter and bubble charts. Implements `Jsonable`.

Configuration Classes

Class	Description
`CjScales`	Scale configuration for X, Y, and R (radial) axes. Provides both convenience methods and axis config objects.
`CjAxisConfig`	Single axis configuration: type, range, title, grid, and ticks settings.
`CjPlugins`	Plugin configuration for title, subtitle, legend, and tooltip. Provides both convenience methods and config objects.
`CjTitleConfig`	Title/subtitle configuration: text, position, color, font, padding, and alignment.
`CjLegendConfig`	Legend configuration: position, alignment, labels styling (color, font, box size, point style).
`CjTooltipConfig`	Tooltip configuration: mode, colors, border, corner radius, caret, padding, and fonts.
`CjInteractionConfig`	Interaction/hover configuration: mode, intersect, and axis.
`CjAnimationConfig`	Animation configuration: enabled, duration, easing, delay, and loop.

Shortcut Chart Classes

Class	Extends	Extra Methods
`CjLineChart`	`CjChart`	None (pre-sets type to LINE)
`CjBarChart`	`CjChart`	`setHorizontal(boolean)`
`CjPieChart`	`CjChart`	None (pre-sets type to PIE)
`CjDoughnutChart`	`CjChart`	None (pre-sets type to DOUGHNUT)
`CjRadarChart`	`CjChart`	None (pre-sets type to RADAR)
`CjPolarAreaChart`	`CjChart`	None (pre-sets type to POLAR_AREA)
`CjScatterChart`	`CjChart`	`addScatterData(String, List<CjDataPoint>)`
`CjBubbleChart`	`CjChart`	None (pre-sets type to BUBBLE)

Enums

Enum	Values
`ChartType`	`LINE`, `BAR`, `PIE`, `DOUGHNUT`, `POLAR_AREA`, `RADAR`, `SCATTER`, `BUBBLE`
`LegendPosition`	`TOP`, `LEFT`, `BOTTOM`, `RIGHT`, `CHARTAREA`
`PointStyle`	`CIRCLE`, `CROSS`, `CROSSROT`, `DASH`, `LINE`, `RECT`, `RECTROUNDED`, `RECTROT`, `STAR`, `TRIANGLE`, `FALSE`
`FillMode`	`FALSE`, `ORIGIN`, `START`, `END`
`InteractionMode`	`POINT`, `NEAREST`, `INDEX`, `DATASET`, `X`, `Y`
`ScaleType`	`LINEAR`, `LOGARITHMIC`, `CATEGORY`, `TIME`, `TIMESERIES`, `RADIAL_LINEAR`
`IndexAxis`	`X` (vertical bars), `Y` (horizontal bars)

ChartJs Entry Point Methods

public static void addAllResources(Head head) — Adds all required Chart.js JavaScript resources to the page head. This is the recommended way to include Chart.js on your page.

public static void addChartJsJavascript(Head head) — Adds only the JavaScript files (equivalent to addAllResources since Chart.js has no CSS).

public static void setChartJsRootPath(String path) — Sets the root path for the Chart.js library files. Default: "/chartjs"

public static void setOorianChartJsPath(String path) — Sets the path for the Oorian-to-Chart.js bridge script. Default: "" (web root)

CjDataset Visibility & Ordering

Method	Description
`setHidden(boolean)`	Hides the dataset from the chart (still appears in legend if clicked)
`setOrder(int)`	Drawing order. Lower numbers are drawn first (behind higher numbers)

Version Information: The library version can be accessed programmatically via com.oorian.chartjs.Version.release (currently "1.2.0"). Call Version.print() to output version details to the console.

← 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. Chart Types

Generic CjChart vs. Shortcut Classes

4. Datasets & Data Points

Creating Datasets

CjDataPoint for Scatter and Bubble Charts

Color Configuration

Adding Data to Charts

5. Line & Area Charts

Basic Line Chart

Area Chart (Filled)

Line Dataset Properties

Multi-Dataset Line Chart with Legend

6. Bar Charts

Vertical Bar Chart

Horizontal Bar Chart

Stacked Bar Chart

Bar Dataset Properties

7. Pie, Doughnut & Polar Area Charts

Pie Chart

Doughnut Chart

Half Doughnut (Gauge-Style)

Polar Area Chart

Pie/Doughnut Dataset Properties

8. Scatter & Bubble Charts

Scatter Chart

CjScatterChart Convenience Method

Multi-Dataset Scatter with Point Styles

Bubble Chart

9. Scales & Axes

Convenience Methods on CjChart

CjScales for Advanced Configuration

ScaleType Enum

CjAxisConfig Properties

Radial Axis (Radar / Polar Area)

10. Plugins: Title, Legend & Tooltip

Convenience Methods on CjChart

CjPlugins for Advanced Configuration

LegendPosition Enum

CjPlugins Convenience Methods

CjTooltipConfig Properties

11. Interaction & Animation

Interaction Configuration

InteractionMode Enum

Animation Configuration

Responsive Behavior

Client-Side API Methods

12. API Reference

Core Classes

Configuration Classes

Shortcut Chart Classes

Enums

ChartJs Entry Point Methods

CjDataset Visibility & Ordering