Styles, colors and fonts

This guide is about Style API, which allows overriding the default style of any single part of a chart during run-time.

If you are looking to change the overall look and color of the charts as an entirety rather than individual details, then we suggest you look at Themes.

---

All LightningChart JS styles, colors, fonts, etc. can be configured by the user. Most of them can even be changed at any point during run-time.

For the purpose of describing different styles, LightningChart JS has its own set of classes which are critical to understand in order to customize the style of LightningChart.

The most important style classes are the following:

• FillStyle - describes the style for a filled area.
• LineStyle - describes the style for a stroke or border.
• Color - describes 1 color.
• FontSettings - describes a font, including family, size, weight, etc.

Many of these style classes are abstract, meaning that it has a number of implementations which you can choose from. For example, for a LineStyle you can use SolidLine or DashedLine.

// Example, chart title color
chart.setTitleFillStyle(new SolidFill({ color: ColorHEX("#ff0000") }));

// Example, chart title font
chart.setTitleFont(
  new FontSettings({
    family: "Segoe UI",
    size: 12,
    weight: "bold",
    style: "normal",
  })
);

Here's one more example for configuring a LineStyle:

// Example, configure stroke style of a line series
LineSeries.setStrokeStyle(
  new SolidLine({
    thickness: 2,
    fillStyle: new SolidFill({
      color: ColorHEX("#ff0000"),
    }),
  })
);

Color factories

There are a handful of different syntaxes of defining colors:

const colorRed = ColorRGBA(255, 0, 0, 255)
const colorGreen = ColorHEX('#00ff00')
const colorBlue = ColorCSS('blue')
const colorRed2 = ColorHSV(0)

Partial style modifications

Often you wouldn't ideally want to completely specify a new style, but rather only change some of the available properties, like font family for example. For this purpose, almost all style methods allow supplying a callback function that modifies the current style.

// Example, change font family
chart.setTitleFont((font) => font.setFamily("Segoe UI"));

// Example, change stroke thickness
LineSeries.setStrokeStyle((stroke) => stroke.setThickness(1))

// Example, change stroke to be dashed
LineSeries.setStrokeStyle((stroke) => new DashedLine({
  thickness: stroke.getThickness(),
  fillStyle: stroke.getFillStyle()
}))

Style objects immutability

All LightningChart style objects are immutable, meaning if you call a method like FontSettings.setFamily() it doesn't actually mutate the object, but instead creates a new object, so there is no risk of unexpected side effects.