Item Option

Introduction

luzmo-item-option renders a single chart option control. Use it when you want to expose one specific setting, such as a title toggle, a chart mode picker, or a color selector, instead of showing the full options editor.

This component works well in custom chart builders, simplified configuration screens, and role-based UIs where only a few settings should be editable. It can load a built-in option by combining item-type with option-key , or render a fully custom control through customOptionConfiguration . If you want to expose all supported options for a chart type at once, use luzmo-item-option-panel instead.

Treat options as application state: listen to luzmo-options-changed , update your state, and pass the updated object back into the component. When you need to find a valid built-in option-key , inspect the exported item options config for your chart type in @luzmo/analytics-components-kit/item-options-configs .

Use the <luzmo-item-option> element in your HTML.

Interactive example

Properties

Use HTML attributes for primitive values in markup, and JS properties for objects, arrays, and programmatic updates.

Events

Types

This entrypoint has no component-owned type exports. All useful types are imported from the shared types barrel.

import '@luzmo/analytics-components-kit/item-option';

import type {
  OptionConfig,
  OptionTranslation,
  Slot,
  ThemeConfig,
  TranslationOverrides,
  TranslationsFile,
  VizItemType
} from '@luzmo/analytics-components-kit/types';

The luzmo-options-changed event does not currently have a named exported interface. Its payload shape is CustomEvent<{ options: Record<string, unknown> }> .

CSS Variables

All CSS variables in this section can be set on luzmo-item-option { ... } or on a parent container. They cascade into the internally rendered control.

Base

Action Button Group

These variables apply when control.type="action-button-group" .

Position Picker

These variables apply when control.type="position-picker" .

Positions Number Field

These variables apply when control.type="positions-number-field" .

Color Range

These variables apply when control.type="color-range" .

Code examples

<luzmo-item-option
  id="itemOptionBuiltIn"
  item-type="bar-chart"
  option-key="display.title"
  language="en"
  size="m"
></luzmo-item-option>

<luzmo-item-option
  id="itemOptionCustom"
  language="en"
  size="m"
></luzmo-item-option>

<script type="module">
  import '@luzmo/analytics-components-kit/item-option';

  let options = {
    display: { title: true },
    chartColor: '#336699'
  };

  const itemOptionBuiltIn = document.getElementById('itemOptionBuiltIn');
  const itemOptionCustom = document.getElementById('itemOptionCustom');

  itemOptionBuiltIn.options = options;
  itemOptionBuiltIn.slots = [];

  itemOptionCustom.options = options;
  itemOptionCustom.customOptionConfiguration = {
    key: 'chartColor',
    control: {
      type: 'color-picker',
      default: '#336699'
    }
  };
  itemOptionCustom.customTranslations = {
    label: 'Chart color',
    description: 'Primary color used for chart elements.'
  };

  const syncOptions = (nextOptions) => {
    options = nextOptions;
    itemOptionBuiltIn.options = options;
    itemOptionCustom.options = options;
  };

  itemOptionBuiltIn.addEventListener('luzmo-options-changed', (event) => {
    syncOptions(event.detail.options);
  });

  itemOptionCustom.addEventListener('luzmo-options-changed', (event) => {
    syncOptions(event.detail.options);
  });
</script>