AnalyticsChart

Recharts-backed analytics surface with responsive line and bar modes, semantic data fallback, accessible plotting, tooltips, and reduced-motion control.

InterfaceSource ready9 props documentedLive preview
Add with shadcnnpx shadcn@latest add https://www.uigrids.com/r/analytics-chart.json
Interactive preview
Interface

Analytics

Weekly signups

New accounts created across the last seven days.

72

125.0%

5 data points

MonTueWedThuFri020406080
Weekly signups data
LabelValue
Mon32
Tue48
Wed41
Thu64
Fri72

Install with the CLI

# adds AnalyticsChart to components/ui with the shadcn CLI
npx shadcn@latest add https://www.uigrids.com/r/analytics-chart.json

Or install the package

// npm install @uigrids/react-ui
import { AnalyticsChart } from '@uigrids/react-ui'

export default function App() {
  return <AnalyticsChart />
}

Props

PropTypeDefaultDescription
titlestring'Weekly signups'Configures the title option.
descriptionstring'New accounts created across the last s...Configures the description option.
dataunknownDEFAULT_DATAConfigures the data option.
xKeystring'label'Configures the x key option.
valueKeystring'value'Configures the value key option.
defaultTypestring'line'Configures the default type option.
valueFormatterfunction(value) => compactNumber.format(value)Configures the value formatter option.
onTypeChangeunknown-Configures the on type change option.
classNamestring''Additional CSS classes for the outer element.