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.

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

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.

/* 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

/* 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);
}

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.

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)

Get Started

Graph types

Customisation

Configuration

Editor

Advanced

Reference

Parts

Data attributes

Series identity

Examples

Text size

Programmatic access

​Parts

​Data attributes

​Series identity

​Examples

​Text size

​Programmatic access

Parts

Data attributes

Series identity

Examples

Text size

Programmatic access