AG Grid
Best JavaScript Grid in the World
AG Charts
Best JavaScript Charts in the World
AG Studio
Best JavaScript Dashboard in the World
Bryntum Gantt
Speed-tuned Gantt chart for project planning
Bryntum Scheduler
Resource scheduling timeline component
PROPRO
Bryntum Scheduler Pro
Scheduler with auto-scheduling and constraints
Bryntum Calendar
Flexible JavaScript event calendar
Bryntum Task Board
Kanban-style task board component
Search⌘ KCtrl K
What's New
Getting Started
OverviewQuick StartBuilding a DashboardMigrationEnterprise Licence
AI Skills
Connecting Data
Data OverviewData ModellingLoading DataSharing & Caching Data
Agent Framework
Agent Framework OverviewAgent Quick Start
WebMCP
Fields & Formatting
Data TypesFormattingExpressionsCalendarsEditable Fields
Appearance & Behaviour
Modes & LayoutThemingTheme BuilderLocalisationStateUndo & RedoExportingFigma Design System
Widgets
Widgets OverviewConfiguring WidgetsCustom WidgetsForm Configuration
Server-Side Data
Custom EngineImplementing Queries
User Guide
Working with AI

JavaScript Embedded AnalyticsWidget Catalogue

Version 3.0.0

Every Widget available in the Widget selector is grouped here exactly as the selector groups them, with a live example and setup options for each group.

See Widget Basics for how Widgets are created and resized, and Building Widgets for configuring a Widget's data and appearance once it is on the layout.

Column Chart Copy Link

Column Chart Widgets use vertical bars to compare values across categories.

Grouped Column Chart shows adjacent vertical bars for comparing categories or series side by side. It should be used when comparing individual values matters more than showing how they add up.

Stacked Column Chart stacks vertical bars to show part-to-whole relationships across categories. It should be used when both a category's total and its composition matter.

100% Stacked Column Chart normalises stacked bars to 100% so segments show proportions rather than absolute values. It should be used when comparing composition across categories matters more than comparing totals.

The example below shows all three Column Chart variants plotted against the same categories, making the shift from absolute values to proportions easy to compare.

Bar Chart Copy Link

Bar Chart Widgets use horizontal bars and behave like Column Charts turned on their side, which suits long category labels.

Grouped Bar Chart shows adjacent horizontal bars for comparing categories, and works well when category names are long.

Stacked Bar Chart stacks horizontal bars to show part-to-whole relationships across categories.

100% Stacked Bar Chart normalises stacked horizontal bars to 100% for comparing proportions across categories.

The example below shows the three Bar Chart variants stacked one above the other, plotting the same categories as the Column Chart example.

Line Chart Copy Link

The Line Chart group holds a single Widget.

Line Chart connects data points with a line to show a trend over time or across a continuous dimension. It should be used when the shape of change matters more than any single value.

The example below shows a Line Chart comparing gold, silver and bronze totals across countries.

Area Chart Copy Link

Area Chart Widgets fill the area beneath a line, emphasising magnitude alongside trend.

Area Chart fills the area beneath a line to emphasise the magnitude of a trend over time.

Stacked Area Chart stacks filled areas to show cumulative trends and part-to-whole relationships over time.

100% Stacked Area Chart normalises stacked areas to 100% to show proportional trends over time.

The example below shows all three Area Chart variants plotted against the same categories.

Value Copy Link

The Value group covers Widgets that spotlight a single aggregated number.

KPI displays a single aggregated number prominently. It should be used for totals and headline metrics that need no visual comparison.

Radial Gauge shows a value against a defined range on a circular dial. It should be used for progress or target tracking.

Linear Gauge shows a value against a range on a horizontal or vertical bar. It should be used for progress or threshold indicators.

The example below shows a KPI alongside both gauge types tracking the same underlying value.

Scatter Chart Copy Link

Scatter Chart Widgets plot individual data points across two axes to reveal correlations.

Scatter Chart plots dots on two axes to compare grouped data and show correlations.

Bubble Chart extends a scatter plot with variable dot sizes, adding a third data dimension.

The example below shows a Scatter Chart above a Bubble Chart using the same two axes, with the Bubble Chart adding size as a third dimension.

Table Copy Link

This group holds the two Widgets for displaying data in rows and columns.

Table lists rows and columns with sortable and filterable headers. It should be used for row-level exploration of detailed data.

Pivot Table groups and pivots data across row and column axes. It should be used for hierarchical drill-down and cross-tabulated summaries.

The example below shows a flat list of rows above a pivoted view of the same data.

Pivot Table Setup Copy Link

A Pivot Table summarises a measure across a row axis and, optionally, a column axis. Its Setup panel has three data slots:

  • Rows - grouping fields, outer to inner. Each field adds a level of row grouping.
  • Columns - optional grouping fields, outer to inner. Adding a field here pivots the Values onto a column axis instead of listing them as flat columns.
  • Values - one or more measures, aggregated for each row (and, once pivoted, for each row-column cell).

Row groups start expanded when no field is mapped to Columns, and collapsed once one is. Click a row to expand or collapse it; expanding loads its child rows. Column groups always start collapsed - click to expand them.

Totals Copy Link

Two independent totals are available on the Pivot Table's Format tab, both off by default:

  • Total Row - a grand total pinned as the last row, summing every measure across the whole table.
  • Total Columns - available once a field is mapped to Columns. Adds a column summing each measure across every column member. Set Placement to Beginning or End.

Empty Cells Copy Link

A Pivot Table holds a cell for every combination of row and column member, but the data rarely fills all of them. Where a combination has no rows behind it there is nothing to aggregate, so the cell shows N/A instead of a number. A cell showing 0 means the opposite: rows exist for that combination, and the measure adds up to zero across them.

Both appear in the medals example at the top of this section. Its data covers Summer and Winter Games in alternating years, and most countries win in one or the other. A country that competes only in summer shows N/A across the winter years. A country that won that year but took no gold shows 0 in its Gold column.

Polar Chart Copy Link

The Polar Chart group brings together the radar and radial Widgets, which plot values around a circular axis rather than a linear one.

Radar Line Chart uses lines on a radar layout to compare multiple variables at once.

Radar Area Chart fills the area on a radar layout to emphasise coverage across dimensions.

Radial Column Chart arranges bars in a circle. It should be used for cyclical or categorical data.

Nightingale Chart uses sectors of varying radius to emphasise differences in value.

Radial Bar Chart uses concentric circular bars for compact category comparisons.

The example below shows all five Polar Chart Widgets plotting the same categories, so the different circular layouts can be compared directly.

Proportional Chart Copy Link

Proportional Chart Widgets show how a whole splits into parts.

Pie Chart divides a circle into slices to show simple part-to-whole proportions.

Donut Chart is a Pie Chart with a hollow centre, leaving room for a central metric or label.

The example below places a Pie Chart beside a Donut Chart splitting the same values, so the hollow centre is the only difference between them.

Progression Chart Copy Link

Progression Chart Widgets show values narrowing through sequential stages, such as a sales or conversion funnel.

Funnel Chart uses a stepped funnel to show conversion rates or sequential process stages.

Cone Funnel Chart uses a smooth-tapering funnel for the same kind of conversion or process visualisation.

Pyramid Chart uses a triangular layout for hierarchical or tiered data.

The example below places a Funnel beside a Cone Funnel with a Pyramid below them, so the three shapes can be compared directly.

Hierarchical Chart Copy Link

Hierarchical Chart Widgets show nested part-to-whole relationships, sized by value.

Treemap Chart nests rectangles to show a hierarchy of part-to-whole proportions, sized by value.

Sunburst Chart uses concentric rings to show the same kind of hierarchy, sized by value.

The example below shows the same hierarchy as both a Treemap and a Sunburst, comparing a rectangular layout against a radial one.

Hierarchical Chart Setup Copy Link

Both Widgets share the same Setup panel:

  • Hierarchy Levels - an ordered list of grouping fields, outermost first. Each level nests inside the one before it.
  • Value - a numeric field that sizes each tile (Treemap) or segment (Sunburst).

The example below shows sales sized by Net Sales and grouped by Region, then Subcategory.

Static Content Copy Link

Static Content Widgets add narrative or supporting material to a report and do not require a data input.

Text displays rich text content for titles, descriptions, or annotations, written by the report author rather than bound to a data field.

Image displays an image from a URL, for logos, backgrounds, or other visual context, and is likewise not bound to a data field.

The example below shows a Text Widget and an Image Widget placed side by side, neither of them mapped to a field.

Filter Copy Link

Filter Widgets give report viewers on-canvas controls for narrowing down the data, without opening the Filters panel.

Button Filter shows clickable toggle buttons for quick single or multi-value filtering. It should be used when the list of values is short enough to display as buttons.

List Filter shows a scrollable list for selecting one or more values from many options. It should be used when there are too many values to show as buttons.

Date Filter shows a date picker for filtering by date range or specific dates.

The example below shows all three Filter Widgets alongside a KPI Widget; selecting a value in any Filter updates the KPI, since it is driven by the combined filter selection.

Combo Copy Link

Combo Chart Widgets pair columns with a line series on the same chart, useful when a report needs to show a trend alongside the values that make it up.

Grouped Column / Line Chart shows adjacent columns for direct comparison across categories, with a line overlaid to trace a trend across the same categories.

Stacked Column / Line Chart shows stacked columns for part-to-whole comparison across categories, with a line overlaid to trace a trend across the same categories.

The columns of either variant can also be split by a Legend field, giving one column series per value in that field while the line stays a single trend across all of them.

The example below shows both Combo Chart variants plotting the same columns and trend line, so the grouped and stacked layouts can be compared.