generate data

function getData () {
  return [{
    name: 'trend',
    values: Array.from({ length: 1000 }, (d, i) => ({
      x: i / 10,
      y: Math.sin(i / 100)
    }))
  }]
}

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]')
  .tooltip.on(true)
  .tooltip.valueFormat(d => d.y.toFixed(2))
  .render()

api methods

let togglePlaceholder = () => {
  this.p = ((this.p || 0) + 1) % 3
  chart.placeholder([
    undefined,
    'Data is not available.',
    ''
  ][this.p])
    .render(1000)
}

let toggleSize = () => {
  this.s = 1 - (this.s || 0)
  chart.width(this.s ? WIDTH / 2 : WIDTH)
    .height(this.s ? HEIGHT / 2 : HEIGHT)
    .render(1000)
}