elastic-charts

@elastic/charts is the charting library that powers data visualization across Kibana and the wider Elastic Stack. It renders XY charts (line, bar, area, bubble), partition charts (sunburst, treemap, icicle), heatmaps, metric tiles, goal/gauge charts, bullet graphs, wordclouds, and flame/timeslip charts through a single declarative React API built from composable spec components.

Internally, chart configuration declared as JSX specs is parsed into a Redux Toolkit-managed state slice per chart instance, then rendered to canvas through a dedicated geometry and renderer pipeline. This gives the library fine-grained control over tooltips, brushing, legends, pointer events, small multiples, and accessibility, along with a consistent theming system — making it equally suited to simple dashboards and Kibana-grade production visualizations.

What You Get

• A single <Chart> component with composable <Settings> and per-series spec components (<LineSeries>, <BarSeries>, <AreaSeries>, <Partition>, <Heatmap>, <Metric>, <Goal>, <BulletGraph>, <Wordcloud>) covering most common chart types
• Canvas-based rendering with a dedicated geometry (geoms/) and renderer (renderers/canvas) pipeline built for large datasets and smooth interaction
• Built-in interaction primitives: tooltips, legends, brushing/zooming, pointer/cursor synchronization across multiple charts, and small-multiples layouts
• Accessibility support (keyboard navigation, screen-reader debug state) and a theming system for consistent look-and-feel across an application
• A hosted Storybook of live, editable examples covering nearly every chart type and configuration option

Common Use Cases

• Embedding time-series and metric dashboards inside a React application (the same use case Kibana itself relies on)
• Rendering hierarchical/part-to-whole data with sunburst, treemap, or icicle partition charts
• Building correlation and density views with heatmaps
• Displaying single KPI/metric tiles or gauge-style goal and bullet-graph charts in an operations dashboard
• Profiling and flame-graph style visualizations for performance or resource-usage data (via the flame_chart and timeslip chart types)

Under The Hood

Architecture Each <Chart> instance owns its own Redux Toolkit store (configureStore/createSlice in state/chart_state.ts), created and torn down per mount so multiple charts on a page never share state. Spec components (specs/specs_parser.tsx) parse their JSX props into plain spec objects that get upserted into that store via actions (upsertSpec, specParsed), and a chart-type selector (chart_types/chart_type_selectors.ts, state/chart_type_from_specs.ts) determines which chart-type module (xy_chart, partition_chart, heatmap, metric, goal_chart, bullet_graph, wordcloud, flame_chart, timeslip) owns the computed geometry for that instance. Rendering itself goes through a geometry layer (geoms/) and a canvas renderer (renderers/canvas), decoupling declarative configuration from the actual pixel-level draw calls — changing how a chart type computes its shapes never touches how specs are declared, and vice versa.

Tech Stack A TypeScript React library built on Redux Toolkit and react-redux for internal state, d3-scale/d3-shape/d3-array/d3-interpolate/d3-cloud for scales, geometry math, and layout (wordcloud, partition), chroma-js for color manipulation, luxon for date/time handling, and re-reselect for memoized derived state. It ships compiled JS plus type declarations and separately built CSS (via Sass), and is built/tested through a Lerna-managed monorepo (this package lives at packages/charts alongside an internal ESLint plugin) with Buildkite as CI and semantic-release for publishing.

Code Quality The package has an extensive test suite (118+ .test.ts/.test.tsx files) covering specs parsing, chart-type selectors, utilities, and component snapshots, run via Jest with dedicated timezone-specific configs (jest.tz.config.js) to catch date-handling bugs across locales. TypeScript is used throughout with strict-leaning tsconfig variants (tsconfig.src.json, tsconfig.check.json, noUnusedLocals), ESLint enforces style and correctness rules, and a Microsoft API Extractor step (api:check/api:extract) guards the public API surface against unintentional breaking changes.

What Makes It Unique Unlike most React chart wrappers around a single rendering library, elastic-charts implements its own geometry and canvas-rendering pipeline end-to-end, giving it comprehensive control over performance and interaction behavior (synchronized pointer events and brushing across multiple charts, small multiples, per-chart isolated Redux state) that is difficult to retrofit onto off-the-shelf charting libraries. It also covers an unusually broad span of chart families — from conventional XY and partition charts to flame graphs, wordclouds, and bullet graphs — behind one consistent spec API, reflecting its origin as the shared visualization layer for Elastic’s own production UI (Kibana).