Chart

A composable chart container with tooltip and legend primitives for building data visualizations.

The Chart component provides a context-driven container for building custom charts in React Native. It includes a ChartContainer that distributes config via context, along with ChartTooltip, ChartLegend, and their content sub-components for consistent styling.

Preview

Jan

Feb

Mar

Apr

May

Jun

Revenue

Installation

npx novaui-cli add chart

Import

import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  ChartLegend,
  ChartLegendContent,
  useChart,
} from 'novaui-components'

Basic Usage

The Chart is a compound component with these parts:

ChartContainer — Root wrapper that provides ChartConfig context and applies flex-1 justify-center
ChartTooltip — Styled tooltip overlay with border border-border bg-background shadow-sm px-3 py-2 rounded-lg
ChartTooltipContent — Inner tooltip layout with flex-col gap-1
ChartLegend — Legend row with flex-row items-center justify-center gap-4 mt-4
ChartLegendContent — Individual legend item with flex-row items-center gap-2
useChart — Hook to access the current ChartConfig from context

Jan

Feb

Mar

Apr

May

Jun

Revenue

import { View, Text } from 'react-native'
import {
  ChartContainer,
  ChartLegend,
  ChartLegendContent,
} from 'novaui-components'

const config = {
  revenue: {
    label: 'Revenue',
    color: '#3b82f6',
  },
}

const data = [
  { month: 'Jan', value: 60 },
  { month: 'Feb', value: 80 },
  { month: 'Mar', value: 45 },
  { month: 'Apr', value: 90 },
  { month: 'May', value: 55 },
  { month: 'Jun', value: 70 },
]

export function BasicChart() {
  return (
    <ChartContainer config={config}>
      <View className="flex-row items-end justify-between gap-2 h-48 px-4">
        {data.map((item) => (
          <View key={item.month} className="flex-col items-center gap-1 flex-1">
            <View
              className="w-full rounded-t-md"
              style={{
                height: `${item.value}%`,
                backgroundColor: config.revenue.color,
              }}
            />
            <Text className="text-xs text-muted-foreground">{item.month}</Text>
          </View>
        ))}
      </View>
      <ChartLegend>
        <ChartLegendContent>
          <View
            className="h-3 w-3 rounded-sm"
            style={{ backgroundColor: config.revenue.color }}
          />
          <Text className="text-sm text-muted-foreground">Revenue</Text>
        </ChartLegendContent>
      </ChartLegend>
    </ChartContainer>
  )
}

Display contextual data using the tooltip primitives:

April

Revenue: $9,000

Example tooltip rendered statically

import { View, Text } from 'react-native'
import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from 'novaui-components'

export function ChartWithTooltip() {
  return (
    <ChartContainer config={config}>
      {/* ... chart bars ... */}
      <ChartTooltip>
        <ChartTooltipContent>
          <Text className="text-sm font-medium text-foreground">April</Text>
          <View className="flex-row items-center gap-2">
            <View
              className="h-3 w-3 rounded-sm"
              style={{ backgroundColor: config.revenue.color }}
            />
            <Text className="text-sm text-muted-foreground">
              Revenue: $9,000
            </Text>
          </View>
        </ChartTooltipContent>
      </ChartTooltip>
    </ChartContainer>
  )
}

Multi-Series Chart

Show multiple data series with separate colors in the legend:

Revenue

Expenses

import { View, Text } from 'react-native'
import {
  ChartContainer,
  ChartLegend,
  ChartLegendContent,
} from 'novaui-components'

const config = {
  revenue: { label: 'Revenue', color: '#3b82f6' },
  expenses: { label: 'Expenses', color: '#f97316' },
}

export function MultiSeriesChart() {
  return (
    <ChartContainer config={config}>
      <View className="flex-row items-end justify-between gap-3 h-48 px-4">
        {/* Render grouped bars per quarter */}
      </View>
      <ChartLegend>
        <ChartLegendContent>
          <View className="h-3 w-3 rounded-sm" style={{ backgroundColor: '#3b82f6' }} />
          <Text className="text-sm text-muted-foreground">Revenue</Text>
        </ChartLegendContent>
        <ChartLegendContent>
          <View className="h-3 w-3 rounded-sm" style={{ backgroundColor: '#f97316' }} />
          <Text className="text-sm text-muted-foreground">Expenses</Text>
        </ChartLegendContent>
      </ChartLegend>
    </ChartContainer>
  )
}

Props API