Search code examples
javascriptchartslightningchart

Issue Controlling Label Font Size on xAxis in LightningChartJS with React and TypeScript

I'm currently working on a project using React with TypeScript and LightningChartJS. I'm trying to place some custom text directly underneath the x-axis labels so that it appears as part of the axis, fitting perfectly beneath the x-axis numbers.

According to the LightningChartJS documentation, there should be a function to control the label font size. However, when I try to use this function, TypeScript throws an error saying that it doesn't exist.

enter image description here error from code sandbox: enter image description here

link to code sandbox: https://5f65cx.csb.app/

Here are the details:

LightningChartJS version: 6.0.2 Package: @lightningchart/lcjs: ^6.0.2

Problem Details: Expected Behavior: I should be able to control the font size of the x-axis labels and add custom text below the axis that fits neatly with the existing labels. Actual Behavior: TypeScript compiler reports that the method to control the label font size does not exist.

Has anyone encountered a similar issue or knows how to resolve this? Is there an alternative approach to add custom text beneath the x-axis labels?

images: enter image description here enter image description here enter image description here

Solution

  • Try this code:

    axisX2
  .addCustomTick()
  .setValue(9.0)
  .setTextFormatter((value) => `Notes`)
  .setTickLabelRotation(270)
  .setGridStrokeStyle(emptyLine)
  .setMouseInteractions(false)
  .setTickLabelPadding(-10)
  .setMarker((tickMarker) =>
    tickMarker.setTextFont((font) => font.setSize(10)).setEffect(false)
  );