Skip to main content
Configure visual styling for your graph via the appearance field.

​
Colors

​
appearance.paletteId
string
ID of a palette from customPalettes passed to GraphProvider. This determines which colors are used for series in your graph. See Theming.
// 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>
​
appearance.seriesStyles
Record<string, SeriesStyle>
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)
​
appearance.useSingleColorForBars
boolean
default:"false"
Use the same color for all bars in single-series categorical bar/column charts.

​
Border

​
appearance.border
object
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)
​
appearance.hasRoundedCorners
boolean
default:"true"
Round the corners of the border.
See Borders for more info.

​
Background

​
appearance.backgroundModifier
'none' | 'tint'
default:"none"
Set to 'tint' to mix the background with the first palette color.

​
Text styles

​
appearance.textStyle
object
Font and color overrides for heading and body text. Each accepts fontId and color properties. See Fonts.
​
appearance.textScale
number
default:"1"
Text size multiplier (0.5-5).

​
Number formatting

​
appearance.numberFormat
object
Number display settings:
  • decimalPlaces - 'auto' or 0-10
  • abbreviation - 'none' | 'auto' | 'k' | 'm' | 'b'

​
Interactivity

​
appearance.highlightStyle
'grey' | 'fade-color'
default:"grey"
How non-highlighted items appear on hover:
  • 'grey' = grey out non-highlighted items
  • 'fade-color' = fade the color of non-highlighted items
​
appearance.showTooltips
boolean
default:"true"
Show tooltips on hover.
​
appearance.animateTransitions
boolean
default:"true"
Animate on initial render and data/config changes.