Reveal patterns across two dimensions with a color scale and precise, selectable values.
Playground and Examples use the shared browser runtime. For Service Studio inputs and event wiring, use Implementation and API.
Open OutSystems showcase ↗Follow the setup steps, connect your application state, and verify each feature. Use the Code tab for the complete working Web example.
Provide a real <div id="example"></div> in your view. Use the Code tab example's options and data as a starting point, then call this adapter with that host. Import the shared theme once per application and the component stylesheet with the component. Keep the returned instance for updates; call destroy() from your router/framework cleanup before removing the host.
import { createHeatmap } from '@blukavantui/charts-community/heatmap'
import '@blukavantui/charts-community/theme.css'
import '@blukavantui/charts-community/styles.css'
type Options = NonNullable<Parameters<typeof createHeatmap>[1]>
type Events = NonNullable<Parameters<typeof createHeatmap>[2]>
export function mount(host: HTMLElement, options: Options, events: Events = {}) {
const instance = createHeatmap(host, options, events)
return {
instance,
update: (patch: Partial<Options>) => instance.update(patch),
destroy: () => instance.destroy(),
}
}
This helper takes your real options and callbacks; it does not fetch records or invent a backend. The Code tab’s working example supplies a usable data shape. Use stable record keys when updates refer to existing items.
XCategoriesYCategoriesCellsColorScaleMinValueMaxValue
Create stable axis keys, then reference those keys in each cell XKey and YKey. Missing cells are different from zero values. Use a consistent scale across comparable panels; set MinValue and MaxValue explicitly when comparisons must share bounds.
Verify: Test missing cells, zero and negative values, a constant dataset and long axis labels.
Set IsLoading while your own request is pending and update data plus IsLoading together when it finishes. Use EmptyMessage for an empty result and your page's feedback region for a failed request. PointClick reports the selected point; resolve its stable key through your own authorized route or detail handler. In the released 1.0.0 package, SelectionChange reports Key. Echo controlled selection with SelectedKey or setSelection, without creating an update loop.
Call resize when a hidden chart becomes visible or its container changes outside normal layout observation. Use download for PNG/SVG and handle ExportComplete and Error. In the released 1.0.0 package, ExportComplete reports Format and FileName when the export is initiated; it does not prove the user saved the file. The browser controls the final file save. Keep ShowDataTable available for exact values, supply AccessibleLabel, and configure Locale/ValueFormat/CurrencyCode consistently. Do not infer additional permissions from a clicked point.
Native OutSystems downloads available. Community is free; Pro requires a valid license covering the release. Download the native packages and complete IPP processing for your destination. Web downloads do not install in Service Studio. Modules, downloads and setup →
In Service Studio, open Manage Dependencies. Reference Heatmap from BluKavantUi_Charts_Community, the data Structures listed below from BluKavantUi_Charts_Core, and the Static Entities used by your options. Also reference BluChartPoint, BluChartSelection, BluChartError, ChartOrigin, ChartState, ChartExportFormat and the public Chart_Resize, Chart_Highlight and Chart_Download Client Actions.
Charts Core depends on BluKavantUi_Community_Core. Inherit BluUICommunityTheme through your application theme. The referenced Block includes the chart runtime and styles; you do not add ChartsRuntime or a separate chart engine to the screen. Refresh dependencies and publish your consumer after updating a producer.
Create a screen named ChartScreen, or use an existing screen. Add these local variables; names are suggestions, but types must match. Keep each chart instance’s ChartId and selected state separate.
| Screen local | Native type | Initial value | Binding / use |
|---|---|---|---|
| XCategories | BluChartCategory List | Empty List | LiveChart.XCategories = XCategories |
| YCategories | BluChartCategory List | Empty List | LiveChart.YCategories = YCategories |
| Cells | BluChartHeatmapCell List | Empty List | LiveChart.Cells = Cells |
| LastChartError | BluChartError | Native default | Set in HandleError |
| Loading | Boolean | True | LiveChart.IsLoading = Loading |
| LiveChartId | Text | "" | Set in HandleChartReady |
| SelectionKey | Text | "" | LiveChart.SelectedKey = SelectionKey |
| PatternsEnabled | Boolean | False | LiveChart.ShowPatterns = PatternsEnabled |
| LastPoint | BluChartPoint | Native default | Set in HandlePointClick |
| CurrentChartState | ChartState Identifier | Entities.ChartState.Loading | Set in HandleStateChanged |
| ChartRevision | Integer | 0 | Set in HandleStateChanged |
| ExportStatus | Text | "" | Set in HandleExportStarted |
ChartScreen — your Screen
└─ ExistingLayout — your referenced Layout
└─ Content — the Layout’s existing content slot
└─ ChartRegion — new Container
└─ LiveChart — BluKavantUi_Charts_Community.HeatmapSet the data bindings in the table on LiveChart. Set AccessibleLabel to a useful metric and time period, and Title to the chart heading. Use the layout’s actual slot name if it differs. Bind native choice values with expressions such as Entities.ChartValueFormat.Number.
Create XCategories and YCategories in display order. Each Cells row needs its own Key plus XKey and YKey pointing to those lists. Aggregate duplicates before mapping: only one cell may occupy an X/Y pair. Use IsMissing = True for an unavailable measure. To keep scale bounds comparable between refreshes, set UseMinimum/UseMaximum and MinValue/MaxValue; minimum must be lower than maximum. Diverging is available for values on both sides of a meaningful midpoint.
Create your own GetChartData Data Action or Server Action, authorize its query and return the typed Lists above. If an Aggregate returns entity records, map them explicitly into these public Structures using a For Each, Assign and ListAppend. Only bind a query result directly when its type already matches. The chart does not query your database.
XCategories · BluChartCategory List · sample records and mappingCreate a screen local XCategories of type BluChartCategory List. In your mapping action, use a temporary RowXCategories of type BluChartCategory. Fill every field used by this chart before appending each row.
ListClear(List: XCategories)
For Each source record in your ordered query result:
Assign RowXCategories fields from that record
ListAppend(List: XCategories, Element: RowXCategories)
Example Assign values for the first sample row:
RowXCategories.Key = "month-1"
RowXCategories.Label = "Jan"
RowXCategories.Color.Mode = Entities.ChartColorMode.Automatic
RowXCategories.Color.ThemeColor = Entities.ComponentColor.Primary
RowXCategories.Color.Hex = ""The loop describes your action flow, not code to paste into a JavaScript node. Replace the sample literals with your query fields. Reset optional fields on every iteration so values do not carry over from the previous row.
For a quick fixture, use JSON Deserialize with Data Type BluChartCategory List, then assign its Data output to XCategories. In the JSONString expression editor, wrap the copied JSON in a Text literal and double embedded quotes, or read it from a Text variable. The resulting Block input remains a typed List.
[
{
"Key": "month-1",
"Label": "Jan",
"Color": {
"Mode": "Automatic",
"ThemeColor": "Primary",
"Hex": ""
}
},
{
"Key": "month-2",
"Label": "Feb",
"Color": {
"Mode": "Automatic",
"ThemeColor": "Primary",
"Hex": ""
}
},
{
"Key": "month-3",
"Label": "Mar",
"Color": {
"Mode": "Automatic",
"ThemeColor": "Primary",
"Hex": ""
}
},
{
"Key": "month-4",
"Label": "Apr",
"Color": {
"Mode": "Automatic",
"ThemeColor": "Primary",
"Hex": ""
}
},
{
"Key": "month-5",
"Label": "May",
"Color": {
"Mode": "Automatic",
"ThemeColor": "Primary",
"Hex": ""
}
},
{
"Key": "month-6",
"Label": "Jun",
"Color": {
"Mode": "Automatic",
"ThemeColor": "Primary",
"Hex": ""
}
}
]YCategories · BluChartCategory List · sample records and mappingCreate a screen local YCategories of type BluChartCategory List. In your mapping action, use a temporary RowYCategories of type BluChartCategory. Fill every field used by this chart before appending each row.
ListClear(List: YCategories)
For Each source record in your ordered query result:
Assign RowYCategories fields from that record
ListAppend(List: YCategories, Element: RowYCategories)
Example Assign values for the first sample row:
RowYCategories.Key = "region-0"
RowYCategories.Label = "North America"
RowYCategories.Color.Mode = Entities.ChartColorMode.Automatic
RowYCategories.Color.ThemeColor = Entities.ComponentColor.Primary
RowYCategories.Color.Hex = ""The loop describes your action flow, not code to paste into a JavaScript node. Replace the sample literals with your query fields. Reset optional fields on every iteration so values do not carry over from the previous row.
For a quick fixture, use JSON Deserialize with Data Type BluChartCategory List, then assign its Data output to YCategories. In the JSONString expression editor, wrap the copied JSON in a Text literal and double embedded quotes, or read it from a Text variable. The resulting Block input remains a typed List.
[
{
"Key": "region-0",
"Label": "North America",
"Color": {
"Mode": "Automatic",
"ThemeColor": "Primary",
"Hex": ""
}
},
{
"Key": "region-1",
"Label": "Europe",
"Color": {
"Mode": "Automatic",
"ThemeColor": "Primary",
"Hex": ""
}
},
{
"Key": "region-2",
"Label": "Asia Pacific",
"Color": {
"Mode": "Automatic",
"ThemeColor": "Primary",
"Hex": ""
}
},
{
"Key": "region-3",
"Label": "Latin America",
"Color": {
"Mode": "Automatic",
"ThemeColor": "Primary",
"Hex": ""
}
}
]Cells · BluChartHeatmapCell List · sample records and mappingCreate a screen local Cells of type BluChartHeatmapCell List. In your mapping action, use a temporary RowCells of type BluChartHeatmapCell. Fill every field used by this chart before appending each row.
ListClear(List: Cells)
For Each source record in your ordered query result:
Assign RowCells fields from that record
ListAppend(List: Cells, Element: RowCells)
Example Assign values for the first sample row:
RowCells.Key = "region-0-month-1"
RowCells.XKey = "month-1"
RowCells.YKey = "region-0"
RowCells.Value = 42000
RowCells.IsMissing = FalseThe loop describes your action flow, not code to paste into a JavaScript node. Replace the sample literals with your query fields. Reset optional fields on every iteration so values do not carry over from the previous row.
For a quick fixture, use JSON Deserialize with Data Type BluChartHeatmapCell List, then assign its Data output to Cells. In the JSONString expression editor, wrap the copied JSON in a Text literal and double embedded quotes, or read it from a Text variable. The resulting Block input remains a typed List.
[
{
"Key": "region-0-month-1",
"XKey": "month-1",
"YKey": "region-0",
"Value": 42000,
"IsMissing": false
},
{
"Key": "region-0-month-2",
"XKey": "month-2",
"YKey": "region-0",
"Value": 44940,
"IsMissing": false
},
{
"Key": "region-0-month-3",
"XKey": "month-3",
"YKey": "region-0",
"Value": 47880,
"IsMissing": false
},
{
"Key": "region-0-month-4",
"XKey": "month-4",
"YKey": "region-0",
"Value": 50820,
"IsMissing": false
},
{
"Key": "region-0-month-5",
"XKey": "month-5",
"YKey": "region-0",
"Value": 53760,
"IsMissing": false
},
{
"Key": "region-0-month-6",
"XKey": "month-6",
"YKey": "region-0",
"Value": 56700,
"IsMissing": false
},
{
"Key": "region-1-month-1",
"XKey": "month-1",
"YKey": "region-1",
"Value": 33500,
"IsMissing": false
},
{
"Key": "region-1-month-2",
"XKey": "month-2",
"YKey": "region-1",
"Value": 35845,
"IsMissing": false
},
{
"Key": "region-1-month-3",
"XKey": "month-3",
"YKey": "region-1",
"Value": 38190,
"IsMissing": false
},
{
"Key": "region-1-month-4",
"XKey": "month-4",
"YKey": "region-1",
"Value": 40535,
"IsMissing": false
},
{
"Key": "region-1-month-5",
"XKey": "month-5",
"YKey": "region-1",
"Value": 42880,
"IsMissing": false
},
{
"Key": "region-1-month-6",
"XKey": "month-6",
"YKey": "region-1",
"Value": 45225,
"IsMissing": false
},
{
"Key": "region-2-month-1",
"XKey": "month-1",
"YKey": "region-2",
"Value": 25000,
"IsMissing": false
},
{
"Key": "region-2-month-2",
"XKey": "month-2",
"YKey": "region-2",
"Value": 26750,
"IsMissing": false
},
{
"Key": "region-2-month-3",
"XKey": "month-3",
"YKey": "region-2",
"Value": 28500,
"IsMissing": false
},
{
"Key": "region-2-month-4",
"XKey": "month-4",
"YKey": "region-2",
"Value": 30250,
"IsMissing": false
},
{
"Key": "region-2-month-5",
"XKey": "month-5",
"YKey": "region-2",
"Value": 32000,
"IsMissing": false
},
{
"Key": "region-2-month-6",
"XKey": "month-6",
"YKey": "region-2",
"Value": 33750,
"IsMissing": false
},
{
"Key": "region-3-month-1",
"XKey": "month-1",
"YKey": "region-3",
"Value": 16500,
"IsMissing": false
},
{
"Key": "region-3-month-2",
"XKey": "month-2",
"YKey": "region-3",
"Value": 17655,
"IsMissing": false
},
{
"Key": "region-3-month-3",
"XKey": "month-3",
"YKey": "region-3",
"Value": 18810,
"IsMissing": false
},
{
"Key": "region-3-month-4",
"XKey": "month-4",
"YKey": "region-3",
"Value": 19965,
"IsMissing": false
},
{
"Key": "region-3-month-5",
"XKey": "month-5",
"YKey": "region-3",
"Value": 21120,
"IsMissing": false
},
{
"Key": "region-3-month-6",
"XKey": "month-6",
"YKey": "region-3",
"Value": 22275,
"IsMissing": false
}
]Set Loading = True before a request. On success, assign all related Lists and Loading = False together in one Assign node. An empty successful result is a valid empty state. On an exception, set Loading to False and show your application’s request error; preserve the last successful data if useful. OnError reports chart failures, not errors in your Server Action.
GetChartData completes successfully
→ Assign
XCategories = GetChartData.XCategories
YCategories = GetChartData.YCategories
Cells = GetChartData.Cells
Loading = False
→ EndIf filters can change while a request is pending, disable repeated requests or use a request-version local and apply only the latest response. Keep keys stable and leave ResetKey unchanged during ordinary refreshes. Change ResetKey intentionally only when you want to reset the view and temporary highlight. The Block owns creation, updates and cleanup; do not manually mount a Web chart inside it.
SelectionKey identifies a cell. Point.XKey and Point.YKey identify its dimensions.
Create a screen Client Action for each event you need. Add the handler input parameters below, select that handler on LiveChart, and map its inputs to the event arguments in the Block properties.
OnChartReady → HandleChartReadyThe native chart is mounted. Save ChartId for public Client Actions; it is valid only for this mounted instance.
| Handler input | Native type | Mapping in LiveChart event property |
|---|---|---|
| ReceivedChartId | Text | ReceivedChartId = ChartId |
Start → Assign LiveChartId = ReceivedChartId → EndOnPointClick → HandlePointClickA point was activated on the chart or its data table. Origin distinguishes the two. Use Point business keys to open an authorized detail view.
| Handler input | Native type | Mapping in LiveChart event property |
|---|---|---|
| ReceivedPoint | BluChartPoint | ReceivedPoint = Point |
| ReceivedOrigin | ChartOrigin Identifier | ReceivedOrigin = Origin |
Start → Assign LastPoint = ReceivedPoint →
Use the relevant business keys to open your detail screen or call your own data action → EndKeep ReceivedOrigin if your application distinguishes chart interaction from data-table interaction. An event does not authorize access: your Server Action or detail route must check the current user’s permissions.
OnSelectionChanged → HandleSelectionChangedSelection changed or was cleared after a data update. Echo Key into SelectedKey only when HasSelection is True; otherwise assign an empty string.
| Handler input | Native type | Mapping in LiveChart event property |
|---|---|---|
| ReceivedSelection | BluChartSelection | ReceivedSelection = Selection |
Start → Assign SelectionKey = If(ReceivedSelection.HasSelection, ReceivedSelection.Key, "") → EndBind LiveChart.SelectedKey = SelectionKey. Use the supplied key unchanged; do not reconstruct it from a label. Reason = "DataChanged" can clear a selection removed by a refresh. Echoing the new value is silent; do not reload all data solely to echo selection.
OnStateChanged → HandleStateChangedThe chart reports Loading, Ready, Empty or Error with its render revision. This is chart state, not confirmation of a database transaction.
| Handler input | Native type | Mapping in LiveChart event property |
|---|---|---|
| ReceivedState | ChartState Identifier | ReceivedState = State |
| ReceivedRevision | Integer | ReceivedRevision = Revision |
Start → Assign CurrentChartState = ReceivedState, ChartRevision = ReceivedRevision → EndOnPatternsChanged → HandlePatternsChangedThe toolbar changed pattern visibility. Echo ShowPatterns into the bound Boolean local.
| Handler input | Native type | Mapping in LiveChart event property |
|---|---|---|
| ReceivedShowPatterns | Boolean | ReceivedShowPatterns = ShowPatterns |
Start → Assign PatternsEnabled = ReceivedShowPatterns → EndOnExportStarted → HandleExportStartedA PNG/SVG export was initiated. RequestId correlates a requested export; this event does not confirm the user saved a file.
| Handler input | Native type | Mapping in LiveChart event property |
|---|---|---|
| ReceivedRequestId | Text | ReceivedRequestId = RequestId |
| ReceivedFormat | ChartExportFormat Identifier | ReceivedFormat = Format |
| ReceivedFileName | Text | ReceivedFileName = FileName |
Start → Assign ExportStatus = "Export started" →
Correlate ReceivedRequestId with your export request → EndOnError → HandleErrorValidation, rendering, resource or license failure. Inspect Code and FieldPath; use RequestId to correlate an action failure. Show safe feedback and permit retry when appropriate.
| Handler input | Native type | Mapping in LiveChart event property |
|---|---|---|
| ReceivedError | BluChartError | ReceivedError = Error |
Start → Assign LastChartError = ReceivedError →
Show safe feedback; log Code, FieldPath and RequestId in your application → EndEnable external chart controls only after LiveChartId <> "". Capture this value from OnChartReady, not ChartRegion.Id. Clear the stored ID if your screen removes the Block, and use the newly emitted ID after remounting.
| Action | Input mappings | When to call |
|---|---|---|
| Chart_Resize | ChartId = LiveChartId | After the chart’s tab, modal or container becomes visible and its layout has rendered. |
| Chart_Highlight | ChartId = LiveChartId; SelectionKey = SelectionKey | Temporarily emphasize the selected item; pass "" to clear. It does not change SelectedKey. |
| Chart_Download | ChartId = LiveChartId; Format = Entities.ChartExportFormat.svg; FileName = "chart-report"; RequestId = ExportRequestId | From your Export button. Create ExportRequestId as a Text local and assign a new unique application token for each attempt. |
Export button → If LiveChartId <> ""
→ Assign ExportRequestId = your new unique request token
→ Chart_Download(ChartId: LiveChartId, Format: Entities.ChartExportFormat.svg,
FileName: "chart-report", RequestId: ExportRequestId)
→ If Chart_Download.Success
True: show "Export started"
False: handle Chart_Download.Error
→ EndCheck Success and Error from every command. PNG is Entities.ChartExportFormat.png. OnExportStarted reports initiation only; the browser controls the file save. Chart_Highlight is temporary emphasis; use the bound SelectedKey for persistent selection.
Download the free Charts Community archive and install it with npm.
npm install ./blukavantui-charts-community-1.0.1.tgzImport this chart from @blukavantui/charts-community/heatmap. Keep the shared theme loaded once. Charts is separate from the UI library; your bundler only includes the chart modules you import.
This code follows the current playground settings and input data.
Configure the referenced Block in Service Studio using typed inputs, screen state and Client Actions. The Implementation tab includes the widget tree and exact event argument mappings.
These APIs belong to the released Web Charts package. Select OutSystems above for native Block inputs, types and events.
BluKavantUi_Charts_Community.Heatmap · Structures and chart Static Entities from BluKavantUi_Charts_Core.
Native OutSystems downloads available. Community is free; Pro requires a valid license covering the release. Download the native packages and complete IPP processing for your destination. Web downloads do not install in Service Studio. Modules, downloads and setup →
Bind typed Lists directly. Use native Static Entity records for choices; the Block handles serialization and its own lifecycle.
| Input | Native type | Default / required | Meaning |
|---|---|---|---|
| XCategories | BluChartCategory List | Required | Typed BluChartCategory List. Bind the matching screen List; see Implementation for field mapping and key relationships. |
| YCategories | BluChartCategory List | Required | Typed BluChartCategory List. Bind the matching screen List; see Implementation for field mapping and key relationships. |
| Cells | BluChartHeatmapCell List | Required | Typed BluChartHeatmapCell List. Bind the matching screen List; see Implementation for field mapping and key relationships. |
| Input | Native type | Default / required | Meaning |
|---|---|---|---|
| Title | Text | "Chart" | Heading shown above the chart when ShowHeader is True. |
| Description | Text | "" | Plain-text context beneath the title. |
| Height | Integer | 320 | Plot height in CSS pixels; large charts allow 160–1000. Header and table add to total height. |
| ValueFormat | ChartValueFormat Identifier | Entities.ChartValueFormat.Number | Display numbers, currency or percentages. Percent formats a ratio: 0.25 displays as 25%. |
| CurrencyCode | Text | "USD" | ISO currency code used with ValueFormat.Currency, for example USD or EUR. |
| Locale | Text | "en-US" | BCP 47 locale for number and date presentation, for example en-US or de-DE. |
| UseCustomPrecision | Boolean | False | Enable DecimalPlaces for display only; underlying values and exported table text are preserved. |
| DecimalPlaces | Integer | 2 | Display precision when UseCustomPrecision is True; does not round stored data. |
| AccessibleLabel | Text | "" | Meaningful label for assistive technology; include the metric and reporting period. |
| ExtendedClass | Text | "" | Additional CSS classes on this Block. |
| ResetKey | Text | "" | Change intentionally to reset the view and temporary highlight. Ordinary data updates preserve the view. |
| ShowHeader | Boolean | True | Show the title and description. |
| ShowToolbar | Boolean | True | Show the built-in chart toolbar. |
| ShowLegend | Boolean | True | Show the series or item legend. |
| LegendStyle | ChartLegendStyle Identifier | Entities.ChartLegendStyle.Standard | Choose the legend presentation using a ChartLegendStyle record. |
| LegendPosition | ChartLegendPosition Identifier | Entities.ChartLegendPosition.Top | Place the legend above, below or beside the plot. |
| LegendShowValues | Boolean | True | Family-aware metric: latest observation, reported measures, count, throughput or value. |
| LegendShowPercentages | Boolean | False | Percentages apply only to circular partitions and top-level Treemap groups. |
| ShowTooltip | Boolean | True | Show point details on interaction. |
| ShowLabels | Boolean | False | Show measurement labels. Treemap, Sankey and Funnel retain identifying names even when False. |
| ShowDataTable | Boolean | True | True opens the accessible data table. False uses a compact disclosure; the data alternative remains available. |
| ShowPatterns | Boolean | False | Use patterns as an additional cue; echo OnPatternsChanged into this input. |
| EnableSelection | Boolean | True | Allow users to select data points. |
| EnableAnimation | Boolean | True | Animate chart transitions; reduced-motion preferences are respected. |
| IsLoading | Boolean | False | Set True while the consumer retrieves data; an empty list with False is an empty result. |
| EmptyMessage | Text | "No data to display" | Plain-text feedback when data is empty and IsLoading is False. |
| SelectedKey | Text | "" | Stable family selection key; blank clears. Parent echoes are silent. |
| ExportFootnote | Text | "BluKavantUI Charts" | Plain-text attribution included in downloaded charts. |
| ColorScale | ChartColorScale Identifier | Entities.ChartColorScale.Automatic | Theme palette for the numeric scale. Diverging is supported by Heatmap only. |
| UseMinimum | Boolean | False | Apply MinValue to the heatmap scale when True. |
| UseMaximum | Boolean | False | Apply MaxValue to the heatmap scale when True. |
| MinValue | Decimal | 0 | Explicit lower bound when UseMinimum is True. |
| MaxValue | Decimal | 0 | Explicit upper bound when UseMaximum is True. |
| Messages | BluChartMessage List | Empty List | Optional unique Key/Text translations. Labels are plain text, never executable HTML. |
Select a handler on the referenced Block’s event property. Create handler inputs with these exact types and map each event argument to its handler input. The Implementation tab includes complete mappings and action flows.
OnChartReadyThe native chart is mounted. Save ChartId for public Client Actions; it is valid only for this mounted instance.
| Event argument | Native type |
|---|---|
| ChartId | Text |
OnPointClickA point was activated on the chart or its data table. Origin distinguishes the two. Use Point business keys to open an authorized detail view.
| Event argument | Native type |
|---|---|
| Point | BluChartPoint |
| Origin | ChartOrigin Identifier |
OnSelectionChangedSelection changed or was cleared after a data update. Echo Key into SelectedKey only when HasSelection is True; otherwise assign an empty string.
| Event argument | Native type |
|---|---|
| Selection | BluChartSelection |
OnStateChangedThe chart reports Loading, Ready, Empty or Error with its render revision. This is chart state, not confirmation of a database transaction.
| Event argument | Native type |
|---|---|
| State | ChartState Identifier |
| Revision | Integer |
OnPatternsChangedThe toolbar changed pattern visibility. Echo ShowPatterns into the bound Boolean local.
| Event argument | Native type |
|---|---|
| ShowPatterns | Boolean |
OnExportStartedA PNG/SVG export was initiated. RequestId correlates a requested export; this event does not confirm the user saved a file.
| Event argument | Native type |
|---|---|
| RequestId | Text |
| Format | ChartExportFormat Identifier |
| FileName | Text |
OnErrorValidation, rendering, resource or license failure. Inspect Code and FieldPath; use RequestId to correlate an action failure. Show safe feedback and permit retry when appropriate.
| Event argument | Native type |
|---|---|
| Error | BluChartError |
Reference each action from its owning producer. Chart commands require the live ChartId from OnChartReady. Check both Success and Error.
Chart_ResizeProducer: BluKavantUi_Charts_Core. Recalculate layout after revealing a previously hidden chart. Call after its containing UI has rendered.
| Input | Native type | Default / required | Meaning |
|---|---|---|---|
| ChartId | Text | Required | Saved ChartId from OnChartReady; never a Container.Id. |
| Output | Native type | Meaning |
|---|---|---|
| Success | Boolean | Whether the command was accepted. |
| Error | BluChartError | Structured error when rejected. |
Chart_HighlightProducer: BluKavantUi_Charts_Core. Temporarily highlight a selection key. Pass an empty string to clear the highlight. This does not change the controlled SelectedKey.
| Input | Native type | Default / required | Meaning |
|---|---|---|---|
| ChartId | Text | Required | Saved ChartId from OnChartReady; never a Container.Id. |
| SelectionKey | Text | "" | Existing family selection key, or blank to clear the temporary highlight. |
| Output | Native type | Meaning |
|---|---|---|
| Success | Boolean | Whether the command was accepted. |
| Error | BluChartError | Structured error when rejected. |
Chart_DownloadProducer: BluKavantUi_Charts_Core. Initiate a PNG or SVG export. Success means the operation was accepted, not that a file was saved.
| Input | Native type | Default / required | Meaning |
|---|---|---|---|
| ChartId | Text | Required | Saved ChartId from OnChartReady; never a Container.Id. |
| Format | ChartExportFormat Identifier | Entities.ChartExportFormat.png | Native ChartExportFormat record. |
| FileName | Text | "chart" | Download filename without the format extension. |
| RequestId | Text | "" | Optional application request token to correlate export events and errors. |
| Output | Native type | Meaning |
|---|---|---|
| Success | Boolean | Whether the command was accepted. |
| Error | BluChartError | Structured error when rejected. |
Reference these public structures instead of creating lookalike local structures. Guard optional point fields with their Has… flags. Zero is a real number; IsMissing identifies absent measurements.
BluChartColorStructure · 3 fieldsProducer: BluKavantUi_Charts_Core.
| Attribute | Native type | Default | Meaning |
|---|---|---|---|
| Mode | ChartColorMode Identifier | Entities.ChartColorMode.Automatic | Select Automatic, Theme, or Custom. |
| ThemeColor | ComponentColor Identifier | Entities.ComponentColor.Primary | Existing Community palette identifier. |
| Hex | Text | "" | Custom #RGB or #RRGGBB color. |
BluChartCategoryStructure · 3 fieldsProducer: BluKavantUi_Charts_Core.
| Attribute | Native type | Default | Meaning |
|---|---|---|---|
| Key | Text | "" | Stable business key; must be unique in its list. |
| Label | Text | "" | Plain-text display label. |
| Color | BluChartColor | Native default | Automatic palette, shared theme color, or validated custom hex. |
BluChartHeatmapCellStructure · 5 fieldsProducer: BluKavantUi_Charts_Core.
| Attribute | Native type | Default | Meaning |
|---|---|---|---|
| Key | Text | "" | Stable cell key. |
| XKey | Text | "" | Matches XCategories.Key. |
| YKey | Text | "" | Matches YCategories.Key. |
| Value | Decimal | 0 | Measurement. Use IsMissing for absent values; zero is a real value. |
| IsMissing | Boolean | False | True means the measurement is absent. |
BluChartMessageStructure · 2 fieldsProducer: BluKavantUi_Charts_Core.
| Attribute | Native type | Default | Meaning |
|---|---|---|---|
| Key | Text | "" | Supported translation key, unique in this list. |
| Text | Text | "" | Plain-text translation; never HTML. |
BluChartSelectionStructure · 4 fieldsProducer: BluKavantUi_Charts_Core.
| Attribute | Native type | Default | Meaning |
|---|---|---|---|
| HasSelection | Boolean | False | False means selection was cleared. |
| Key | Text | "" | Stable selected key. |
| Kind | Text | "" | Family selection category. |
| Reason | Text | "" | User or DataChanged. |
BluChartErrorStructure · 5 fieldsProducer: BluKavantUi_Charts_Core.
| Attribute | Native type | Default | Meaning |
|---|---|---|---|
| Code | Text | "" | Stable error code. |
| Message | Text | "" | Developer-facing diagnostic without consumer records or secrets. |
| FieldPath | Text | "" | Field when identifiable. |
| RequestId | Text | "" | Correlated request identifier. |
| IsRecoverable | Boolean | True | Whether corrected inputs can recover. |
BluChartPointStructure · 29 fieldsProducer: BluKavantUi_Charts_Core.
| Attribute | Native type | Default | Meaning |
|---|---|---|---|
| PointKey | Text | "" | Opaque identity for the specific observation. Use SelectionKey for SelectedKey; use business keys for your queries. |
| SelectionKey | Text | "" | Value to use for controlled selection or highlighting. |
| SelectionKind | Text | "" | Family selection kind; for example Category, Series, Cell, Point, Day or Node. |
| PointKind | Text | "" | Point or observation kind. Sankey distinguishes Node and Link; GeoMap distinguishes Region and Location. |
| Label | Text | "" | Native point context: Label. |
| Value | Decimal | 0 | Numeric measurement; when IsMissing is True, the zero here is only a placeholder. |
| IsMissing | Boolean | False | Native point context: IsMissing. |
| ValueText | Text | "" | Invariant Decimal text retained at the native boundary where available; use for precise display or logging. Derived aggregates can be rounded. |
| CategoryKey | Text | "" | Native point context: CategoryKey. |
| SeriesKey | Text | "" | Native point context: SeriesKey. |
| SeriesLabel | Text | "" | Native point context: SeriesLabel. |
| RingKey | Text | "" | Native point context: RingKey. |
| XKey | Text | "" | Native point context: XKey. |
| YKey | Text | "" | Native point context: YKey. |
| ParentKey | Text | "" | Native point context: ParentKey. |
| SourceKey | Text | "" | Native point context: SourceKey. |
| TargetKey | Text | "" | Native point context: TargetKey. |
| Group | Text | "" | Native point context: Group. |
| HasDate | Boolean | False | Read Date only when True. |
| Date | Text | "" | Date-only ISO text when HasDate=True. |
| HasXY | Boolean | False | Read X and Y only when True. |
| X | Decimal | 0 | Native point context: X. |
| Y | Decimal | 0 | Native point context: Y. |
| HasSize | Boolean | False | Read Size only when True. |
| Size | Decimal | 0 | Native point context: Size. |
| HasCoordinates | Boolean | False | Read Longitude and Latitude only when True. |
| Longitude | Decimal | 0 | Native point context: Longitude. |
| Latitude | Decimal | 0 | Native point context: Latitude. |
| IsDerived | Boolean | False | True for computed treemap parent totals and Sankey node throughput. |
Bind expressions such as Entities.ChartValueFormat.Number. Names are case-sensitive. ComponentColor comes from Community Core; other chart choices come from Charts Core.
ChartColorMode3 recordsStatic choices from BluKavantUi_Charts_Core. Producer: BluKavantUi_Charts_Core.
| Record | Service Studio expression |
|---|---|
| Automatic | Entities.ChartColorMode.Automatic |
| Theme | Entities.ChartColorMode.Theme |
| Custom | Entities.ChartColorMode.Custom |
ChartValueFormat3 recordsStatic choices from BluKavantUi_Charts_Core. Producer: BluKavantUi_Charts_Core.
| Record | Service Studio expression |
|---|---|
| Number | Entities.ChartValueFormat.Number |
| Currency | Entities.ChartValueFormat.Currency |
| Percent | Entities.ChartValueFormat.Percent |
ChartLegendStyle4 recordsStatic choices from BluKavantUi_Charts_Core. Producer: BluKavantUi_Charts_Core.
| Record | Service Studio expression |
|---|---|
| Standard | Entities.ChartLegendStyle.Standard |
| ValueList | Entities.ChartLegendStyle.ValueList |
| Compact | Entities.ChartLegendStyle.Compact |
| SummaryCards | Entities.ChartLegendStyle.SummaryCards |
ChartLegendPosition4 recordsStatic choices from BluKavantUi_Charts_Core. Producer: BluKavantUi_Charts_Core.
| Record | Service Studio expression |
|---|---|
| Top | Entities.ChartLegendPosition.Top |
| Left | Entities.ChartLegendPosition.Left |
| Right | Entities.ChartLegendPosition.Right |
| Bottom | Entities.ChartLegendPosition.Bottom |
ChartColorScale21 recordsDiverging is accepted by Heatmap only. Other families use Automatic or a theme color. Producer: BluKavantUi_Charts_Core.
| Record | Service Studio expression |
|---|---|
| Automatic | Entities.ChartColorScale.Automatic |
| Diverging | Entities.ChartColorScale.Diverging |
| Default | Entities.ChartColorScale.Default |
| Primary | Entities.ChartColorScale.Primary |
| Secondary | Entities.ChartColorScale.Secondary |
| Success | Entities.ChartColorScale.Success |
| Processing | Entities.ChartColorScale.Processing |
| Warning | Entities.ChartColorScale.Warning |
| Error | Entities.ChartColorScale.Error |
| Danger | Entities.ChartColorScale.Danger |
| Magenta | Entities.ChartColorScale.Magenta |
| Red | Entities.ChartColorScale.Red |
| Volcano | Entities.ChartColorScale.Volcano |
| Orange | Entities.ChartColorScale.Orange |
| Gold | Entities.ChartColorScale.Gold |
| Lime | Entities.ChartColorScale.Lime |
| Green | Entities.ChartColorScale.Green |
| Cyan | Entities.ChartColorScale.Cyan |
| Blue | Entities.ChartColorScale.Blue |
| GeekBlue | Entities.ChartColorScale.GeekBlue |
| Purple | Entities.ChartColorScale.Purple |
ChartState4 recordsStatic choices from BluKavantUi_Charts_Core. Producer: BluKavantUi_Charts_Core.
| Record | Service Studio expression |
|---|---|
| Loading | Entities.ChartState.Loading |
| Ready | Entities.ChartState.Ready |
| Empty | Entities.ChartState.Empty |
| Error | Entities.ChartState.Error |
ChartOrigin2 recordsStatic choices from BluKavantUi_Charts_Core. Producer: BluKavantUi_Charts_Core.
| Record | Service Studio expression |
|---|---|
| Chart | Entities.ChartOrigin.Chart |
| Table | Entities.ChartOrigin.Table |
ChartExportFormat2 recordsStatic choices from BluKavantUi_Charts_Core. Producer: BluKavantUi_Charts_Core.
| Record | Service Studio expression |
|---|---|
| png | Entities.ChartExportFormat.png |
| svg | Entities.ChartExportFormat.svg |
ComponentColor19 recordsShared Community palette. Producer: BluKavantUi_Community_Core.
| Record | Service Studio expression |
|---|---|
| Default | Entities.ComponentColor.Default |
| Primary | Entities.ComponentColor.Primary |
| Secondary | Entities.ComponentColor.Secondary |
| Success | Entities.ComponentColor.Success |
| Warning | Entities.ComponentColor.Warning |
| Danger | Entities.ComponentColor.Danger |
| Processing | Entities.ComponentColor.Processing |
| Error | Entities.ComponentColor.Error |
| Magenta | Entities.ComponentColor.Magenta |
| Red | Entities.ComponentColor.Red |
| Volcano | Entities.ComponentColor.Volcano |
| Orange | Entities.ComponentColor.Orange |
| Gold | Entities.ComponentColor.Gold |
| Lime | Entities.ComponentColor.Lime |
| Green | Entities.ComponentColor.Green |
| Cyan | Entities.ComponentColor.Cyan |
| Blue | Entities.ComponentColor.Blue |
| GeekBlue | Entities.ComponentColor.GeekBlue |
| Purple | Entities.ComponentColor.Purple |
Every chart includes exact values in a data table, keyboard selection, labelled legend controls, loading announcements and reduced-motion support. Patterns are optional; series also use shapes, line styles and text.
PNG and SVG are visual exports. Keep an accessible table or description alongside exported images. Test your real datasets, labels, theme overrides and surrounding page with keyboard and assistive technology. POC audit evidence informs this release; package integration checks do not constitute a blanket WCAG conformance certification.
Reveal patterns across two dimensions with a color scale and precise, selectable values.
Tab reaches legend controls, downloads and the data table. Enter or Space highlights a legend item or selects a data row. Escape dismisses tooltips. Reduced motion is respected.
See the support status above for review coverage and any limitations.
Provide useful labels, preserve visible focus, and test the component with your actual content. Use text alongside status colors and check contrast in each state.
Interact with an example to see its events.