CODEWITHSUNDEEP
javascriptchartslinechartlightningchart
Gracie williams
Gracie williams

Reputation: 1145

Adding Text in Lightning chart with scale

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.

enter image description here

Upvotes: 1

Views: 293

Answers (1)

Niilo Keinänen
Niilo Keinänen

Reputation: 2582

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/[email protected]/dist/lcjs.iife.js"></script>
<script src="https://unpkg.com/@arction/[email protected]/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/[email protected]/dist/lcjs.iife.js"></script>
<script src="https://unpkg.com/@arction/[email protected]/dist/xydata.iife.js"></script>

Upvotes: 2

Related Questions