Skip to main content

​
Color palettes

​
Using a palette

​
appearance.paletteId
string
ID of a palette from the customPalettes array registered with GraphProvider. This determines which colors are used for series in your chart.
// Register custom palettes with GraphProvider
<GraphProvider customPalettes={[myPalette]}>
  <Graph config={{ appearance: { paletteId: 'my-palette-id' } }} />
</GraphProvider>
For details on creating custom palettes, see custom color palettes.

​
Inline palette

​
appearance.palette
CustomPalette
Inline custom palette definition. Takes precedence over paletteId.
appearance: {
  palette: {
    id: 'my-palette',
    name: 'My Palette',
    colors: [
      { id: '1', hex: '#3b82f6', name: 'Blue' },
      { id: '2', hex: '#ef4444', name: 'Red' },
      { id: '3', hex: '#10b981', name: 'Green' }
    ]
  }
}
See theming for more details on color palettes.

​
Series styles

Customize individual data series with specific colors, fill styles and line styles.
​
appearance.seriesStyles
Record<string, SeriesStyle>
Map of series keys to style configurations.

​
Series style properties

​
seriesStyles[key].paletteColorId
string
Color ID from the active palette to use for this series. If not set, the series uses the nth color in the palette.
​
seriesStyles[key].customColor
string
Custom hex color for the series. Takes precedence over paletteColorId.
​
seriesStyles[key].fillStyle
'solid' | 'hatched'
default:"solid"
Fill style for area and bar charts. Use 'hatched' for a diagonal line pattern.
​
seriesStyles[key].lineStyle
'solid' | 'dashed' | 'dotted'
default:"solid"
Line style for line charts.
appearance: {
  seriesStyles: {
    'revenue': {
      customColor: '#3b82f6',
      lineStyle: 'solid'
    },
    'forecast': {
      customColor: '#94a3b8',
      lineStyle: 'dashed'
    }
  }
}

​
Single color mode

​
appearance.useSingleColorForBars
boolean
default:"false"
When true, all bars in a categorical bar/column graph will use the same color (from the first series style or palette color). Only applies to categorical bar/column graphs with a single series.
const config: GraphConfig = {
  type: 'column',
  appearance: {
    useSingleColorForBars: true  // All bars use the same color
  }
};

​
Borders

​
appearance.border
object
Configure the border around the chart.
​
border.style
'none' | 'custom' | 'tinted' | 'gradient' | 'preset' | 'grey'
default:"none"
Border style:
  • 'none' - No border
  • 'custom' - Apply the custom hex color from color as-is
  • 'tinted' - Tint the color based on the color scheme (darkens in dark mode, lightens in light mode)
  • 'gradient' - Generate a gradient starting from color, adjusted based on the color scheme
  • 'preset' - Use a predefined border style (see borders for preset names)
  • 'grey' - Legacy grey border style
​
border.color
string
Border color. If style is 'preset', this is the name of the preset. Ignored if style is 'none'.
​
border.width
number
default:"0"
Border stroke width in pixels (0-64). Set to 0 for no border.
appearance: {
  border: {
    style: 'gradient',
    color: '#6366f1',
    width: 12
  }
}
See borders for detailed border customization options.

​
Rounded corners

​
appearance.hasRoundedCorners
boolean
default:"true"
Whether to round the corners of the border. Ignored if border width is 0.

​
Background

​
appearance.backgroundModifier
'none' | 'tint'
default:"none"
Graph background modifier. The background color is set on your theme (see GraphTheme).If backgroundModifier is 'tint', the background will be tinted by mixing graphBackground with the first color in the palette.
appearance: {
  backgroundModifier: 'tint'  // Tint background with palette color
}

​
Text styles

​
appearance.textStyle
object
Customize text appearance for headings and body text.
​
textStyle.heading
object
Text style for titles and headings.
​
textStyle.body
object
Text style for body text, labels, legends and annotations.
appearance: {
  textStyle: {
    heading: {
      fontId: 'custom-serif',
      color: '#1a1a1a'
    },
    body: {
      fontId: 'custom-sans',
      color: '#4a5568'
    }
  }
}
See fonts for setting up custom fonts.

​
Text scale

​
appearance.textScale
number
default:"1"
Text scale multiplier (0.5-5). Increase to make all text larger, decrease to make it smaller. 1 is the default size.
appearance: {
  textScale: 1.2  // 20% larger text
}

​
Number formatting

​
appearance.numberFormat
object
Configure how numbers are formatted in charts and tooltips.
​
numberFormat.decimalPlaces
'auto' | number
default:"auto"
Number of decimal places to show (0-10). Use 'auto' to automatically determine optimal precision.
​
numberFormat.abbreviation
'none' | 'auto' | 'k' | 'm' | 'b'
default:"auto"
How to abbreviate large numbers:
  • 'none' - Show the full number
  • 'auto' - Automatically choose the appropriate abbreviation
  • 'k' - Thousands (1,000 → 1k)
  • 'm' - Millions (1,000,000 → 1m)
  • 'b' - Billions (1,000,000,000 → 1b)
appearance: {
  numberFormat: {
    decimalPlaces: 2,
    abbreviation: 'auto'
  }
}

​
Highlight style

​
appearance.highlightStyle
'grey' | 'fade-color'
default:"grey"
How non-selected items appear when hovering over or highlighting data:
  • 'grey' - Grey out non-selected items
  • 'fade-color' - Fade the color of non-selected items
appearance: {
  highlightStyle: 'fade-color'
}

​
Tooltips

​
appearance.showTooltips
boolean
default:"true"
Whether to show tooltips on hover. When false, tooltips are completely disabled.
appearance: {
  showTooltips: false  // Disable all tooltips
}

​
Animations

​
appearance.animateTransitions
boolean
default:"true"
Whether to animate the graph on initial render and when data or config changes. Set to false to disable all animations.
appearance: {
  animateTransitions: false  // No animations
}

​
Logo visibility

​
appearance.isLogoHidden
boolean
default:"false"
Whether to hide the Graphy logo. Defaults to false.
appearance: {
  isLogoHidden: true  // Hide logo
}