Lines in JavaScript

// Shared by the vanilla-js, React and Vue builds.
//
// Orders per month by store (the wholes), and the orders that came from one
// kind of customer (the parts). Picking a customer keeps both stores on the
// chart: each line is drawn dashed at its full value, with that customer's
// orders solid in the same colour, on the same axis.
var MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']
var STORES = ['Online store', 'Retail']
var ORDERS = [
  [420, 460, 510, 480, 560, 610, 590, 650],
  [300, 320, 310, 340, 360, 330, 380, 400],
]
var CUSTOMERS = {
  returning: [
    [250, 270, 300, 290, 340, 370, 360, 400],
    [210, 220, 215, 240, 250, 230, 260, 280],
  ],
  first: [
    [170, 190, 210, 190, 220, 240, 230, 250],
    [90, 100, 95, 100, 110, 100, 120, 120],
  ],
}

function seriesFor(customer) {
  return STORES.map(function (name, i) {
    var s = { name: name, data: ORDERS[i] }
    if (customer) s.highlightData = CUSTOMERS[customer][i]
    return s
  })
}

// One call per pick: the parts go in, the chart animates from what is on
// screen. Clearing is the same call without them.
function pickCustomer(chart, customer) {
  document.querySelectorAll('[data-customer]').forEach(function (b) {
    b.classList.toggle('active', b.getAttribute('data-customer') === customer)
  })
  return chart.updateSeries(seriesFor(customer))
}

function wireCustomers(chart) {
  document.querySelectorAll('[data-customer]').forEach(function (b) {
    b.addEventListener('click', function () {
      pickCustomer(chart, b.getAttribute('data-customer'))
    })
  })
}

var options = {
  series: seriesFor('returning'),
  chart: {
    id: 'orders',
    type: 'line',
    height: 380,
    toolbar: { show: false },
  },
  colors: ['#0f766e', '#ea580c'],
  stroke: { curve: 'smooth', width: 3 },
  markers: { size: 4, strokeWidth: 0, hover: { size: 6 } },
  dataLabels: {
    enabled: true,
    style: { fontSize: '11px' },
    background: { enabled: true, borderWidth: 0, opacity: 0.85 },
  },
  xaxis: { categories: MONTHS },
  yaxis: { min: 0, title: { text: 'Orders' } },
  highlightFilter: { line: { dashArray: 5 } },
  legend: { position: 'bottom' },
  tooltip: { shared: true, intersect: false },
}

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

wireCustomers(chart)