opt-charts

Explore time series with fixed query ranges, automatic ticks, incomplete buckets, drag zoom, annotations, thresholds, and comparison overlays.

Visualize row-by-column intensity while retaining table headings and values for screen readers.

Show stage entries, overall conversion, and drop-off between stages in a funnel.

Visualize proportions with a pie or donut chart using innerRadius. Consider a single metric for a two-part split.

Display trends and time series with filled areas and optional gradients.

Compare values across categories with a bar chart.

Visualize trends and changes over time with a line chart for continuous data.

Inspect nested trace spans on one timeline with collapsible branches, explicit failure markers, and compressed idle gaps that preserve reported durations.

Compare two or three sets with area-scaled SVG circles, interactive exclusive regions, and an accessible table; three-set placement is approximate.

Explore staged user paths with transition ribbons, session starts and exits, grid or proportional Sankey layouts, and linked hover highlighting.

Show an event label, value, change, and miniature trend chart together.

Show compact inline trends in stat cards, table cells, and other small spaces.

Display chart legends as lists, with real buttons for interactive series toggles.

Compare cohort retention using color intensity in a heatmap.

Compare breakdowns in small time-series panels with a shared y-axis, synchronized crosshairs, top-value ordering, and a collapsed long tail.

Preserve chart height and axis space while a query loads to avoid layout shifts when data arrives.

Render report data as line, bar, area, pie, scatter, gauge, funnel, sparkline, or metric widgets.

Combine a Card and AreaChart with the title and description linked to the chart's accessible name.

Pair a key metric with a Sparkline to show its value and trend together.

Read full timestamps and time zones, sorted values, totals, comparison deltas, and incomplete-bucket warnings.

Display open, high, low, and close prices in responsive candlesticks with up and down legends and keyboard focus.

Represent hierarchical proportions as concentric arcs with accessible names, values, percentages, and top-level legends.

Visualize schedules and roadmaps with responsive task bars on a time axis, group legends, titles, and keyboard focus.

Show proportional values in cells and cards with inline bars, a zero baseline, and diverging colors for negative ranges.

Compare measured KPIs against target markers and qualitative bands with visible labels and accessible row descriptions.

Summarize minimum, quartiles, median, maximum, and outliers in responsive boxes with keyboard access to the values.

Group continuous values into bins to visualize their frequency distribution.

Show hierarchical proportions as area-scaled rectangles with category colors, tooltips, titles, and keyboard focus.

Compare progress or proportions across items with concentric rings.

Compare balance across multiple dimensions with polygon radar charts.

Combine bars, lines, and areas on one axis to compare metrics in the same unit, such as actuals and targets.

Visualize three dimensions through x and y positions and bubble size using the ScatterChart renderer.

Explain changes from a starting value to a total with step bars and distinct increase, decrease, and total colors.

Show daily activity across a year in a GitHub-style calendar heatmap.

Draw responsive SVG flows between nodes with keyboard focus, link titles, and hover emphasis; skip links to unknown nodes.

Show one KPI or progress value on a 270-degree SVG dial with minimum and maximum ticks.

Compare categories using grouped, stacked, or mirrored chart layouts.

Compare two variables in a scatter plot and optionally size points with zKey.

Style Recharts tooltips with tooltip semantics and hidden decorative markers through the content prop.

Wrap Recharts ResponsiveContainer with accessible attributes and consistent chart styling.