Using with Ignite UI

From ApexStock 0.6.0, stock charts can follow an Ignite UI theme loaded on the page. One import turns it on: the toolbar with its menus and popups, the legend, the analysis panel, the rise and fall colors (candles, measure boxes, price lines) from the theme's success and error colors, the font, and light or dark then come from the theme's --ig-* tokens. The add-on needs no extra licence key, as the chart's own licence covers it, and ranks below every style you set, so a chart you already themed stays as it is.

Opt in

ApexStock draws its plots with ApexCharts, so it needs the ApexCharts release that ships the Ignite UI add-on (8.8.0 or later).

With a bundler

Import the add-on once, before the first render. It also loads apexcharts/features/ignite-ui, which themes the plots:

import ApexCharts from 'apexcharts'
import ApexStock from 'apexstock'
import 'apexstock/ignite-ui'

With script tags

Load both add-ons: ApexCharts' themes the plots, ApexStock's the rest.

<script src="https://cdn.jsdelivr.net/npm/apexcharts@8.8.1/dist/apexcharts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@8.8.1/dist/features/ignite-ui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexstock@0.6.0/dist/apexstock.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexstock@0.6.0/dist/apexstock.ignite-ui.min.js"></script>

Load them before the first render, or call update({}) after. Without the add-on the --ig-* tokens are ignored, with no error; the --apx-* tokens work either way.

What follows the theme

• Toolbar and panels: the toolbar, its menus and popups, the legend and the analysis panel follow the theme's colors and font.
• Rise and fall: candles, measure boxes and price lines take the theme's success and error colors.
• Plots: series colors, text, gridlines, tooltips and the font, through the ApexCharts add-on (see Using ApexCharts with Ignite UI).
• Light or dark: with no theme.mode, a dark Ignite UI theme (--ig-theme-variant) makes the chart dark; a mode or preset you set wins. The main plot stays transparent over ApexStock's own surface, which keeps its light and dark backgrounds.
• Indicators keep their own colors.

Ranking

Every color, the font and the mode resolve in one order, highest first. Ignite UI fills only what nothing above it set.

Rank	Source	Example
1	An option you pass	theme.mode, candle colors passed to update()
2	ApexStock's own CSS variables	--apexstock-blue and the other --apexstock-* tokens
3	The family --apx-* tokens	--apx-accent, --apx-fore, --apx-grid, --apx-font-family
4	A theme preset	A preset, color-blind mode or monochrome, which keep ApexStock's own colors
5	Ignite UI	The --ig-* tokens, with the add-ons loaded
6	Built-in defaults	The light theme

See Theming for the presets and the --apexstock-* tokens.

Turn it off

The add-on applies to every stock chart on the page. Per chart:

theme: {
  designSystem: false, // ignore the Ignite UI theme, keep the --apx-* tokens
  // tokens: false,    // also stop the charts reading the --apx-* tokens
}

Both default to true. Without the add-on, theme.designSystem does nothing.

Switching themes at runtime

ApexStock has no refreshTokens(): it reads the theme when it renders. When the page swaps its Ignite UI stylesheet, for example from the light to the dark variant, call update({}) once the new sheet has loaded:

const link = document.getElementById('ig-theme')
link.addEventListener('load', () => apexStock.update({}), { once: true })
link.href = '/themes/material-dark.css'

Web fonts

An Ignite UI theme names its font in --ig-font-family but does not load it, so add the font to the page yourself (a link to the font service or your own @font-face). The plots read the font again once it has loaded, so their labels are measured with it, and the toolbar's text takes it from CSS. Nothing to call.

Frequently asked questions

Does the add-on need a licence key?

No. It is covered by the chart's own licence, which does not change, and has no premium tier.

Do I need Ignite UI installed to use ApexStock?

No. The add-ons only read the --ig-* custom properties an Ignite UI theme declares on the page; with no such theme they change nothing.