lightningchart

Add custom values to Legend in lightningchart

I can create legends like below:

enter image description here

Is there any way I can add custom text dynamically in the place of Bollinger band? For example, I want to show live price every second in legend.

Also how do I programmatically enable and disable a legend?

Solution

  • You can store the legendbox entry returned by the legendBox.add() method. This entry has a method entry.setText() that can be used to set the text of the legend box entry to be what ever you want.

    const legendBox = chart.addLegendBox()
const entry = legendBox.add(series, undefined, 'Legend Box')

entry.setText('Custom text here')

    By storing the entry reference you can call the setText method when ever you want to update the text.

    See the below example in which the legend box entry text is updated every time new data is added.

    // Extract required parts from LightningChartJS.
const {
  lightningChart,
  DataPatterns,
  Themes
} = lcjs

// Import data-generator from 'xydata'-library.
const {
  createProgressiveTraceGenerator
} = xydata

// Create a XY Chart.
const chart = lightningChart().ChartXY({
  // theme: Themes.dark
})

// Create progressive line series.
const series = chart.addLineSeries({
  dataPattern: DataPatterns.horizontalProgressive
})

const lb = chart.addLegendBox()
lb.setPosition({
  x: 50,
  y: 50
})

const entry = lb.add(series, undefined, 'Legend Box')

// Generate traced points stream using 'xydata'-library.
createProgressiveTraceGenerator()
  .setNumberOfPoints(1000)
  .generate()
  .toStream()
  .forEach(data => {
    series.add(data)
    entry.setText(`Custom text: ${series.getLastPoint().y.toFixed(1)}`)
  })
    <script src="https://unpkg.com/@arction/xydata@1.4.0/dist/xydata.iife.js"></script>
<script src="https://unpkg.com/@arction/lcjs@2.2.1/dist/lcjs.iife.js"></script>

    You can disable the legend box by calling legendbox.dispose(). This will remove the legendbox completely. To then enable the legendbox again you can call legendbox.restore() which will restore the legendbox as it was.