> ## 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'`
  \| `'grey'` (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).
</ParamField>

## 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="'grey' | 'fade-color'" default="grey" optional>
  How non-highlighted items appear on hover: - `'grey'` = 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>