Chart

Chart renders line, bar, area, and pie charts with TanStack Charts, themed with the helical-ui --chart-N tokens. The chart definition is framework-agnostic, so the same definition renders in both React and Svelte. Pass svg for the static/server path (rendered at build time via renderChartSvgString, no client adapter mounted).

// apps/docs/src/components/examples/chart/pie/react.tsx
import { Chart } from '@cloudvoyant/helical-react';

const data = [
  { name: 'React', value: 40 },
  { name: 'Svelte', value: 30 },
  { name: 'Vue', value: 30 },
];

export default function ReactChartPie() {
  return <Chart type="pie" data={data} series={[{ key: 'value' }]} nameKey="name" />;
}

<!-- apps/docs/src/components/examples/chart/pie/svelte.svelte -->
<script lang="ts">
  import { Chart } from '@cloudvoyant/helical-svelte';

  const data = [
    { name: 'React', value: 40 },
    { name: 'Svelte', value: 30 },
    { name: 'Vue', value: 30 },
  ];
</script>

<Chart type="pie" {data} series={[{ key: 'value' }]} nameKey="name" />

Prerendered (SSR)

Render the chart to an SVG string on the server and pass it through svg — the chart paints immediately with no client JavaScript:

import { renderChartSvgString } from '@cloudvoyant/helical-ui';

const svg = renderChartSvgString(
  { type: 'pie', data, series: [{ key: 'value' }], nameKey: 'name' },
  { width: 640, height: 360 },
);

<Chart type="pie" data={data} series={[{ key: 'value' }]} nameKey="name" svg={svg} />;

Examples

Bar

// apps/docs/src/components/examples/chart/bar/react.tsx
import { Chart } from '@cloudvoyant/helical-react';

const data = [
  { name: 'Jan', revenue: 42, costs: 20 },
  { name: 'Feb', revenue: 58, costs: 32 },
  { name: 'Mar', revenue: 76, costs: 40 },
  { name: 'Apr', revenue: 64, costs: 28 },
];

export default function ReactChartBar() {
  return (
    <Chart
      type="bar"
      data={data}
      series={[
        { key: 'revenue', label: 'Revenue' },
        { key: 'costs', label: 'Costs' },
      ]}
      xKey="name"
    />
  );
}

<!-- apps/docs/src/components/examples/chart/bar/svelte.svelte -->
<script lang="ts">
  import { Chart } from '@cloudvoyant/helical-svelte';

  const data = [
    { name: 'Jan', revenue: 42, costs: 20 },
    { name: 'Feb', revenue: 58, costs: 32 },
    { name: 'Mar', revenue: 76, costs: 40 },
    { name: 'Apr', revenue: 64, costs: 28 },
  ];
</script>

<Chart
  type="bar"
  {data}
  series={[
    { key: 'revenue', label: 'Revenue' },
    { key: 'costs', label: 'Costs' },
  ]}
  xKey="name"
/>

Line

// apps/docs/src/components/examples/chart/line/react.tsx
import { Chart } from '@cloudvoyant/helical-react';

const data = [
  { name: 'Jan', sales: 400, costs: 240 },
  { name: 'Feb', sales: 300, costs: 139 },
  { name: 'Mar', sales: 500, costs: 280 },
];

export default function ReactChartLine() {
  return (
    <Chart
      type="line"
      data={data}
      series={[
        { key: 'sales', label: 'Sales' },
        { key: 'costs', label: 'Costs' },
      ]}
      xKey="name"
    />
  );
}

<!-- apps/docs/src/components/examples/chart/line/svelte.svelte -->
<script lang="ts">
  import { Chart } from '@cloudvoyant/helical-svelte';

  const data = [
    { name: 'Jan', sales: 400, costs: 240 },
    { name: 'Feb', sales: 300, costs: 139 },
    { name: 'Mar', sales: 500, costs: 280 },
  ];
</script>

<Chart
  type="line"
  {data}
  series={[
    { key: 'sales', label: 'Sales' },
    { key: 'costs', label: 'Costs' },
  ]}
  xKey="name"
/>

Prerendered

// apps/docs/src/components/examples/chart/prerendered/react.tsx
import { Chart } from '@cloudvoyant/helical-react';
import { renderChartSvgString } from '@cloudvoyant/helical-ui';

const data = [
  { name: 'React', value: 40 },
  { name: 'Svelte', value: 30 },
  { name: 'Vue', value: 30 },
];

const svg = renderChartSvgString(
  { type: 'pie', data, series: [{ key: 'value' }], nameKey: 'name' },
  { width: 640, height: 360, ariaLabel: 'Prerendered pie chart' },
);

export default function ReactChartPrerendered() {
  return <Chart type="pie" data={data} series={[{ key: 'value' }]} nameKey="name" svg={svg} />;
}

<!-- apps/docs/src/components/examples/chart/prerendered/svelte.svelte -->
<script lang="ts">
  import { Chart } from '@cloudvoyant/helical-svelte';
  import { renderChartSvgString } from '@cloudvoyant/helical-ui';

  const data = [
    { name: 'React', value: 40 },
    { name: 'Svelte', value: 30 },
    { name: 'Vue', value: 30 },
  ];

  const svg = renderChartSvgString({ type: 'pie', data, series: [{ key: 'value' }], nameKey: 'name' }, { width: 640, height: 360, ariaLabel: 'Prerendered pie chart' });
</script>

<Chart type="pie" {data} series={[{ key: 'value' }]} nameKey="name" {svg} />

API Reference

Prop	Type	Description
`type`	`'line' \| 'bar' \| 'area' \| 'pie'`	Chart type. Required.
`data`	`Record<string, string \| number>[]`	Rows. Required.
`series`	`{ key, label?, color? }[]`	Series definitions. Required.
`xKey` / `nameKey`	`string`	Axis/category key.
`svg`	`string`	Pre-rendered SVG (server path).
`height`, `showLegend`, `showGrid`, `showAxis`	—	Display options.