> ## 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.

# Appearance

Configure visual styling for your graph via the `appearance` field.

## Colors

<ParamField path="appearance.paletteId" type="string" optional>
  ID of a palette from `customPalettes` passed to `GraphProvider`. This determines which colors are used for series in
  your graph. See [Custom palettes](/sdk/customisation/series-colors#custom-palettes).
</ParamField>

```tsx theme={null}
// Register custom palettes with GraphProvider
const myPalette = {
  id: 'my-palette-id',
  name: 'My Palette',
  colors: [
    { id: '1', hex: '#3b82f6', name: 'Blue' },
    { id: '2', hex: '#ef4444', name: 'Red' },
    { id: '3', hex: '#10b981', name: 'Green' },
  ],
};
<GraphProvider customPalettes={[myPalette]}>
  <Graph config={{ appearance: { paletteId: 'my-palette-id' } }} />
</GraphProvider>;
```

<ParamField path="appearance.seriesStyles" type="Record<string, SeriesStyle>" optional>
  Style overrides for individual series. Each series is identified by a key that starts with `series` and is followed by a number (e.g. `series1`, `series2` etc).

  For a waterfall chart, the keys are `waterfallStart`, `waterfallPositive`, `waterfallNegative` and `waterfallTotal`.

  Each `SeriesStyle` can have:

  * `paletteColorId` - Color ID from the active palette
  * `customColor` - Hex color (takes precedence over `paletteColorId`)
  * `fillStyle` - `'solid'` | `'hatched'` (for bars/areas)
  * `lineStyle` - `'solid'` | `'dashed'` | `'dotted'` (for lines)
</ParamField>

<ParamField path="appearance.useSingleColorForBars" type="boolean" default="false" optional>
  Use the same color for all bars in single-series categorical bar/column charts.
</ParamField>

## Border

<ParamField path="appearance.border" type="object" optional>
  Border configuration. No border by default. - `style` - `'none'` | `'custom'` | `'tinted'` | `'gradient'` | `'preset'`
  \| `'gray'` (default: `'none'`) - `color` - Hex color or preset name (when `style` is `'preset'`) - `width` - Stroke
  width in pixels, 0-64 (default: `0`)
</ParamField>

<ParamField path="appearance.hasRoundedCorners" type="boolean" default="true" optional>
  Round the corners of the border.
</ParamField>

See [Borders](/sdk/theming/borders) for more info.

## Background

<ParamField path="appearance.backgroundModifier" type="'none' | 'tint'" default="none" optional>
  Set to `'tint'` to mix the background with the first palette color.
</ParamField>

## Text styles

<ParamField path="appearance.textStyle" type="object" optional>
  Font and color overrides for `heading` and `body` text. Each accepts `fontId` and `color` properties. See
  [Fonts](/sdk/customisation/graph-fonts).
</ParamField>

<ParamField path="appearance.textScale" type="number" default="1" optional>
  Text size multiplier (0.5-5). See [text sizes in pixels](#text-sizes-in-pixels) below for the sizes it produces.
</ParamField>

### Text sizes in pixels

Every text element in a chart derives its rendered size from `textScale`:

```
rendered size = base size × textScale × responsive multiplier
```

Base sizes (at `textScale: 1`):

| Element | Base size |
| - | - |
| Axis tick labels and axis titles | 12px |
| Legend labels and series labels | 12px |
| Data labels, stack totals, pie labels, goal line labels | 11px |
| Tooltip labels and values | 14px |
| Tooltip heading, footer and caption | 12px |
| Headline number values | 19px (small), 23px (medium), 26px (large) |
| Headline number labels | 10px (small and medium), 12px (large) |
| Chart title | 18px |
| Chart subtitle | 15px |

The responsive multiplier shrinks text on narrow charts: `0.9` when the chart is 600px wide or narrower, `0.8` at 400px or narrower and `1` otherwise.

`textScale` scales all elements together. To pin an exact pixel size on individual elements, use [CSS hooks](/sdk/customisation/css-hooks#text-size).

## Number formatting

<ParamField path="appearance.numberFormat" type="object" optional>
  Number display settings: - `decimalPlaces` - `'auto'` or 0-10 - `abbreviation` - `'none'` | `'auto'` | `'k'` | `'m'` |
  `'b'`
</ParamField>

## Interactivity

<ParamField path="appearance.highlightStyle" type="'gray' | 'fade-color'" default="gray" optional>
  How non-highlighted items appear on hover: - `'gray'` = grey out non-highlighted items - `'fade-color'` = fade the
  color of non-highlighted items
</ParamField>

<ParamField path="appearance.showTooltips" type="boolean" default="true" optional>
  Show tooltips on hover.
</ParamField>

<ParamField path="appearance.animateTransitions" type="boolean" default="true" optional>
  Animate on initial render and data/config changes.
</ParamField>


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