Quickstart

import '@graphysdk/react-renderer/styles.css';

import { useMemo } from 'react';
import { createSpec, pipe, geom, scale } from '@graphysdk/viz-engine';
import { GraphProvider, GraphRenderer } from '@graphysdk/react-renderer';

// 1. Your data — a table of columns and rows.
const data = {
  columns: [
    { key: 'month', label: 'Month' },
    { key: 'revenue', label: 'Revenue' },
  ],
  rows: [
    { month: 'Jan', revenue: 12000 },
    { month: 'Feb', revenue: 15000 },
    { month: 'Mar', revenue: 18000 },
    { month: 'Apr', revenue: 17000 },
    { month: 'May', revenue: 21000 },
  ],
};

export function App() {
  // 2. The spec — map columns to aesthetics, pick a geom, declare the scales.
  const spec = useMemo(
    () =>
      pipe(
        createSpec({ x: 'month', y: 'revenue' }),
        geom.line(),
        scale.x(),
        scale.y()
      ),
    []
  );

  // 3. Render it.
  return (
    <GraphProvider input={spec} data={data}>
      <GraphRenderer />
    </GraphProvider>
  );
}

import { createSpec, pipe, geom, scale, config } from '@graphysdk/viz-engine';

const spec = pipe(
  createSpec({ x: 'month', y: 'revenue', color: 'product' }),
  geom.line({ params: { interpolate: 'catmull-rom', showFill: true } }),
  scale.x(),
  scale.y.continuous({ domainMin: 0, nice: true }),
  scale.color.palette(),
  config({
    content: {
      title: 'Monthly revenue',
      isTitleVisible: true,
      subtitle: 'By product, 2026',
      isSubtitleVisible: true,
    },
    axes: {
      y: { label: 'Revenue (£)' },
    },
    legend: { position: 'bottom' },
  })
);

<GraphProvider input={spec} data={data} theme="dark" formattingLocale="en-GB">
  <GraphRenderer sizing={{ mode: 'responsive' }} />
</GraphProvider>