Open-source Themes package for LightningChart JS

• Provides tools and ready-made options for customizing LightningChart JS colors and styles
• Helps with kicking off your own custom themes development by checking through the open-source repository
• No need to wait for new LightningChart JS versions to get updates for themes, colorization and styling

Usage

npm i @lightningchart/lcjs-themes

// Using pre-built open-source themes
import { flatThemeDark } from '@lightningchart/lcjs-themes'
import { lightningChart } from '@lightningchart/lcjs'

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

// Creating customized theme using open-source theme factories
import { makeCustomTheme } from '@lightningchart/lcjs-themes'
import { lightningChart, ColorHEX } from '@lightningchart/lcjs'

const myCustomTheme = makeCustomTheme({
    isDark: 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 chart = lightningChart().ChartXY({ theme: myCustomTheme })

You can also use the included no-code editor for making custom themes without coding.

See CHANGELOG for latest additions to package contents.

Examples

See examples on how to use themes in different scenarios:

HTML/JS

React

Headless

Learn more about LightningChart JS on our web site.

Support Table

lcjs-themes is used together with the main chart library @lightningchart/lcjs. Use the below support table to find what version of lcjs-themes is compatible with lcjs.

lcjs	lcjs-themes
^7.0.0	^5.0.x
6.1.x	4.1.x
6.0.x	4.0.x
5.1.x	3.2.x
5.0.x	3.0.x
4.2.x	2.1.x
4.1.x	2.0.x
4.0.0 - 4.0.2	1.0.x - 1.1.x
Anything older	No support

Contribute

Suggest edits and additions with GitHub Issues

Suggest integrating your own code changes with GitHub Pull Requests

Or get directly in touch with the creators by leaving a general inquiry at our web site.