Explore the API
  • .color.palette()
  • .columns()
  • .entries(["Pilsener", "Weissbier", "Saison", "Stout"])
  • .hSep()
  • .insert()
  • .markers()
  • .styles({"Saison": "dashed", "Stout": "dotted"})
  • .vSep()
01234consumption020406080days
PilsenerWeissbierSaisonStout

description
Back to the catalogue

A legend is a static control element that can be used to add interactive labels to charts or dashboards. It can be inserted into any widget that supports the Objects component.

code
DocumentationSource code

create a chart

const chart = dalian.LineChart('chart', '#widget')
  .data([{
    name: 'Pilsener',
    values: Array.from({ length: 100 }, (d, i) => ({
      x: i,
      y: Math.exp(i / 100)
    }))
  }, {
    name: 'Weissbier',
    values: Array.from({ length: 100 }, (d, i) => ({
      x: i,
      y: Math.cos(i / 100)**2
    }))
  }, {
    name: 'Saison',
    values: Array.from({ length: 100 }, (d, i) => ({
      x: i,
      y: 1 - Math.exp(-i / 100)
    }))
  }, {
    name: 'Stout',
    values: Array.from({ length: 100 }, (d, i) => ({
      x: i,
      y: Math.log(i / 10 + 1)
    }))
  }])
  .lineStyle({
    Saison: 'dashed',
    Stout: 'dotted',
  })
  .width(0.6 * WIDTH)
  .height(HEIGHT)
  .margins(40)
  .leftAxis.label('consumption')
  .bottomAxis.label('days')
  .yRange.max(4)
  .render()

create legend

const legend = dalian.Legend('legend', '#widget')
  .x(0.6 * WIDTH)
  .width(0.4 * WIDTH)
  .height(HEIGHT)
  .margins({top: 40})
  .font.size(12)
  .entries(['Pilsener', 'Weissbier', 'Saison', 'Stout'])
  .styles({
    Saison: 'dashed',
    Stout: 'dotted'
  })
  .mouse.over(k => {
    // Highlight legend and curves.
    legend.highlight(k, 400)
    chart.highlight(k, 400)
  })
  .mouse.leave(() => {
    // Remove highlights.
    legend.highlight(null, 400)
    chart.highlight(null, 400)
  })
  .render()