Group analytics chart library research
Status: the ECharts recommendation below is superseded. BASIC selected Recharts after the independent comparison; see the discovery doc.
Research date: 2026-09-08. Status: current recommendation, not an installed dependency or final design decision. Official project documentation, source manifests, and licenses only. No packages installed or application code changed.
Recommendation
Use Apache ECharts for the analytics workspace, inside one small VRDex-owned React client component. Its built-in range slider, touch/mouse zoom, selection, events, and chart linking fit the requested exploratory experience. Keep the existing Tailwind controls, spacing, typography, and colors around it. Do not introduce a second UI system just to obtain charts.
This is a judgment from the feature comparison below, not a performance benchmark. Recharts is the credible simpler alternative if the desired interaction is primarily clicking a day, opening details, and selecting a date range with ordinary controls. Highcharts is technically strong but not the default for an open-source, self-hostable product because its commercial licensing adds a separate distribution/procurement decision.
Comparison
| Need | Apache ECharts | Recharts, optionally borrowing shadcn presentation | Highcharts |
|---|---|---|---|
| Month to day drilldown and back | Click events and option updates support app-owned drilldown. Events | React click handlers and controlled data/domain support app-owned drilldown. LineChart | Dedicated drilldown module with drill-up behavior. Drilldown |
| Range selection, zoom, pan | Built-in inside, slider, and marquee zoom, including finger interaction. Source docs | Brush supports range selection and synchronized zoom/pan. Arbitrary drag-to-zoom behavior needs application composition. Brush | Built-in zoom behavior, including touch options. Zooming |
| Linked charts | echarts.connect links chart instances; app-owned time state remains useful for data queries. API source | syncId synchronizes charts, including brush behavior. Brush | Strong event APIs; coordination across charts still needs application wiring for this dashboard. No requirement here to purchase a separate dashboard product. |
| Hover details and styling | Configurable tooltips/events and theme options. Events | React tooltip content fits existing components. shadcn provides Recharts-based containers, tooltips, legends, CSS-variable theming, not a separate chart engine. shadcn chart | Configurable chart engine with documented React integration. Next.js |
| Missing time-series data | connectNulls setting allows disconnected lines. Line source | connectNulls defaults false. Line | connectNulls controls gap drawing. API |
| Accessibility | ARIA descriptions and decal patterns; module must be enabled. This documentation does not establish full keyboard point navigation. ARIA | accessibilityLayer adds keyboard and screen-reader support. shadcn documentation | Dedicated accessibility module, included with licenses. Accessibility |
| React 19 / Next 16 fit | Framework-independent engine. Proposed client wrapper owns initialization, updates, resize, and disposal. Exact repository compatibility needs a prototype. Imports | Current source manifest explicitly includes React 19 peer support. Exact pinned release and Next 16 behavior still need verification. Manifest | Official Next App Router guidance requires client components and shows the official React package. Exact chosen package version needs verification. Next.js |
| License | Apache-2.0. License | MIT. License | Vendor says production/commercial use requires a commercial license. Download, current EULA |
No current Highcharts dollar amount is quoted: the appropriate license scope for hosted VRDex plus third-party self-hosting has not been established. Confirm redistribution/self-hosting rights and obtain the applicable quote before selecting it. Open-sourcing VRDex does not itself establish a commercial-license exemption.
Interaction contract the library cannot supply
Clicking a day in the month view should change the selected interval and fetch the finer-grained data for that day. It must not merely stretch daily totals across a wider canvas. Back/zoom-out restores the preceding range. Keep the selected date range, grain, timezone, and filters in application state so all charts and the detail table agree.
Use a shared hover/cursor for charts whose timestamps align, a persistent selection for details, an explicit reset/back control, and an accessible date-range control. On touch, tap selects a point and shows persistent details; hover is never the only way to inspect a value. Avoid hijacking ordinary page scrolling with wheel zoom.
Represent outages with explicit missing points or split segments, leaving connectNulls false. A time-axis library cannot detect a coverage gap when the backend simply omits the timestamps. Show coverage separately, including in hover details. Membership counts, joins, leaves, occupancy, and unique observed attendees need distinct units and definitions.
For ECharts, add ordinary keyboard-operable range/drill controls and an accessible data table alongside the graph. ARIA summaries alone do not satisfy detailed inspection. Apply reduced-motion preferences and color-independent distinctions. These are required product behaviors regardless of engine.
Small validation before committing to the dependency
Build one disposable population chart with a month of daily buckets, click-to-day detail, one real-looking coverage gap, linked membership chart, and back control. Verify mouse, keyboard, screen reader, touch, dark/light appearance, resize, navigation cleanup, and representative data volume. Measure the actual lazy-loaded chart chunk. ECharts supports selective imports and either Canvas or SVG; choose from measured results rather than assuming a bundle or rendering advantage. Import guidance
The prototype should decide whether ECharts' richer built-in exploration outweighs its imperative integration and accessibility work. If it does not, use Recharts with the same application interaction contract. Do not maintain both engines for this feature.