Adding Text in Lightning chart with scale

Question

I want to add text to chart at particular X and Y axis.Right now I use below code , if too many texts its clustered and not positioned correctly.

function addText(name, id) {
  name = ""+name+"";
  chart[id]
    .addChartMarkerXY(SeriesMarkerBuilderx)
    .setPosition({ x: xPos, y: 0 })
    .setGridStrokeXVisibility(UIVisibilityModes.whenDragged)
    .setGridStrokeYVisibility(UIVisibilityModes.whenDragged)
    .setTickMarkerXVisibility(UIVisibilityModes.whenDragged)
    .setTickMarkerYVisibility(UIVisibilityModes.whenDragged)
    .setResultTableVisibility(UIVisibilityModes.always)
    .setResultTable((table) => table.setContent([[name]]));
}

How do i add text in certain position and also I want the text to scale in / out when i zoom in and zoom out charts.

I have added sample screenshot below.

Could you clarify what you are looking for by supplying some edited screenshots of the chart (draw in the text, etc.)? — Niilo Keinänen, Jul 11 '22 at 06:04
I have edited my question with screenshot , i want to add those number based on the axis , x and y ... also when i zoom in and out the chart , those numbers must zoom in and out. — Gracie williams, Jul 11 '22 at 14:22
By the text zooming in and out with the chart, which of the below do you mean; 1) the text is anchored to an X&Y location along the axis and moves with panning,zooming,etc. logically or 2) when you zoom in, the text becomes bigger and vice versa? — Niilo Keinänen, Jul 12 '22 at 05:10
I want it to be attached to axis and zoom in/out aswel that is what i meant , sorry. — Gracie williams, Jul 12 '22 at 14:34

Niilo Keinänen · Accepted Answer · 2022-07-13T09:49:27.720

Any UIElement can be attached to Axis coordinates, see sample below:

const {
    lightningChart,
    emptyFill,
    emptyLine,
    UIElementBuilders,
} = lcjs

const {
    createProgressiveTraceGenerator
} = xydata

const chart = lightningChart().ChartXY()
  .setTitle('')
  
const axisX = chart.getDefaultAxisX()
  .setInterval(0, 10)
const axisY = chart.getDefaultAxisY()
  .setInterval(0, 2000)
  
const text = chart.addUIElement(UIElementBuilders.TextBox, { x: axisX, y: axisY })
  .setText('Hello')
  .setBackground(background => background
    .setFillStyle(emptyFill)
    .setStrokeStyle(emptyLine)
  )
  // NOTE: Axis coordinates!
  .setPosition({ x: 5, y: 1000 })
  // Stop user from moving the text
  .setMouseInteractions(false)

<script src="https://unpkg.com/@arction/lcjs@3.4.0/dist/lcjs.iife.js"></script>
<script src="https://unpkg.com/@arction/xydata@1.2.1/dist/xydata.iife.js"></script>

EDIT:

For the text size to increase with zooming, you'll have to change the font size programmatically. Here's something of a reference code to get you started.

const {
    lightningChart,
    emptyFill,
    emptyLine,
    UIElementBuilders,
} = lcjs

const {
    createProgressiveTraceGenerator
} = xydata

const chart = lightningChart().ChartXY()
  .setTitle('')
  
const axisX = chart.getDefaultAxisX()
  .setInterval(0, 10)
const axisY = chart.getDefaultAxisY()
  .setInterval(0, 2000)
  
const text = chart.addUIElement(UIElementBuilders.TextBox, { x: axisX, y: axisY })
  .setText('Hello')
  .setBackground(background => background
    .setFillStyle(emptyFill)
    .setStrokeStyle(emptyLine)
  )
  // NOTE: Axis coordinates!
  .setPosition({ x: 5, y: 1000 })
  // Stop user from moving the text
  .setMouseInteractions(false)
  
// Adjust text font size according to Axis intervals (zoom level).
axisX.onScaleChange((start, end) => {
  const interval = Math.abs(end - start)
  let fontSize = Math.round(100 / interval)
  if (fontSize < 6) { fontSize = 6; }
  if (fontSize > 60) { fontSize = 60; }
  text.setTextFont(font => font.setSize(fontSize))
})

<script src="https://unpkg.com/@arction/lcjs@3.4.0/dist/lcjs.iife.js"></script>
<script src="https://unpkg.com/@arction/xydata@1.2.1/dist/xydata.iife.js"></script>

hi , here the hello text size is not zooming in / out, when i zoom in charts.. — Gracie williams, Jul 12 '22 at 14:33
I want it to be attached to axis and zoom in/out aswel that is what i meant , sorry. — Gracie williams, Jul 12 '22 at 14:34
hi , if i have dashboard of 2 charts , when i zoom in charts.. texts that i added in chart 2 is displaying over chart 1.. — Gracie williams, Jul 14 '22 at 12:15
I assume in this case the text is also outside the visible axis range. Most likely you'll want to dispose text's that are outside axis range and restore those that are inside. — Niilo Keinänen, Jul 14 '22 at 12:38
hi , can you please tell me , how to find if text is outside visible axis range ? also please tell me how do i add background and border to this text , thanks. — Gracie williams, Jul 28 '22 at 18:38
Axis range can be checked with Axis.getInterval(), UITextBox does not expose information about its size, so maybe you'll have to ignore that or use some approximate. UITextBox position you should know since you assign it, and can also get it with getPosition(). The background and border are disabled in the code snippet (setBackground...) so just take those out. — Niilo Keinänen, Jul 29 '22 at 06:42
thanks , i made it work , can i reduce the padding of border around text — Gracie williams, Jul 29 '22 at 07:54
i tried setPadding but not working .setPadding({ bottom: 0, right: 0, top: 0, left: 0 }) — Gracie williams, Jul 29 '22 at 07:55

Adding Text in Lightning chart with scale

1 Answers1