generate data

function getData () {
  const length = Math.floor(500 * Math.random()) + 500
  const lambda = 100 * Math.random() + 50
  return [{
    name: 'trend',
    values: Array.from({ length }, (d, i) => ({
      x: i / 10,
      y: Math.sin(i / lambda)
    }))
  }]
}

create chart

const chart = dalian.LineChart('myChart', '#widget')
  .data(getData())
  .width(WIDTH)
  .height(HEIGHT)
  .margins({left: 60, top: 40, bottom: 40, right: 40})
  .font.size(14)
  .bottomAxis.label('Elapsed time')
  .leftAxis.label('Temperature [C]')
  .render()

api methods

let changeData = () => chart.data(getData()).render(1000)

let toggleTickFormat = () => {
  this.f = ((this.f || 0) + 1) % 3
  chart.bottomAxis.format([undefined, x => x + 'h', () => ''][this.f])
    .render()
}

let toggleAxisLine = () => {
  this.a = 1 - (this.a || 0)
  chart.bottomAxis.hideAxisLine(this.a).render()
}

let toggleTicks = () => {
  this.t = 1 - (this.t || 0)
  chart.bottomAxis.hideTicks(this.t).render()
}

let toggleLabel = () => {
  this.l = ((this.l || 0) + 1) % 3
  chart.bottomAxis.label(['Elapsed time', 'Age', ''][this.l])
    .render()
}

let toggleTickValues = () => {
  this.v = 1 - (this.v || 0)
  chart.bottomAxis.values(this.v ? [10, 30, 50] : undefined).render()
}