Annotation Authoring (Ink) in JavaScript

function signal() {
  var out = []
  for (var i = 0; i < 40; i++) {
    var v = 50 + 22 * Math.sin(i / 4.0) + 9 * Math.sin(i / 1.4) + i * 0.4
    out.push([i, Math.round(v)])
  }
  return out
}

var options = {
  series: [{ name: 'Signal', data: signal() }],
  chart: {
    id: 'signal',
    type: 'line',
    height: 380,
    fontFamily: 'Helvetica, Arial, sans-serif',
    animations: { enabled: false },
    ink: { enabled: true, palette: true },
    history: { enabled: true },
    toolbar: { show: false },
    zoom: { enabled: false },
  },
  stroke: { width: 2, curve: 'smooth' },
  colors: ['#0EA5E9'],
  title: { text: 'Signal (drag the callouts)', align: 'left' },
  xaxis: { type: 'numeric', title: { text: 'Sample' } },
  yaxis: { title: { text: 'Value' } },
  annotations: {
    points: [
      {
        x: 6,
        y: 74,
        id: 'peak',
        marker: {
          size: 7,
          fillColor: '#fff',
          strokeColor: '#0EA5E9',
          strokeWidth: 3,
        },
        label: {
          text: 'Peak',
          borderColor: '#0EA5E9',
          style: { color: '#fff', background: '#0EA5E9' },
        },
      },
      {
        x: 20,
        y: 52,
        id: 'dip',
        marker: {
          size: 7,
          fillColor: '#fff',
          strokeColor: '#ef4444',
          strokeWidth: 3,
        },
        label: {
          text: 'Watch',
          borderColor: '#ef4444',
          style: { color: '#fff', background: '#ef4444' },
        },
      },
    ],
    xaxis: [
      {
        x: 10,
        x2: 16,
        id: 'window',
        fillColor: '#7DD3FC',
        opacity: 0.28,
        label: {
          text: 'Window',
          style: { color: '#fff', background: '#0EA5E9' },
        },
      },
    ],
    yaxis: [
      {
        y: 62,
        id: 'target',
        borderColor: '#f59e0b',
        strokeDashArray: 4,
        label: {
          text: 'Target',
          style: { color: '#fff', background: '#f59e0b' },
        },
      },
    ],
  },
}

var chart = new ApexCharts(document.querySelector('#chart'), options)
chart.render()

var readout = document.getElementById('ink-readout')
chart.addEventListener('annotationDragged', function (c, o) {
  readout.textContent =
    "Moved '" +
    o.id +
    "' to x=" +
    Number(o.x).toFixed(2) +
    ', y=' +
    Number(o.y).toFixed(2)
})
chart.addEventListener('annotationStyled', function (c, o) {
  readout.textContent = "Restyled '" + o.id + "'"
})
chart.addEventListener('annotationDeleted', function (c, o) {
  readout.textContent = "Deleted '" + o.id + "' (Ctrl/Cmd+Z restores it)"
})