Styles | Rare Digits Art

RareCharts uses a two-layer styling system. Structure and layout live in CSS. Colors, fonts, and visual tokens live in a JavaScript theme object. They work independently, which means you can swap a theme without touching CSS, and you can override layout without touching the theme.

Layer 1: CSS structure

rare-charts.js automatically injects a small stylesheet into <head> when the library loads. It handles:

The .rc-chart flex container (title → legend → SVG → source, in that order)
Legend layout (horizontal row, or vertical aside when legendPosition: 'right')
Tooltip positioning and fade transition
SVG axis label styles, end labels, markers

Colors are not in CSS. This is intentional. Every color — grid lines, axis text, tooltips, series fills — is set inline by the chart from the active theme. That makes theming predictable: change the theme object, everything follows. No hunting for overridden CSS variables.

RareCharts ships with its own typography defaults. The base stylesheet defines:

--rc-font-family: "Fira Sans", sans-serif
--rc-font-family-numeric: "Cousine", monospace
--rc-font-size: 16px
--rc-font-size-sm: 15px

These variables live on .rc-chart, so the charts keep a consistent visual language even when embedded on a third-party site with a completely different type system.

Layer 2: JS theme

The theme is a plain object that every chart reads at render time. The default theme looks like this:

const defaultTheme = {

  // ── Backgrounds ────────────────────────────────────────────────────────────
  bg:      'var(--bg-color)',
  surface: '#f5f5f5',     // tooltip bg, panel fills

  // ── Structure ──────────────────────────────────────────────────────────────
  grid:      '#e8e8e8',   // horizontal grid lines
  border:    '#cccccc',   // axis lines, zero baseline
  crosshair: '#aaaaaa',   // vertical hover line — intentionally subtler than border

  // ── Text ───────────────────────────────────────────────────────────────────
  text:  '#000000',       // primary labels
  muted: '#666666',       // axis tick labels, secondary text

  // ── Semantic (P&L, deltas, signals) ────────────────────────────────────────
  positive: '#389e0d',    // gains, up moves
  negative: '#ff0000',    // losses, down moves
  accent:   '#00aaff',    // highlights, single-series default

  // ── Series palette ─────────────────────────────────────────────────────────
  // Used in order for multi-series charts; override the full array or per-series.
  
  colors: [
    '#fa8c16',  // orange
    '#00aaff',  // blue
    '#00c97a',  // green
    '#ffcc00',  // yellow
    '#cc44ff',  // violet
    '#ff0000',  // red
  ],

  // ── Typography ─────────────────────────────────────────────────────────────
  font:        'var(--rc-font-family, "Fira Sans", sans-serif)',
  fontSize:    'var(--rc-font-size-sm, 15px)',

  // Separate monospace font for numbers on axes and in tooltips.
  // Falls back through a chain of common tabular fonts.
  
  numericFont: 'var(--rc-font-family-numeric, "Cousine", monospace)',

  // ── Sizing defaults ────────────────────────────────────────────────────────
  // Charts use these as fallbacks when options are not passed explicitly.
  
  strokeWidth: 2,
  dotRadius:   3,         // crosshair dot radius
  markerSize:  4,         // per-point marker size
  barOpacity:  0.35,

  // ── Tooltip ────────────────────────────────────────────────────────────────
  tooltip: {
    bg:     '#ffffff',
    border: '#e0e0e0',
    text:   '#000000',
    muted:  '#888888',
    shadow: '0 2px 8px rgba(0,0,0,0.10)',
  },
};

Built-in themes

Two themes ship with the library.

RareCharts.defaultTheme — light background, clean grays, orange/blue accent palette. Works anywhere.

RareCharts.darkTheme — dark background, deep blacks, muted grids, orange accent. Looks sharp on dashboard UIs and dark-mode pages.

new RareCharts.Line('#chart', {
  theme: RareCharts.darkTheme,
}).setData(data);

The result:

Creating a custom theme

RareCharts.createTheme(overrides) merges your overrides with the default and returns a complete theme object. You only need to specify what you want to change:

const brandTheme = RareCharts.createTheme({
  accent:  '#e63946',
  colors:  ['#e63946', '#457b9d', '#a8dadc', '#1d3557'],
  font:    '"Inter", sans-serif',
  numericFont: '"JetBrains Mono", monospace',
  tooltip: {
    bg:     '#1d3557',
    border: '#457b9d',
    text:   '#f1faee',
  },
});

new RareCharts.Bar('#chart', {
  theme: brandTheme,
}).setData(data);

createTheme does a shallow merge for top-level keys and a deep merge for tooltip, so you can override individual tooltip properties without losing the rest.

Applying theme to multiple charts

Create the theme once and reuse it:

const theme = RareCharts.createTheme({ accent: '#ff6200' });

new RareCharts.Line('#chart-a', { theme }).setData(dataA);
new RareCharts.Bar('#chart-b',  { theme }).setData(dataB);
new RareCharts.Donut('#chart-c', { theme }).setData(dataC);

All three charts will use the same colors, fonts, and tooltip styling. Consistency without repetition.

Partial overrides

You don't have to use createTheme for minor tweaks. Passing a partial object directly to the theme option works the same way — it merges automatically:

// Just change the grid color
new RareCharts.Line('#chart', {
  theme: { grid: '#f0f0f0' },
}).setData(data);

Theme token reference

Colors

Token	Default	Used for
`bg`	`#ffffff`	Node label backdrops, tooltip backgrounds
`surface`	`#f5f5f5`	Tooltip panels, secondary fills
`grid`	`#e8e8e8`	Horizontal grid lines
`border`	`#cccccc`	Axis lines, zero baseline
`crosshair`	`#aaaaaa`	Hover tracker line
`text`	`#000000`	Primary labels, node labels
`muted`	`#666666`	Axis tick labels, secondary text, fallback link color
`positive`	`#389e0d`	Gains, up deltas
`negative`	`#ff0000`	Losses, down deltas
`accent`	`#00aaff`	Single-series default, highlights
`colors`	6-color array	Multi-series palette, node group colors

Typography

Token	Default	Used for
`font`	`var(--rc-font-family, "Fira Sans", sans-serif)`	Titles, legends, labels
`fontSize`	`var(--rc-font-size-sm, 15px)`	Theme-controlled text size inside SVG and tooltips
`numericFont`	`var(--rc-font-family-numeric, "Cousine", monospace)`	Axis numbers, tooltips, end labels

The chart CSS also defines the following container-level variables:

CSS Variable	Default	Used for
`--rc-font-family`	`"Fira Sans", sans-serif`	Base font for chart UI and SVG
`--rc-font-family-numeric`	`"Cousine", monospace`	Numeric font for values and axes
`--rc-font-size`	`16px`	Base size for SVG text
`--rc-font-size-sm`	`15px`	Secondary UI text, buttons, captions

These are RareCharts variables, not host-site variables. If you want a different type system, override them explicitly or pass font, numericFont, and fontSize through theme.

Sizing

Token	Default	Used for
`strokeWidth`	`2`	Line chart stroke width
`dotRadius`	`3`	Crosshair hit dots
`markerSize`	`4`	Per-point markers
`barOpacity`	`0.35`	Bar fill opacity

Individual chart options (strokeWidth, markerSize) override theme tokens when specified.

Tooltip

The tooltip sub-object controls tooltip appearance independently from the main chart:

Token	Default
`tooltip.bg`	`#ffffff`
`tooltip.border`	`#e0e0e0`
`tooltip.text`	`#000000`
`tooltip.muted`	`#888888`
`tooltip.shadow`	`0 2px 8px rgba(0,0,0,0.10)`

This separation is useful when you want, say, a dark tooltip on a light chart — just override tooltip.bg and tooltip.text without touching the main colors.