Annotation tooltips

import WestCoastCharts from 'west-coast-charts'

const options = {
  chart: {
    height: 380,
    fontFamily: "Inter, Geist, \"IBM Plex Sans\", system-ui, sans-serif",
    type: "line",
    toolbar: {
      show: false
    }
  },
  series: [
    {
      name: "Activations",
      data: [
        [1767571200000, 118],
        [1767657600000, 120],
        [1767744000000, 118],
        [1767830400000, 121],
        [1767916800000, 119],
        [1768003200000, 120],
        [1768089600000, 119],
        [1768176000000, 119],
        [1768262400000, 120],
        [1768348800000, 121],
        [1768435200000, 121],
        [1768521600000, 119],
        [1768608000000, 121],
        [1768694400000, 118],
        [1768780800000, 121],
        [1768867200000, 121],
        [1768953600000, 122],
        [1769040000000, 122],
        [1769126400000, 124],
        [1769212800000, 124],
        [1769299200000, 125],
        [1769385600000, 124],
        [1769472000000, 127],
        [1769558400000, 124],
        [1769644800000, 126],
        [1769731200000, 124],
        [1769817600000, 125],
        [1769904000000, 123],
        [1769990400000, 125],
        [1770076800000, 124],
        [1770163200000, 123],
        [1770249600000, 121],
        [1770336000000, 121],
        [1770422400000, 124],
        [1770508800000, 121],
        [1770595200000, 121],
        [1770681600000, 119],
        [1770768000000, 121],
        [1770854400000, 118],
        [1770940800000, 120],
        [1771027200000, 120],
        [1771113600000, 118],
        [1771200000000, 117],
        [1771286400000, 119],
        [1771372800000, 118],
        [1771459200000, 120],
        [1771545600000, 123],
        [1771632000000, 126],
        [1771718400000, 127],
        [1771804800000, 128],
        [1771891200000, 126],
        [1771977600000, 125],
        [1772064000000, 125],
        [1772150400000, 124],
        [1772236800000, 122],
        [1772323200000, 122],
        [1772409600000, 120],
        [1772496000000, 119],
        [1772582400000, 117],
        [1772668800000, 119],
        [1772755200000, 119],
        [1772841600000, 120],
        [1772928000000, 120],
        [1773014400000, 120],
        [1773100800000, 118],
        [1773187200000, 116],
        [1773273600000, 116],
        [1773360000000, 119],
        [1773446400000, 118],
        [1773532800000, 116],
        [1773619200000, 116],
        [1773705600000, 116],
        [1773792000000, 115],
        [1773878400000, 115],
        [1773964800000, 113],
        [1774051200000, 113],
        [1774137600000, 112],
        [1774224000000, 113],
        [1774310400000, 114],
        [1774396800000, 116],
        [1774483200000, 114],
        [1774569600000, 112],
        [1774656000000, 110],
        [1774742400000, 109],
        [1774828800000, 109],
        [1774915200000, 109],
        [1775001600000, 109],
        [1775088000000, 107],
        [1775174400000, 108],
        [1775260800000, 109]
      ]
    }
  ],
  xaxis: {
    type: "datetime"
  },
  stroke: {
    width: 2
  },
  annotations: {
    xaxis: [
      {
        x: 1768867200000,
        borderColor: "#7c3aed",
        strokeDashArray: 3,
        label: {
          text: "v2.0",
          orientation: "horizontal",
          style: {
            background: "#7c3aed",
            color: "#fff"
          }
        },
        wcc: {
          tooltip: "v2.0: New onboarding flow"
        }
      },
      {
        x: 1771372800000,
        borderColor: "#7c3aed",
        strokeDashArray: 3,
        label: {
          text: "v2.1",
          orientation: "horizontal",
          style: {
            background: "#7c3aed",
            color: "#fff"
          }
        },
        wcc: {
          tooltip: "v2.1: Pricing page redesign"
        }
      },
      {
        x: 1773705600000,
        borderColor: "#7c3aed",
        strokeDashArray: 3,
        label: {
          text: "v2.2",
          orientation: "horizontal",
          style: {
            background: "#7c3aed",
            color: "#fff"
          }
        },
        wcc: {
          tooltip: "v2.2: Mobile app launch"
        }
      }
    ],
    points: [
      {
        x: 1772755200000,
        y: 119,
        marker: {
          size: 6,
          fillColor: "#e11d48",
          strokeColor: "#fff"
        },
        wcc: {
          tooltip: (a) => 'Outage on ' + new Date(a.x).toISOString().slice(0, 10) + ': ' + Math.round(a.y) + ' activations'
        }
      }
    ]
  },
  title: {
    text: "Activations with release markers (hover or Tab to a marker)"
  },
  theme: {
    mode: "light",
    preset: "coastal"
  }
}

const chart = new WestCoastCharts(document.querySelector('#chart'), options)
await chart.render()