Chart

Beta

Collection of chart cards for donut, pie, line, bar, and heatmap visuals.

Installation

npm install @xaui/native

Import

import { DonutChartCard, VerticalBarChartCard, PieChartCard, LineChartCard, HeatmapChartCard } from '@xaui/native/chart'

Basic Usage

Minimal example showing the component with its default configuration.

import { DonutChartCard } from '@xaui/native/chart'

export function Example() {
  return <DonutChartCard />
}

Donut Chart

Ring chart with a centre label, legend, and configurable stroke width.

import { DonutChartCard } from '@xaui/native/chart'

export function DonutExample() {
  return (
    <DonutChartCard
      title="Revenue"
      total="$12 400"
      data={[
        { label: 'Product A', value: 42, color: '#6366F1' },
        { label: 'Product B', value: 28, color: '#22D3EE' },
        { label: 'Product C', value: 18, color: '#F59E0B' },
        { label: 'Product D', value: 12, color: '#10B981' },
      ]}
      legendPosition="bottom"
    />
  )
}

Pie Chart

Filled pie chart with optional legend.

import { PieChartCard } from '@xaui/native/chart'

export function PieExample() {
  return (
    <PieChartCard
      title="Market Share"
      data={[
        { label: 'iOS', value: 57, color: '#6366F1' },
        { label: 'Android', value: 38, color: '#22D3EE' },
        { label: 'Other', value: 5, color: '#F59E0B' },
      ]}
      legendPosition="right"
      size={200}
    />
  )
}

Line Chart

Smooth or direct line chart with optional area fill and data point markers.

import { LineChartCard } from '@xaui/native/chart'

export function LineExample() {
  return (
    <LineChartCard
      title="Monthly Sales"
      lineMode="smooth"
      showPoints
      showAxes
      data={[
        { label: 'Jan', value: 30 },
        { label: 'Feb', value: 55 },
        { label: 'Mar', value: 42 },
        { label: 'Apr', value: 70 },
        { label: 'May', value: 61 },
        { label: 'Jun', value: 88 },
      ]}
    />
  )
}

Vertical Bar Chart

Bar chart with per-bar colour, axis labels, and optional full legend.

import { VerticalBarChartCard } from '@xaui/native/chart'

export function BarExample() {
  return (
    <VerticalBarChartCard
      title="Weekly Activity"
      showAxes
      data={[
        { label: 'Mon', value: 12, color: '#6366F1' },
        { label: 'Tue', value: 28, color: '#22D3EE' },
        { label: 'Wed', value: 19, color: '#F59E0B' },
        { label: 'Thu', value: 35, color: '#10B981' },
        { label: 'Fri', value: 42, color: '#EF4444' },
        { label: 'Sat', value: 8,  color: '#8B5CF6' },
        { label: 'Sun', value: 5,  color: '#EC4899' },
      ]}
    />
  )
}

Heatmap Chart

Grid heatmap interpolating between two colours based on cell intensity.

import { HeatmapChartCard } from '@xaui/native/chart'

export function HeatmapExample() {
  return (
    <HeatmapChartCard
      title="Commit Activity"
      xLabels={['Mon', 'Tue', 'Wed', 'Thu', 'Fri']}
      yLabels={['W1', 'W2', 'W3', 'W4']}
      showValues
      startColor="#3B82F6"
      endColor="#EF4444"
      data={[
        [3, 8, 2, 14, 6],
        [1, 5, 9, 3, 12],
        [7, 2, 15, 1, 4],
        [10, 6, 3, 8, 2],
      ]}
    />
  )
}