How to set a Theme's numericTickStrategy?

LightningChart Version: 3.4.0.

This is my code. I tried to set the "numericTickStrategy" property of "lightNew" theme globally, but it doesn't works. MyDemo

I can use "setTickStrategy" method by this:

chart.getDefaultAxisX().setTickStrategy(AxisTickStrategies.Numeric, (strategy) =>
  strategy
    // Format ticks with units.
    .setFormattingFunction((timeScaled) =>
      (timeScaled / this.DATA_FREQUENCY_HZ).toFixed(2)
    )
    .setMajorTickStyle((tickStyle) =>
      tickStyle.setLabelFont((font) => setFont(font))
    )
    .setMinorTickStyle((tickStyle) =>
      tickStyle.setLabelFont((font) => setFont(font)).setTickPadding(3)
    )
)

But my purpose is to set the "numericTickStrategy" property globally for a Theme once, so that I don't need to configure the "numericTickStrategy" property again when I use this Theme. Is there some way?

Solution

Themes are readonly, so you can't modify them like

Themes.light.myProperty = something

Rather, you should define a new theme that can be based on another, something like:

const myTheme = { 
   ...Themes.light,
   myProperty: something,
}
export myTheme

Please find good references of working with Themes over at lcjs-themes, an open-source repository with ready to use LCJS themes, easily customizable themes as well as setting up an example of how to make your own themes.

https://github.com/Arction/lcjs-themes/blob/main/src/flatTheme.ts

(Or if above link doesn't work https://github.com/Arction/lcjs-themes )

You can search for new NumericTickStrategy in the file.

Please note that lcjs-themes is not compatible with LCJS v3.4! You can either migrate to v4.0, or just reference the part around how to use new NumericTickStrategy - that part is unchanged for v3.4.

For migration, please closely reference the migration guide: https://lightningchart.com/wp-content/uploads/LightningChart-JS-Migration-Guide-3x-to-4-0-0.pdf