Themes

This section explores a complete way to configure the visual look of LightningChart JS - Themes.

At first level, LightningChart JS is distributed with a set of built-in Themes to choose from:

• darkGold
• light
• cyberSpace
• turquoiseHexagon

These themes are hand-crafted to be very impressive looking. However, often times users need chart components to fit into an existing visual design, rather than the other way around.

For example, many software companies have their own brand colors and visual designs. A critical requirement often is that the charts can be configured to fit into the design.

While this can be done using the style API, it might be very impractical if there are multiple themes that should be implemented and/or multiple applications with different charts.

So, a better approach is Custom Themes.

Custom Themes

When creating any LightningChart JS component, a Theme object can be supplied. This object is essentially a long list of properties that contains a default style for every individual visual component and feature of the library.

On paper, creating a completely custom theme is as simple as defining an object with all the properties of Theme.

However, as there is a large number of properties, and many applications wouldn't ideally want to bother with every single one of them. The easiest way to define a custom theme is to use the separate, open-source package @arction/lcjs-themes Here's how the usage looks:

import { makeCustomTheme } from '@arction/lcjs-themes'
const myCustomTheme = makeCustomTheme({
    isDark: true,
    gradients: true,
    effects: true,
    fontFamily: "Segoe UI, -apple-system, Verdana, Helvetica",
    backgroundColor: ColorHEX("#05183dff"),
    textColor: ColorHEX("#ffffffff"),
    dataColors: [ColorHEX("#ffff5b"), ColorHEX("#ffcd5b"), ColorHEX("#ff9b5b"), ColorHEX("#ffc4bc"), ColorHEX("#ff94b8"), ColorHEX("#db94c6"), ColorHEX("#ebc4e0"), ColorHEX("#a994c6"), ColorHEX("#94e2c6"), ColorHEX("#94ffb0"), ColorHEX("#b4ffa5")],
    axisColor: ColorHEX("#00000000"),
    gridLineColor: ColorHEX("#2e2e2eff"),
    uiBackgroundColor: ColorHEX("#020918ff"),
    uiBorderColor: ColorHEX("#ffffff"),
    dashboardSplitterColor: ColorHEX("#16173cff"),
})

const chart = lightningChart().ChartXY({ theme: myCustomTheme })

As you can see, you only have to specify a few key properties, which makes it easy to get started fast.

You can also pick these values using our Online Theme Editor

Utilizing this simple approach is strongly recommended especially in early development stages to get quickly started up with your own brand coloring.

Going forward, you can override individual Theme properties of the automatically generated theme as needed. For this stage, the source code of lcjs-themes can be used as a helpful reference.

// Create flat theme, but override desired properties
const flatTheme = makeFlatTheme({
    isDark: true,
    gradients: true,
    effects: true,
    fontFamily: 'Segoe UI, -apple-system, Verdana, Helvetica',
    backgroundColor: ColorHEX('#181818ff'),
    textColor: ColorHEX('#ffffc8ff'),
    dataColors: [ColorHEX('#ffff5b'), ColorHEX('#ffcd5b'), ColorHEX('#ff9b5b')],
    axisColor: ColorHEX('#00000000'),
    gridLineColor: ColorHEX('#303030ff'),
    uiBackgroundColor: ColorHEX('#161616ff'),
    uiBorderColor: ColorHEX('#ffffff'),
    dashboardSplitterColor: ColorHEX('#2d2d2dff'),
})
const customizedFlatTheme = {
    ...flatTheme,
    chartXYTitleFont: flatTheme.chartXYTitleFont.setFont((font) => font.setWeight('bold'))
}