CODEWITHSUNDEEP
lightningchart
Oleksandr
Oleksandr

Reputation: 13

How to create horizontal multiline legend?

Is it possible to add a horizontal multi-line legend?

example

Upvotes: 1

Views: 207

Answers (1)

Niilo Keinänen
Niilo Keinänen

Reputation: 2582

This can be done by creating 1 legend box for each row in the legend, and placing them in a column layout.

Here's a code snippet.

const { lightningChart, UIDraggingModes, emptyLine, emptyFill, UILayoutBuilders, UIOrigins, LegendBoxBuilders } = lcjs;

const chart = lightningChart().ChartXY()
  .setTitle('')
  .setPadding({ top: 110 })

const seriesList = new Array(11).fill(0).map((_, i) => {
  const series = chart.addLineSeries()
    .setName(`Trend #${i+1}`)
    .addArrayY(new Array(20).fill(0).map(_ => Math.random()))
  return series
})

const legendLayout = chart.addUIElement(UILayoutBuilders.Column)
  .setPosition({ x: 0, y: 100 })
  .setOrigin(UIOrigins.LeftTop)
  .setMargin(10)
  .setDraggingMode(UIDraggingModes.disabled)

const legendList = new Array(4).fill(0).map(_ => {
  const legend = legendLayout.addElement(LegendBoxBuilders.HorizontalLegendBox)
    .setTitle('')
    .setMargin(0)
    .setPadding(0)
  return legend
})

legendList[0].add(seriesList[0])
legendList[0].add(seriesList[1])
legendList[0].add(seriesList[2])
legendList[0].add(seriesList[3])
legendList[1].add(seriesList[4])
legendList[1].add(seriesList[5])
legendList[1].add(seriesList[6])
legendList[2].add(seriesList[7])
legendList[2].add(seriesList[8])
legendList[2].add(seriesList[9])
legendList[3].add(seriesList[10])
<script src="http://unpkg.com/@arction/[email protected]/dist/lcjs.iife.js"></script>

Upvotes: 1

Related Questions