The Analytics Components Kit is a collection of web components, published as @luzmo/analytics-components-kit , that you use to build chart configuration interfaces inside your own application. With these components, your users can browse available data, assign fields to chart slots, adjust styling and behavior options, apply filters, and arrange multiple charts on a grid -- all through UI controls that you embed directly in your product.
The kit does not render charts itself. Its job is to produce a chart configuration object (chart type, slots, options, and filters). You hand that configuration to Luzmo Embed ( @luzmo/embed or one of its framework wrappers), which takes care of rendering the visualization. The two libraries complement each other: the configuration components handle the "configure" step, Embed handles the "render" step.
These components are designed for scenarios where you want to give your users control over how their charts are set up, without building a chart editor from scratch. Common use cases include:
Custom report builders -- Let users create and modify charts by choosing data fields, picking a chart type, and tweaking options such as colors, labels, or stacking mode.
Self-service analytics -- Give non-technical users a drag-and-drop or dropdown-based interface to explore their data and build their own visualizations.
Multi-chart grids -- Combine the grid layout component with the configuration components so users can arrange, resize, and configure multiple charts on a single canvas.
The typical flow has three steps:
Configure -- Your users interact with the configuration components to select data fields, assign them to chart slots, set options, and define filters. Each change fires an event that your application captures.
Store -- Your application keeps the resulting configuration ( slotsContents , options , filters ) as its own state. The kit follows a one-way data flow: your app is the single source of truth.
Render -- You pass the configuration into a Luzmo Embed component ( luzmo-embed-viz-item for a single chart, or let luzmo-item-grid handle rendering for a multi-chart layout). Embed fetches the data and draws the visualization.
All components are framework-agnostic web components . They work in plain HTML/JS and in any frontend framework that supports web components.
Install @luzmo/analytics-components-kit to get the configuration components. Optionally add the framework-specific embed package if you want to render standalone charts with luzmo-embed-viz-item .
npm install @luzmo/analytics-components-kitWant a step-by-step walkthrough? Read Building a Dashboard Studio to see these components in action from start to finish.
The configuration that the kit produces -- chart type, slot contents, options, and filters -- is consumed by luzmo-embed-viz-item , a component from @luzmo/embed . It is not part of the kit itself, but it is the other half of the workflow: the kit handles configure , the viz item handles rendering of a chart.
See Using luzmo-embed-viz-item with the kit for the property mapping and setup, or jump to the full Flex component reference for every property, event, and method.
Components are organized into five categories. Each category page gives an overview of the group; individual component pages list every property, event, and CSS variable.
Present the columns and formulas from a dataset so users can pick the data they want to visualize.
luzmo-data-field -- A single draggable data field. Use it when you need fine-grained control over which fields appear and where.
luzmo-data-field-panel -- A ready-made panel that lists all fields for one or more datasets, with built-in search and dataset switching.
Let users assign data fields to chart slots (e.g. "x-axis", "measure", "legend"). Two interaction models are available: drag-and-drop for desktop layouts, and dropdown pickers for compact or mobile layouts.
luzmo-item-slot-drop -- A drop target for a single slot.
luzmo-item-slot-drop-panel -- Renders all slot drop targets for a chart type, with automatic constraint handling.
luzmo-item-slot-picker -- A dropdown picker for a single slot.
luzmo-item-slot-picker-panel -- Renders dropdown pickers for all slots, with automatic constraint handling and an optional dataset picker.
Let users adjust how a chart looks and behaves after data has been selected -- things like colors, label visibility, chart mode, legend position, and more.
luzmo-item-option -- Renders a single option control. Use it when you only need a subset of options in a custom layout.
luzmo-item-option-panel -- Renders the full grouped options editor for a chart type.
luzmo-filters -- A filter editor that supports AND/OR logic and nested groups. Outputs filters in the standard Luzmo format so you can pass them straight to Embed.
luzmo-embed-viz-item -- Renders a single chart from the configuration produced by the kit. Provided by @luzmo/embed .
luzmo-item-grid -- An interactive grid where users can arrange, resize, and manage multiple charts. Handles rendering internally via Luzmo Embed.
Read Patterns to learn how authentication, theming, state management, and rendering work across components.
Browse the individual component pages linked above for full property, event, and CSS variable references.