Single chart rendering

luzmo-embed-viz-item renders a single chart from the configuration that the Analytics Components Kit produces. The kit handles configure , the viz item handles render -- together they form the complete workflow. Use the <luzmo-embed-viz-item> element in your HTML.

Package and import

Install @luzmo/embed alongside the kit:

npm install @luzmo/embed

Framework-specific wrappers are also available ( @luzmo/ngx-embed , @luzmo/react-embed , @luzmo/vue-embed , etc.). See the introduction for setup instructions.

In plain HTML you can load the component as a script tag:

<script type="module" src="https://cdn.luzmo.com/embed/latest/luzmo-embed.js"></script>

Connecting ACK output to the viz item

The Analytics Components Kit and the viz item form two halves of a single workflow: ACK components let users configure a chart (pick data fields, set options, define filters), and luzmo-embed-viz-item renders the result. Your application sits between the two -- it listens for change events from the kit, stores the state, and passes four properties to the viz item.

type -- chart type

Set from the item-type attribute you already pass to slot and option components (e.g. bar-chart , line-chart , donut-chart ). Pass the same string to the viz item's type property. When the user switches chart type, update both sides -- see switchItem .

slots -- data field assignments

Populated by the luzmo-slots-contents-changed event fired by slot components. The slotsContents array in the event detail maps directly to the viz item's slots property. See Item Data Slots .

options -- chart styling and behavior

Populated by the luzmo-options-changed event fired by option components. The options object in the event detail maps directly to the viz item's options property. See Item Options .

filters -- data filtering

Populated by the luzmo-filters-changed event fired by luzmo-filters . The filters array in the event detail maps directly to the viz item's filters property. See Filters .

Quick reference

// Your app keeps the state and passes it to the viz item on every change.
vizItem.type    = 'bar-chart';       // from the item-type attribute
vizItem.slots   = slotsContents;     // from luzmo-slots-contents-changed
vizItem.options = options;           // from luzmo-options-changed
vizItem.filters = filters;           // from luzmo-filters-changed

For a broader view of how ACK components map to Flex SDK inputs -- including which components produce each piece of state -- see How ACK maps to Flex SDK in Patterns.

Minimal example

The snippet below wires a luzmo-item-slot-drop-panel to a luzmo-embed-viz-item . When the user assigns fields to slots, the chart updates in real time.

<luzmo-item-slot-drop-panel
  id="dropPanel"
  item-type="bar-chart"
  auth-key="your-auth-key"
  auth-token="your-auth-token">
</luzmo-item-slot-drop-panel>

<luzmo-embed-viz-item
  id="vizItem"
  type="bar-chart"
  app-server="https://app.luzmo.com"
  api-host="https://api.luzmo.com"
  auth-key="your-auth-key"
  auth-token="your-auth-token">
</luzmo-embed-viz-item>

let slotsContents = [];
const chartType = 'bar-chart';

const dropPanel = document.getElementById('dropPanel');
const vizItem = document.getElementById('vizItem');

dropPanel.addEventListener('luzmo-slots-contents-changed', (e) => {
  slotsContents = e.detail.slotsContents;
  dropPanel.slotsContents = slotsContents;
  vizItem.slots = slotsContents;
});

For a more complete example that also wires options and filters, see the Configure then render section in Patterns.

Full reference

This page only covers the integration surface between the kit and the viz item. For the complete API -- all properties, events, methods, chart types, and slot definitions -- see the Viz Item Component Reference .