skills.rest
lightdash
lightdashOFFICIAL
Explore all skills by this author →
Website𝕏@lightdash_devsGitHub

reusable-visualization

Build reusable chart components that receive data and settings from the Lightdash host application.

6.1k|768|Updated Mar 19, 2021
Search Tags:#business intelligence#Visualization#recharts#lightdash#data app#field mapping#chart component
One-click install
npx skills add https://github.com/lightdash/lightdash --skill reusable-visualization
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: reusable-visualization
Source: https://github.com/lightdash/lightdash/tree/main/sandboxes/data-apps/template/.claude/skills/reusable-visualization
Command: npx skills add https://github.com/lightdash/lightdash --skill reusable-visualization

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @lightdash/query-sdk, recharts.

What problem does it solve?

Charts built for one query hardcode column names and display choices, so they cannot be reused across different queries. This Skill guides the creation of a single reusable visualization component (a Lightdash "viz") that declares its field mappings and config options, letting the host application supply data and letting viewers adjust settings without regenerating the chart.

Core Features & Use Cases

  • Host-driven data contract: Uses the useVizContext() hook from @lightdash/query-sdk to receive rows, field mappings, options, and resolved series colours instead of fetching data itself.
  • Declaration contract: Emits a structured declaration of fields, configOptions, and colorPalette so Lightdash builds the field-mapping UI and chart config panel automatically.
  • Backend pivot and data-point actions: Handles backend-pivoted results via pivotDetails and wires underlying-data and drill-down actions with per-row provenance.
  • Use Case: Build one bar chart component that any Lightdash viewer can bind to their own query, recolour with the palette picker, and drill into — without touching the component code.

Quick Start

Ask the AI to build a reusable Lightdash viz component, for example a bar chart with a category dimension, a metric value, and configurable options like max bars and value labels.

Frequently Asked Questions about reusable-visualization

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a reusable chart component in Lightdash?▼

Create a component that reads data through the useVizContext hook from @lightdash/query-sdk instead of running its own query. Declare the fields it needs, the config options viewers can change, and a colorPalette entry so Lightdash builds the mapping UI and config panel.

What is the useVizContext hook in Lightdash?▼

useVizContext is the only channel between a viz component and the Lightdash host. It returns fieldMapping, rows, options, colorPalette, pivotDetails, ready, underlyingData, and drillDown, covering data access, settings, and host-mediated actions.

Can a Lightdash viz run its own query or use filters?▼

No. A reusable visualization does not run queries, so app-level APIs like useLightdash, filtersFor, and addFilter do not apply. The host runs the query and hands the component result rows plus a mapping from declared field names to query field ids.

How do backend-pivoted results work in a Lightdash viz?▼

When a series field is mapped, Lightdash pivots results before they reach the viz, and the metric id is no longer a row key. Read pivotDetails.valuesColumns matching the metric's referenceField, and read generated pivotColumnName cells with getRaw or getFormatted.

Why is my Lightdash viz rendering as a blank box?▼

The root element likely uses height: 100%, which collapses to zero unless every ancestor sets a height. Give the root height: 100vh or position: fixed with inset: 0 so auto-sizing charts like recharts ResponsiveContainer have something to measure.

When should a chart mark show underlying data and drill-down actions?▼

Only when one mark maps to exactly one source row and one metric-slot field, and only when the respective enabled flag is true. Carry the untransformed sourceRow on each interactive datum and gate each action on underlyingData.enabled or drillDown.enabled independently.

Related Skills

Explore More Data & Analytics Skills→
lightdashlightdash
6.0k

developing-in-lightdash

Automate Lightdash project setup, configuration, and deployment via CLI.

Official
Intermediate
wibus-weewibus-wee
54

browser-use

Control the in-app browser via Chrome DevTools Protocol for navigation and data extraction.

Community
Advanced
screenpipescreenpipe
21.3k

render-html-report

Generate self-contained HTML reports that render as live pages in the screenpipe viewer.

Official
Basic
BLSQBLSQ

dhis2-analytics

Retrieve aggregated DHIS2 analytics data across data elements, indicators, org units, and periods.

Official
Intermediate