> ## Documentation Index
> Fetch the complete documentation index at: https://docs.graphy.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Overview

Import `<GraphProvider>` and `<GraphRenderer>` from **`@graphysdk/react`**. They take the [scene](/sdk-next/concepts/how-a-chart-is-built#compile-then-render) and turn it into an interactive SVG chart — layout, formatting, interactivity, animation, and the chrome theme. The engine owns everything else.

## What the renderer owns

* **Layout** — measuring text and packing the header, legend, axes and plot into pixel rectangles.
* **Formatting** — turning raw values into locale-aware numbers, dates and currencies.
* **Chrome theme** — the CSS custom properties behind the HTML around the plot: legend, tooltip, headline, footer.
* **Interactivity** — pointer plumbing, hover overlays and tooltips.
* **Animation** — transitioning between compiled states.

The [engine](/sdk-next/concepts/how-a-chart-is-built) owns the rest — mappings, scales, statistics, positions, hit-testing and the style cascade.

Paint is decided by the spec: mark colors, grid lines, tick marks, the panel border, the graph background and the type on axis, tick and data labels all resolve from the [stylesheet](/sdk-next/config/styling) piped onto it.

## The two components

Rendering is always a `<GraphProvider>` (holds the data and spec, compiles them) wrapping a `<GraphRenderer>` (paints the result):

```tsx theme={null}
import { GraphProvider, GraphRenderer } from '@graphysdk/react';

<GraphProvider spec={spec} data={data} colorScheme="light">
  <GraphRenderer sizing={{ mode: 'responsive' }} />
</GraphProvider>;
```

The split exists so the scene has a single owner: commands and updates operate on the provider's spec, and any renderer beneath it reflects them. [Provider & renderer](/sdk-next/rendering/provider-and-renderer) covers both in full.

## In this section

<CardGroup cols={2}>
  <Card title="Provider & renderer" icon="layer-group" href="/sdk-next/rendering/provider-and-renderer">
    The two components and their props.
  </Card>

  <Card title="Sizing" icon="up-right-and-down-left-from-center" href="/sdk-next/rendering/sizing">
    Responsive, fixed and aspect-ratio modes.
  </Card>

  <Card title="Theming" icon="palette" href="/sdk-next/rendering/theming">
    Color scheme and the chrome tokens around the plot.
  </Card>

  <Card title="Formatting & locale" icon="language" href="/sdk-next/rendering/formatting">
    Locale-aware numbers, dates and currencies, UI strings and text direction.
  </Card>

  <Card title="Interactivity" icon="arrow-pointer" href="/sdk-next/rendering/interactivity">
    Hover, tooltips and animation.
  </Card>

  <Card title="Styling" icon="paintbrush" href="/sdk-next/config/styling">
    The stylesheet on the spec — every mark and chrome element the chart draws.
  </Card>
</CardGroup>

To replace *how* a region renders — a custom header, legend, or tooltip — see [Slots](/sdk-next/extending/slots) under Extending.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.