> ## 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.
# CSS hooks
Every part of a chart you might want to style (bars, lines, grid lines, axes, the legend) has a fixed classname, and useful context like the chart type and the series index is exposed as data attributes.
ARIA attributes (`role`, `aria-label`, `aria-roledescription`) remain in the DOM for accessibility, but they are not a styling API; selectors should use the hooks below.
```css theme={null}
.graphy-bar {
rx: 4;
}
.graphy-bar[data-graphy-series-index='1'] {
fill: red;
}
```
## Parts
Each part carries a classname; the data attributes present on a part are listed in the [next section](#data-attributes).
| Classname | Element | What it is |
| ------------------------- | ------------ | ------------------------------------------------------------ |
| `.graphy-chart` | `div` | Figure root (`role="figure"`) |
| `.graphy-bar` | `rect` | A bar, in bar/column/combo/waterfall/funnel/mekko charts |
| `.graphy-line` | `path` | A line |
| `.graphy-area` | `path` | The area fill under a line |
| `.graphy-pie-slice` | `path` | A pie or donut slice |
| `.graphy-point` | `circle` | A point: dots on lines, scatter and bubble marks |
| `.graphy-tile` | `rect` | A heatmap cell |
| `.graphy-grid-line` | `line` | Grid line |
| `.graphy-tick-line` | `line` | Axis tick mark |
| `.graphy-origin-line` | `line` | Zero/origin line |
| `.graphy-plot-outline` | `rect` | Plot area outline; fill it to color the area behind the data |
| `.graphy-axis` | `g` | Axis group (ticks and label) |
| `.graphy-axis-label` | `text` | Axis title |
| `.graphy-tick-label` | `text` | Axis tick label |
| `.graphy-legend` | `div` | Legend container (`role="list"`) |
| `.graphy-legend-item` | `div` | Legend item |
| `.graphy-legend-swatch` | `div` | Color swatch wrapper inside an item |
| `.graphy-legend-label` | `div` | Label text inside an item |
| `.graphy-data-label` | `div` | Value label on a bar or slice |
| `.graphy-stack-total` | `div` | Total label above a stacked bar |
| `.graphy-series-label` | `text` | Inline series name next to a line |
| `.graphy-headline` | `div` | Headline metrics row |
| `.graphy-headline-item` | `div` | One headline metric |
| `.graphy-tooltip` | `div` | Tooltip box (hover and pinned) |
| `.graphy-tooltip-heading` | `div` | Tooltip heading |
| `.graphy-tooltip-item` | `div` | Row inside a tooltip |
| `.graphy-tooltip-swatch` | `div` | Color swatch inside a tooltip row |
| `.graphy-tooltip-label` | `div`/`span` | Label text inside a tooltip |
| `.graphy-tooltip-value` | `div` | Value text inside a tooltip |
| `.graphy-tooltip-caption` | `div` | Tooltip caption |
| `.graphy-tooltip-footer` | `div`/`span` | Tooltip footer |
Tooltips render outside `.graphy-chart`, so don't nest tooltip selectors under a chart selector. Write them at
the top level, and note they apply to every chart on the page.
## Data attributes
| Attribute | On | Values |
| -------------------------- | ------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `data-graphy-chart-type` | `.graphy-chart` | `line`, `areaStacked`, `bar`, `barStacked`, `barStackedFill`, `column`, `columnStacked`, `columnStackedFill`, `combo`, `pie`, `donut`, `funnel`, `heatmap`, `scatter`, `bubble`, `waterfall`, `table`, `mekko` |
| `data-graphy-orientation` | `.graphy-chart` | `horizontal` (bar charts) or `vertical`; absent for `pie`, `donut`, `funnel`, `heatmap`, `table` |
| `data-graphy-series-index` | bars, lines, areas, slices, points, legend items | 0-based series position, see below |
| `data-graphy-axis-side` | axes, axis labels, tick labels, grid lines, tick lines | `top`, `bottom`, `left`, `right` |
| `data-graphy-hidden` | `.graphy-legend-item` | present (value `true`) only while the series is toggled off in the legend |
| `data-graphy-theme` | a wrapper element around `.graphy-chart` | `light` or `dark`; use it to scope rules to the chart's color scheme, e.g. `[data-graphy-theme='dark'] .graphy-grid-line` |
Prefer `data-graphy-orientation` over enumerating bar types when a rule only cares about direction. On grid lines, the axis side tells you the line's direction: `left`/`right` grid lines run horizontally, `top`/`bottom` ones vertically.
## Series identity
`data-graphy-series-index` is the 0-based position of the series in **data order**: the order series first appear in the data, honoring an explicit series order when one is configured. The same value is stamped on a series' shapes (bars, lines, areas, slices, points) and on its legend item, so match them **by attribute, not by visual position**:
* Combo charts move line series to the end of the legend visually; the attribute still matches the shapes.
* Hiding a series does not shift the other series' indices.
* Hover highlighting reorders line z-position without touching the attribute.
```css theme={null}
/* The first series (index 0) is the hero: a thicker line with a soft glow… */
.graphy-line[data-graphy-series-index='0'] {
stroke-width: 3.5;
filter: drop-shadow(0 2px 6px rgb(37 99 235 / 0.4));
}
/* …with its legend entry bolded to match */
.graphy-legend-item[data-graphy-series-index='0'] .graphy-legend-label {
font-weight: 700;
}
/* The second series (index 1) reads as a projection: dashed and lighter */
.graphy-line[data-graphy-series-index='1'] {
stroke-dasharray: 6 4;
stroke-linecap: round;
opacity: 0.7;
}
```
## Examples
```css theme={null}
/* Dashed grid lines, horizontal ones only */
.graphy-grid-line[data-graphy-axis-side='left'] {
stroke: #dcd7fe;
stroke-dasharray: 2 4;
stroke-linecap: round;
}
/* Fade legend items for series that are toggled off */
.graphy-legend-item[data-graphy-hidden] {
opacity: 0.4;
text-decoration: line-through;
}
/* Rounder corners on horizontal bar charts only */
.graphy-chart[data-graphy-orientation='horizontal'] .graphy-bar {
rx: 6;
}
/* Outlined bars */
.graphy-bar {
stroke: #1a1523;
stroke-width: 1.5;
}
/* Tint the plot area and hide its outline */
.graphy-plot-outline {
fill: #faf9ff;
stroke: none;
}
/* Emphasize the bottom axis labels */
.graphy-tick-label[data-graphy-axis-side='bottom'] {
font-weight: 600;
text-transform: uppercase;
}
/* Rounded, borderless tooltips (top-level rule, see the warning above) */
.graphy-tooltip {
border-radius: 12px;
border: none;
box-shadow: 0 8px 24px rgb(0 0 0 / 0.16);
}
```
## Text size
Chart text is sized in `em`, relative to a base controlled by [`appearance.textScale`](/sdk/config/appearance#text-sizes-in-pixels). Your CSS can pin exact pixel sizes per element:
```css theme={null}
.graphy-tick-label,
.graphy-legend-label,
.graphy-data-label {
font-size: 23px !important;
}
```
Use `!important` so your rule wins over the chart's own styles.
The chart reserves layout space for labels based on `textScale`. It doesn't know about sizes set in CSS. If labels
look clipped or overlap, adjust `appearance.textScale` until the layout fits your CSS sizes.
## Programmatic access
If you generate CSS or selectors in code, import the names instead of hardcoding strings. `GRAPHY_PART_CLASSNAMES` maps part keys to classnames, `GRAPHY_DATA_ATTRIBUTES` maps value keys to attribute names, and `getChartOrientation(chartType)` returns the same `'horizontal' | 'vertical' | undefined` the chart stamps as `data-graphy-orientation`. That's useful when you know a chart's type and want to branch on its orientation without touching the DOM.
```ts theme={null}
import { GRAPHY_PART_CLASSNAMES, GRAPHY_DATA_ATTRIBUTES, getChartOrientation } from '@graphysdk/core';
GRAPHY_PART_CLASSNAMES.bar; // 'graphy-bar'
GRAPHY_DATA_ATTRIBUTES.seriesIndex; // 'data-graphy-series-index'
const firstSeriesBars = `.${GRAPHY_PART_CLASSNAMES.bar}[${GRAPHY_DATA_ATTRIBUTES.seriesIndex}='0']`;
// '.graphy-bar[data-graphy-series-index='0']'
getChartOrientation('barStacked'); // 'horizontal'
getChartOrientation('column'); // 'vertical'
getChartOrientation('pie'); // undefined (orientation doesn't apply)
```