Cartesian
Compare categories, trends, and combinations using rows and series.
Package Docs · data visualization
The data visualization package owns Recharts integration, chart data types, SVG analytics, and chart-specific shells. Existing opt-ui chart exports remain available for compatibility; new code imports directly from opt-charts.
Start time-series and category comparisons with ChartDataPoint and ChartSeriesDef. Use dedicated types for funnels, gauges, and heatmaps.
Use LineChart, BarChart, and PieChart for visualization. Use MetricsCard, TrendChart, and ReportWidget to compose product cards and widgets.
Review height, aria-label, formatting, empty states, animation, and lazy loading to prevent dashboard regressions.
Recharts-based charts, SVG visualizations, chart-specific shells, visualization metadata, and examples.
Build analytics views for revenue trends, channel comparisons, and cohort retention. Use lines for change over time, bars for category comparisons, and heatmaps for row-by-column distributions.
Choose the question and data shape before choosing a chart. Pair charts with opt-datagrid for editable rows, and use opt-ui or opt-shell to arrange multiple metrics on a screen.
Compare multiple series and narrow the Brush range to explore a longer time series.
Actuals and targetsCompare stacked and grouped bars, target lines, and range annotations.
Register 35 chart types in opt-deck, edit matrix, graph, and cumulative-change data, and inspect the export contract.
Install the package, build your first chart, understand import boundaries, and migrate from opt-ui compatibility exports.
Learn the roles of visuals and shells, ChartContainer, Recharts accessibility, and token-based colors.
Explore ChartDataPoint, ChartSeriesDef, specialized chart types, formatters, empty states, and color assignment.
Check responsive sizing, server and client boundaries, performance, accessibility, and release smoke tests before deployment.
ChartContainer wraps ResponsiveContainer with role="img" by default, or role="group" in interactive mode to preserve controls.
Cartesian charts enable the Recharts accessibilityLayer. Use showGrid, showTooltip, showLegend, and showAxis to control visual density.
ReportWidget is a lightweight builder shell with dynamic imports by chart type and loading and empty labels.
seriesColor uses 16 categorical theme colors and assigns neutral colors to further series. Explicit colors take precedence; magnitude and polarity use separate color domains.
Compare categories, trends, and combinations using rows and series.
Show relationships, distributions, and outliers using coordinates and numeric samples.
Compare proportions, multiple axes, hierarchies, and set intersections.
Visualize matrices, cohorts, and daily intensity with dedicated data models.
Explore stage conversions, cumulative changes, and node-and-link flows.
Explore time series, repeated panels, schedules, trace intervals, and OHLC data.
Show values against ranges and targets with compact trends.
Compose metric cards and report widgets.
Compose chart frames, tooltips, legends, and loading states as supporting components, rather than standalone slide types.
The root export includes visuals and shells. Use subpath exports when you need more explicit bundle boundaries.
import { LineChart, ChartContainer } from "@reopt-ai/opt-charts";
import type { ChartDataPoint, ChartSeriesDef } from "@reopt-ai/opt-charts";import { LineChart } from "@reopt-ai/opt-charts/visuals";
import { ReportWidget } from "@reopt-ai/opt-charts/shells";opt-ui owns Core, Shells, and Surfaces; opt-charts owns charts. Legacy opt-ui chart exports preserve compatibility for existing consumers. Use opt-charts as the source of truth for new documentation, code, and release validation.