Charts & Data Visualization

The DataVisualization component provides chart rendering for dashboards and analytics views.

DataVisualization Component

import { DataVisualization } from '@gtcx/ui';
 
<DataVisualization
  type="bar"
  data={[
    { label: 'Q1', value: 120 },
    { label: 'Q2', value: 340 },
    { label: 'Q3', value: 220 },
    { label: 'Q4', value: 480 },
  ]}
  height={300}
/>

Chart Types

Type	Description	Use Case
`bar`	Vertical bar chart	Comparing categories
`line`	Line chart with points	Trends over time
`area`	Filled area chart	Volume over time
`pie`	Pie/donut chart	Part-of-whole

Props

Prop	Type	Default	Description
`type`	`'bar' \| 'line' \| 'area' \| 'pie'`	`'bar'`	Chart type
`data`	`Array<{ label: string; value: number }>`	—	Data points
`height`	`number`	`300`	Chart height in pixels
`colors`	`string[]`	Theme colors	Custom color palette
`showLegend`	`boolean`	`true`	Show legend
`showGrid`	`boolean`	`true`	Show grid lines

Dashboard Integration

Use with DashboardTemplate for KPI displays:

import { DashboardTemplate, KpiCard } from '@gtcx/templates';
import { DataVisualization } from '@gtcx/ui';
 
<DashboardTemplate
  kpis={[
    <KpiCard title="Revenue" value="$1.2M" trend={12} />,
    <KpiCard title="Users" value="8,432" trend={-3} />,
  ]}
>
  <DataVisualization
    type="line"
    data={monthlyRevenue}
    height={400}
  />
</DashboardTemplate>

Theming

Charts inherit colors from the active theme. Override with the colors prop or by customizing the colorPrimary token in GtcxConfigProvider.

Accessibility

Color combinations meet WCAG AA contrast ratios
Data tables available as alternative to visual charts
Tooltips provide exact values on hover/focus

Dark Sidebar Calendar