ChartXY and Axis styling methods in LightningChart-JS

user_15962608 0
Viewed 132

screenshot

Hi, I need help in changing a bunch of styling properties for the ChartXY and Axis. I tried the methods from the documentation but its either the function is not found or it is not clear which method in the API doc.

  1. changing the default x and y ticks font properties (family, size, style) - In the API doc I only see the title and for custom ticks.
  2. changing the chart bg color - ChartXY.setChartBackgroundFillStyle returns a function not found error
  3. changing the chart border props - ChartXY.setChartBackgroundStroke returns a function not found error

Please help.

lightningchart
1 Answers
  1. changing the default x and y ticks font properties (family, size, style)

All modification of automatically placed Axis ticks is done via TickStrategy. Since, different tick strategies can have different tick structures, this modification must be at the same time when the tick strategy is specified. It looks like this:

chart.getDefaultAxisX()
    // Specify tick strategy and configure it via callback function.
    .setTickStrategy(AxisTickStrategies.Numeric, (ticks) => ticks
        .setMinorTickStyle((style) => style
            .setLabelFont((font) => font.setStyle('italic'))
        )
    )

In this case, ticks is of type NumericTickStrategy.

Note for TypeScript users, tick style currently has to be casted to VisibleTicks, like this: ticks.setMinorTickStyle((style: VisibleTicks) => style...)

  1. changing the chart bg color
chart.setSeriesBackgroundFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) }))
  1. changing the chart border props
chart.setSeriesBackgroundStrokeStyle(new SolidLine({ thickness: 2, fillStyle: new SolidFill({ color: ColorRGBA(255, 0, 0) }) }))
user_92880630
Related