MixedChart

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. Configure your Pro license before mounting and keep your backend authorization separate from UI settings.

import { createMixedChart } from '@blukavantui/charts-pro/mixed-chart'
import '@blukavantui/charts-pro/theme.css'
import '@blukavantui/charts-pro/styles.css'

type Options = NonNullable<Parameters<typeof createMixedChart>[1]>
type Events = NonNullable<Parameters<typeof createMixedChart>[2]>

export function mount(host: HTMLElement, options: Options, events: Events = {}) {
  const instance = createMixedChart(host, options, events)
  return {
    instance,
    update: (patch: Partial<Options>) => instance.update(patch),
    destroy: () => instance.destroy(),
  }
}

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.

• Use representative real data, including empty, loading and failed requests.
• Test keyboard interaction, Light and Dark appearance, and a narrow screen with your longest labels.
• Navigate away and back; confirm cleanup, expected state restoration and no duplicated callbacks.

In Service Studio, open Manage Dependencies. Reference MixedChart from BluKavantUi_Charts_Pro, 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. Charts Pro does not require Charts Community if your application only uses Pro charts. 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.

ChartScreen — your Screen
└─ ExistingLayout — your referenced Layout
   └─ Content — the Layout’s existing content slot
      └─ ChartRegion — new Container
         └─ If (LicenseReady) — True branch contains the chart
            └─ LiveChart — BluKavantUi_Charts_Pro.MixedChart

Set 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.

Reference ConfigureChartsLicense from BluKavantUi_Charts_Pro. In your consumer initialization flow, retrieve the authorized license and application ID from your application configuration, call the action, then set LicenseReady = ConfigureChartsLicense.Success. Pass its typed Error to your feedback path when activation fails. Keep the Block inside the True branch of the LicenseReady If.

Start → Load your authorized application license configuration
  → ConfigureChartsLicense(LicenseKey: configured key, ApplicationId: configured application ID)
  → Assign LicenseReady = ConfigureChartsLicense.Success
  → If not LicenseReady: handle ConfigureChartsLicense.Error → End

Use the existing BluKavantUI Pro entitlement. Never embed a customer or demo key into reusable producers. Follow the license validation and network connectivity requirements for your deployment.

Create Categories, MixedSeries and Values. MixedSeries replaces the Series input used by LineChart. Set each MixedSeries.SeriesType to Entities.ChartSeriesType.Bar or Line; set IsDashed for a dashed line. Values.SeriesKey must match MixedSeries.Key. BarLayout controls the bar grouping/stacking, and SmoothLines controls the line shape. Use comparable units on the shared value scale.

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.

ListClear(List: Categories)
For Each source record in your ordered query result:
  Assign RowCategories fields from that record
  ListAppend(List: Categories, Element: RowCategories)

Example Assign values for the first sample row:
RowCategories.Key = "month-1"
RowCategories.Label = "Jan"
RowCategories.Color.Mode = Entities.ChartColorMode.Automatic
RowCategories.Color.ThemeColor = Entities.ComponentColor.Primary
RowCategories.Color.Hex = ""

[
  {
    "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": ""
    }
  }
]

ListClear(List: MixedSeries)
For Each source record in your ordered query result:
  Assign RowMixedSeries fields from that record
  ListAppend(List: MixedSeries, Element: RowMixedSeries)

Example Assign values for the first sample row:
RowMixedSeries.Key = "recurring"
RowMixedSeries.Label = "Recurring"
RowMixedSeries.SeriesType = Entities.ChartSeriesType.Bar
RowMixedSeries.Color.Mode = Entities.ChartColorMode.Automatic
RowMixedSeries.Color.ThemeColor = Entities.ComponentColor.Primary
RowMixedSeries.Color.Hex = ""

[
  {
    "Key": "recurring",
    "Label": "Recurring",
    "SeriesType": "Bar",
    "Color": {
      "Mode": "Automatic",
      "ThemeColor": "Primary",
      "Hex": ""
    }
  },
  {
    "Key": "expansion",
    "Label": "Expansion",
    "SeriesType": "Bar",
    "Color": {
      "Mode": "Automatic",
      "ThemeColor": "Primary",
      "Hex": ""
    }
  },
  {
    "Key": "target",
    "IsDashed": true,
    "Label": "Target",
    "SeriesType": "Line",
    "Color": {
      "Mode": "Automatic",
      "ThemeColor": "Primary",
      "Hex": ""
    }
  }
]

ListClear(List: Values)
For Each source record in your ordered query result:
  Assign RowValues fields from that record
  ListAppend(List: Values, Element: RowValues)

Example Assign values for the first sample row:
RowValues.SeriesKey = "recurring"
RowValues.CategoryKey = "month-1"
RowValues.Value = 95000
RowValues.IsMissing = False

[
  {
    "SeriesKey": "recurring",
    "CategoryKey": "month-1",
    "Value": 95000,
    "IsMissing": false
  },
  {
    "SeriesKey": "recurring",
    "CategoryKey": "month-2",
    "Value": 92000,
    "IsMissing": false
  },
  {
    "SeriesKey": "recurring",
    "CategoryKey": "month-3",
    "Value": 103000,
    "IsMissing": false
  },
  {
    "SeriesKey": "recurring",
    "CategoryKey": "month-4",
    "Value": 112000,
    "IsMissing": false
  },
  {
    "SeriesKey": "recurring",
    "CategoryKey": "month-5",
    "Value": 127000,
    "IsMissing": false
  },
  {
    "SeriesKey": "recurring",
    "CategoryKey": "month-6",
    "Value": 142000,
    "IsMissing": false
  },
  {
    "SeriesKey": "expansion",
    "CategoryKey": "month-1",
    "Value": 18000,
    "IsMissing": false
  },
  {
    "SeriesKey": "expansion",
    "CategoryKey": "month-2",
    "Value": 16000,
    "IsMissing": false
  },
  {
    "SeriesKey": "expansion",
    "CategoryKey": "month-3",
    "Value": 21000,
    "IsMissing": false
  },
  {
    "SeriesKey": "expansion",
    "CategoryKey": "month-4",
    "Value": 24000,
    "IsMissing": false
  },
  {
    "SeriesKey": "expansion",
    "CategoryKey": "month-5",
    "Value": 26000,
    "IsMissing": false
  },
  {
    "SeriesKey": "expansion",
    "CategoryKey": "month-6",
    "Value": 28000,
    "IsMissing": false
  },
  {
    "SeriesKey": "target",
    "CategoryKey": "month-1",
    "Value": 115000,
    "IsMissing": false
  },
  {
    "SeriesKey": "target",
    "CategoryKey": "month-2",
    "Value": 118000,
    "IsMissing": false
  },
  {
    "SeriesKey": "target",
    "CategoryKey": "month-3",
    "Value": 122000,
    "IsMissing": false
  },
  {
    "SeriesKey": "target",
    "CategoryKey": "month-4",
    "Value": 138000,
    "IsMissing": false
  },
  {
    "SeriesKey": "target",
    "CategoryKey": "month-5",
    "Value": 146000,
    "IsMissing": false
  },
  {
    "SeriesKey": "target",
    "CategoryKey": "month-6",
    "Value": 158000,
    "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
      Categories = GetChartData.Categories
      MixedSeries = GetChartData.MixedSeries
      Values = GetChartData.Values
      Loading = False
  → End

If 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 the category; Point.SeriesKey identifies the bar or line metric.

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.

Start → Assign LiveChartId = ReceivedChartId → End

Start → Assign LastPoint = ReceivedPoint →
  Use the relevant business keys to open your detail screen or call your own data action → End

Start → Assign SelectionKey = If(ReceivedSelection.HasSelection, ReceivedSelection.Key, "") → End

Start → Assign CurrentChartState = ReceivedState, ChartRevision = ReceivedRevision → End

Start → Assign PatternsEnabled = ReceivedShowPatterns → End

Start → Assign ExportStatus = "Export started" →
  Correlate ReceivedRequestId with your export request → End

Start → Assign LastChartError = ReceivedError →
  Show safe feedback; log Code, FieldPath and RequestId in your application → End

Enable 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.

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
  → End

Check 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.

• Use at least one Bar and one Line series. Click each in the same category and resolve the correct application metric.
• Publish the consumer, load realistic data, refresh it, then navigate away and back. Verify that handlers run once and that stale responses cannot overwrite new data.
• Try empty data and an invalid record. Use OnError.Code and FieldPath to find the problem, then correct the inputs and retry.
• Check narrow layouts, Light and Dark appearance, keyboard interaction and accessible labels. Keep exact values available in the data table.
• Test a valid license and an activation failure in your consumer; show actionable feedback when the chart cannot be enabled.

Open the native MixedChart review screen ↗ · Full native API →