3

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.

Patrick John Pacana
  • 101
  • 5
  • Did you know LCJS interactive examples also has an interactive code playground with typed intellisense? It can be much more convenient in testing API than, for example, local JavaScript applications. For instance, I tested typing "chart.set" and I quickly found the method chart.setBackgroundFillStyle which probably is one you needed. – Niilo Keinänen May 26 '21 at 13:53
  • I already tested that chart.setBackgroundFillStyle that works, but thats only for the outer background, its the inner background / chart background I needed. – Patrick John Pacana May 26 '21 at 14:29
  • See also chart.setSeriesBackgroundFillStyle – Niilo Keinänen May 26 '21 at 14:33
  • 1
    @NiiloKeinänen I got myself to follow as you suggested to look/test for APIs in the playground and yeah that suggestion was great, thank you very much. – Patrick John Pacana May 27 '21 at 07:15
  • @NiiloKeinänen also, chart.setSeriesBackgroundFillStyle worked for my issue#2. I only found that on the playground and not on the API doc, thanks! – Patrick John Pacana May 27 '21 at 07:19
  • Good to hear. I'm afraid your API doc might be outdated. In top right it should say "v3.0.0" or more. At arction.com there should always be latest, but right now there seems to be some technical issue - will be fixed shortly. – Niilo Keinänen May 27 '21 at 08:11

1 Answers1

0
  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) }) }))
Niilo Keinänen
  • 2,187
  • 1
  • 7
  • 12