// Marks (#11): a lollipop is a scalar-y series (the default dataType), so no
// range routing is needed. renderItem draws a stem from the baseline up to the
// value, capped with a circle. Each mark is tagged with its datum identity, so
// the shared tooltip, legend toggle and dataPointSelection all work for free.
ApexCharts.registerSeriesType('lollipop', {
  renderItem: function (ctx) {
    var x = ctx.x
    var y = ctx.y
    var scales = ctx.scales
    var api = ctx.api
    var color = ctx.color
    var baseline = scales.y(0)
    api.line({ x1: x, y1: baseline, x2: x, y2: y, stroke: color, width: 2 })
    api.circle({ cx: x, cy: y, r: 6, fill: color })
  },
})

var lollipopData = [
  { x: 'Jan', y: 41 },
  { x: 'Feb', y: 58 },
  { x: 'Mar', y: 45 },
  { x: 'Apr', y: 72 },
  { x: 'May', y: 68 },
  { x: 'Jun', y: 91 },
  { x: 'Jul', y: 84 },
  { x: 'Aug', y: 63 },
  { x: 'Sep', y: 49 },
  { x: 'Oct', y: 77 },
  { x: 'Nov', y: 88 },
  { x: 'Dec', y: 102 },
]

var options = {
  series: [{ name: 'Signups', data: lollipopData }],
  chart: {
    height: 440,
    type: 'lollipop',
    animations: { enabled: false },
    toolbar: { show: false },
  },
  colors: ['#775DD0'],
  grid: {
    padding: { left: 12, right: 12 },
  },
  title: {
    text: 'Monthly active signups',
    align: 'left',
  },
  subtitle: {
    text: 'A custom "lollipop" series type built with Marks (registerSeriesType)',
    align: 'left',
  },
  xaxis: {
    type: 'category',
    tooltip: { enabled: false },
  },
  yaxis: {
    min: 0,
    max: 120,
    tickAmount: 6,
  },
}

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