Colors & Theming

Color options for widgets and chart utilities

Palette utilities

import {
  palettes,
  chartColors,
  getPaletteColor,
  getColorScale,
  resolveColor,
} from '@realanalytics/sdk'

// palettes: default, vibrant, corporate, warm, cool, earth, accessible
const first = getPaletteColor(palettes.default, 0)
const scale = getColorScale('vibrant', 5)
const semantic = resolveColor(chartColors.positive, false)

Time series color

widget.timeSeries({
  id: 'traffic',
  title: 'Traffic',
  event: '$pageview',
  metric: 'count',
  color: { light: '#3b82f6', dark: '#60a5fa' },
})

Bar/pie categorical colors

widget.barChart({
  id: 'channels',
  title: 'Channels',
  event: '$pageview',
  breakdownBy: '$utm_source',
  colorScale: getColorScale('accessible', 6),
})

widget.pieChart({
  id: 'countries',
  title: 'Countries',
  event: '$pageview',
  breakdownBy: '$geo_country',
  variant: 'donut',
  colorScale: palettes.cool,
})

Breakdown and funnel colors

widget.breakdown({
  id: 'top_pages',
  title: 'Top Pages',
  event: '$pageview',
  defaultBreakdown: '$pathname',
  metric: 'count',
  barColor: chartColors.info,
})

widget.funnel({
  id: 'signup_funnel',
  title: 'Signup Funnel',
  steps: [
    { event: '$pageview', label: 'Visited', color: '#3b82f6' },
    { event: 'signup_completed', label: 'Signed Up', color: '#10b981' },
  ],
  rateThresholds: { good: 40, warning: 20 },
})

Notes

  • Color fields accept plain hex strings or { light, dark } objects
  • Use colorScale for categorical widgets with many series/slices
  • Use semantic helpers (chartColors) for positive/negative KPI cues

Next Steps