LaravelUi5
Get Started

<lux:Chart> ​

The client-side control for com.laravelui5.core.Chart — a thin wrapper around an ECharts canvas. The control is dumb by design: it mounts a <div>, calls chart.setOption(option), and forwards a single press event. Everything else — what to draw, what each data point means, what happens on click — is decided server-side by the chart's provider and rendered into the option payload.

The control is registered as part of com.laravelui5.core and is reachable from any UI5 app that loads that library.

What it renders ​

A sap.f.Card envelope from the dashboard wire carries an inner com.laravelui5.core.Chart payload:

json
{
  "sap.f.Card": {
    "header":  { "sap.f.cards.Header": { "title": "Revenue Trend", "subtitle": "…" } },
    "content": { "sap.m.VBox": { "items": [ { "com.laravelui5.core.Chart": { "engine": "echarts", "option": { … } } } ] } },
    "layoutData": { "sap.f.GridContainerItemLayoutData": { "columns": 6, "rows": 4 } }
  }
}

The Dashboard treewalker materialises that into a sap.f.Card → sap.f.cards.Header + sap.m.VBox → com.laravelui5.core.Chart tree. The <lux:Chart> instance receives the inner payload's engine + option as control properties.

Properties ​

PropertyTypeNotes
enginestringRendering engine. Default "echarts", the only one today.
optionobjectEngine-native option tree (ECharts JSON). Updates propagate live.

engine is part of the wire envelope so a future pluralism project has a clean entry point; today the control reads window.echarts unconditionally.

Events ​

EventParametersWhen
presscomponentType, seriesIndex, dataIndex, data, value, nameAny ECharts click: data points, legend items, axis labels, titles.

The control does not classify clicks; filter on componentType (usually series). Whatever the server put on the clicked data point arrives unchanged in data, so a provider can attach routing intent there and the consumer dispatches on it.

Engine loading ​

Core ships no ECharts binary. The host loads it via the bootstrap-extension hook (@includeIf('ui5.head')), typically a CDN script tag:

html
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>

The control reads window.echarts when it renders (onAfterRendering). If the global is absent, the chart stays empty and an error is logged; the rest of the dashboard remains interactive.

The laravelui5-horizon theme (SAP Horizon palette + transparent background) is registered with ECharts once, the first time a chart renders.

Lifecycle ​

  1. Construct — setOption() stages the option on the control instance; the DOM mount point doesn't exist yet.
  2. Render — ChartRenderer writes a sized <div>. On onAfterRendering the control instantiates ECharts on that div, applies the staged option, and registers a ResizeHandler on its own size.
  3. Update — setOption(newOption) while live calls chart.setOption(newOption) without re-rendering the DOM.
  4. Dispose — exit() removes the resize handler and disposes the ECharts instance.

The control is intentionally narrow: no legendChange / dataZoom / brush events, no chart-type vocabulary (Sparkline, Donut, Bar are all <lux:Chart> with different option shapes), no theme picker. The server composes; the client renders.