BluKavantUI Design system
BLUKAVANTUI CHARTS · WEB

Your data.
A clearer story.

Beautiful charts that belong in your application. Bring the colors, interactions and details together—from the first trend to the full picture.

Try the playground →Browse all charts

A separate bundle. The same design language.
8 free Community charts. 8 advanced Pro charts, included in your existing Pro license at no additional charge.

LIVE CHART · FICTIONAL DATA MixedChart · Pro ↗
16chart types
4shared legend styles
PNG + SVGbuilt-in downloads
Your datano hosted chart service
MORE THAN MARKS ON A PLOT

Small details.
A complete experience.

Shared colors and legends. Exact values and keyboard access. A loading state that fits the rest of your UI.

COMMUNITY / DOUGHNUT

Give every category context.

A value list adds names, totals and color bars without a wall of labels.

Explore DoughnutChart →
COMMUNITY / SCATTER

See the relationships.

Compact Community Chips make groups easy to find and highlight.

Explore ScatterChart →
01

One data model to build on

Stable keys, clear labels and numeric values. Specific chart structures add categories, points, hierarchies or relationships as needed.

02

Useful without a mouse

Read exact values, select data from the table, highlight legend items and download images with the keyboard.

03

Keep your app lean

Charts lives outside the UI bundle. Import individual charts, or load the separate browser bundle on the screens that need it.

CHOOSE YOUR STARTING POINT

Community to get started.
Pro to go further.

Both editions share styling and chart interactions. Sparkline adds a lightweight SVG trend for compact spaces, with its own focused options. Install one or both editions as your application needs them.

8 CHARTS · FREE

Charts Community

@blukavantui/charts-community

Trends, comparisons, proportions, relationships and patterns.

Download Community .tgz ↓

Sparkline

Compact trends with theme colors and readable underlying data.

LineChart

Follow trends with straight, smooth, or stepped lines and optional area fills.

BarChart

Compare categories with horizontal or vertical bars, grouped or stacked.

PieChart

Show proportions with full or half pies and optional independent nested rings.

DoughnutChart

Show proportions around a center total, with full and half layouts or a nested inner pie and outer ring.

ScatterChart

Explore relationships between two measures, with groups and optional bubble sizes.

RadarChart

Compare profiles across several measures, with clear axis bounds and optional filled shapes.

Heatmap

Reveal patterns across two dimensions with a color scale and precise, selectable values.

8 ADVANCED CHARTS · INCLUDED WITH PRO

Charts Pro

@blukavantui/charts-pro

Your existing Pro price and license cover Charts Pro. Separate package, same license key, no charts add-on fee.

Get Charts Pro → View Pro pricing

MixedChart

Combine bar and line series to compare composition, trends, and targets in one view.

NightingaleChart

Compare categories with rose sectors that vary by radius or area.

PolarChart

Explore cyclical patterns with radial bars or lines, including stacked series.

Treemap

Explore hierarchical totals with nested rectangles, drill-down, and breadcrumbs.

Sankey

Follow weighted flows between stages, sources, and destinations.

FunnelChart

Follow ordered stages with conversion and drop-off percentages.

GeoMap

Combine shaded regions and location bubbles on bundled or custom geographic maps.

CalendarHeatmap

See daily activity across weeks and months, with one selectable value per date.

NPM-COMPATIBLE OR SCRIPT TAG

Install separately.
Load what you use.

The main UI library already supports selective imports. The Charts packages keep the ECharts engine outside those UI bundles entirely.

Download a package archive and install it with npm. Use the individual chart entry for bundler applications. For a plain HTML page, choose the browser files.

Community browser files .zip ↓Pro packages & browser files →

Web release. Native OutSystems packages are separate downloads. Use the OutSystems installation guide and complete IPP processing for your environment.

TYPESCRIPT / YOUR APPLICATION
import { createLineChart } from
  '@blukavantui/charts-community/line';
import '@blukavantui/charts-community/styles.css';

const chart = createLineChart(host, {
  Title: 'Your next milestone',
  Categories: months,
  Series: revenue,
  LegendStyle: 'Compact',
  LegendPosition: 'Bottom',
});

Load the shared Community theme once. Use update() for new data and destroy() when the screen unmounts.

SEE THE BIGGER PICTURE

Charts in real application layouts.

Explore the connected revenue workspace, student experience, store manager and software delivery workspace.

Search BluKavantUI