Theming and design tokens

This is the pinned library technical reference. Its test descriptions and contrast targets document that source snapshot; they are not an independent accessibility certification of every chart or application. Source-only test commands and internal paths are not files promised by the public distribution archive.

West Coast Charts ships a set of design tokens and four built-in presets. A preset gives every chart type consistent typography, colours, gridlines, tooltip, legend, markers and motion. This section is written for West Coast Charts and is not derived from any ApexCharts documentation.

#Options

'classic' is the ApexCharts 4.7.0 look, with the same defaults. Use it as theme: { preset: 'classic' } or globally as window.Apex = { theme: { preset: 'classic' } }.

Presets:

• coastal - the default. Crisp product-UI look with a Pacific-blue-led palette.
• midnight - editorial and dark-first, with a warm gold accent and compact density.
• paper - quiet reporting style with a dashed grid, ink palette and square corners.
• accessible - Okabe-Ito based palette that works for colour-vision deficiencies, plus stronger text and axis contrast.

coastal and classic are in the core bundle. midnight, paper and accessible ship with west-coast-charts/types (or the light entry west-coast-charts/types/themes, about 2.8 kB gz) to keep the core small. Without them the chart uses coastal and logs one console hint naming the entry to load; WestCoastCharts.themePresets lists only the presets that are loaded.

import WestCoastCharts from 'west-coast-charts'
import 'west-coast-charts/types/themes' // midnight, paper, accessible + colour-vision palettes

All presets are tested in light and dark mode:

• text is at least 7:1 against the surface
• secondary text is at least 4.5:1
• every series colour is at least 3:1 (WCAG 1.4.11)

#Precedence

Lowest wins first:

1. preset tokens
2. --wcc-* custom properties on the chart container (or an ancestor)
3. theme.tokens
4. explicit chart options such as grid.borderColor, colors or chart.fontFamily

Options you set yourself are never overridden, also not when the mode or preset changes later through updateOptions().

#Tokens

The ApexCharts 6+ token names are also read:

If a --wcc-* and an --apx-* property are both set, the --wcc-* one wins. chart.refreshTokens() re-reads the tokens after a CSS change at runtime.

Registered themes:

WestCoastCharts.registerTheme('brand', {
  mode: 'dark',
  tokens: { fore: '#eee', grid: '#444', surface: '#101418', series: ['#fc0', '#0cf'] },
})
new WestCoastCharts(el, { theme: { name: 'brand' } })
WestCoastCharts.registerEasing('snappy', [0.2, 0.8, 0.2, 1])

Example: set the tokens with CSS.

.revenue-card { --wcc-grid: #edf0f4; --wcc-palette: #0b5fff, #00a389, #f59f00; }

The tokens are read when the chart renders.

Example: set the tokens with options.

new WestCoastCharts(el, { theme: { preset: 'midnight', mode: 'auto', tokens: { radius: '12px' } } })

Static helpers:

• WestCoastCharts.themePresets lists the preset names.
• WestCoastCharts.getThemeTokens(preset, mode) returns the resolved tokens, for example to style the card around a chart.

#Premium look

Presets other than classic also refine the chart itself: muted axis and legend text, legend markers that match the series type (short line, rounded square or dot), outer-end bar radius with hairline separators, whole-percent donut labels with a centre total, radial bar names and values, a soft glow for dark line charts and surface-coloured gaps in heatmaps. Every one of these is a normal option underneath, so any value you set wins.

Applies to all presets: axis ticks use the fewest decimals that show every tick exactly, and slice/cell labels switch to dark text when white would be hard to read.

#CSS hooks

• The chart root has the classes wcc and apexcharts-canvas. With a preset other than classic it also has wcc-themed and wcc-preset-<name>, plus data-wcc-mode="light|dark".
• Themed legend markers: .wcc-legend-marker plus .wcc-legend-marker-line|square|dot.
• Themed component styles (tooltip, legend, menu, toolbar) are scoped under .wcc-themed. Every apexcharts-* class is unchanged.
• Numbers use tabular figures. Gridlines and axis ticks render with shape-rendering: crispEdges.

#Source and licence

Copied from docs/THEMING.md at library commit 95f093ba8d388c579d9f94701d3322c728c77632. Original source SHA-256: 2c4872f64c3232bcf0abe8351e9bc691e84a47ea9c35556151f030e87ea2eff0. The imported document is retained unchanged; this website adds this provenance and licence section. Original attribution notice.

The MIT License (MIT)

Copyright (c) 2018 ApexCharts
Copyright (c) 2026 West Coast Software (modifications, see NOTICE)

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.