Salary by department

import WestCoastCharts from 'west-coast-charts'
import types from 'west-coast-charts/types'

WestCoastCharts.use(types)

const options = {
  chart: {
    height: 420,
    fontFamily: "Inter, Geist, \"IBM Plex Sans\", system-ui, sans-serif",
    type: "beeswarm",
    toolbar: {
      show: false
    }
  },
  series: [
    {
      name: "Salary",
      data: [
        {
          x: "Support",
          y: [42000, 37000, 38000, 55000, 40000, 53000, 54000, 56000, 40000, 55000, 45000, 68000, 37000, 48000, 43000, 46000, 53000, 46000, 44000, 39000, 50000, 51000, 38000, 56000, 48000, 57000, 42000, 51000, 51000, 54000, 47000, 50000, 48000, 50000, 46000, 37000, 57000, 50000, 47000, 37000, 58000, 46000, 50000, 43000, 46000, 50000, 47000, 54000, 53000, 45000, 45000, 61000, 47000, 39000, 42000, 52000, 38000, 53000, 40000, 55000]
        },
        {
          x: "Marketing",
          y: [66000, 48000, 53000, 89000, 57000, 73000, 39000, 34000, 61000, 61000, 65000, 66000, 61000, 65000, 76000, 63000, 69000, 75000, 72000, 65000, 44000, 69000, 44000, 60000, 76000, 51000, 64000, 45000, 60000, 76000, 60000, 57000, 51000, 55000, 67000, 47000, 56000, 69000, 56000, 45000, 64000, 57000, 85000, 64000, 73000, 57000, 49000, 60000, 54000, 71000, 54000, 49000, 50000, 51000, 61000, 52000, 61000, 64000, 62000, 51000]
        },
        {
          x: "Sales",
          y: [64000, 83000, 78000, 71000, 71000, 62000, 81000, 67000, 67000, 47000, 61000, 67000, 56000, 49000, 86000, 76000, 59000, 73000, 61000, 75000, 83000, 45000, 62000, 70000, 83000, 72000, 68000, 64000, 64000, 76000, 71000, 79000, 74000, 53000, 68000, 74000, 51000, 71000, 69000, 70000, 60000, 60000, 74000, 78000, 66000, 81000, 78000, 95000, 70000, 98000, 52000, 82000, 73000, 65000, 81000, 66000, 61000, 91000, 50000, 84000]
        },
        {
          x: "Engineering",
          y: [78000, 71000, 63000, 108000, 75000, 84000, 57000, 87000, 82000, 77000, 91000, 94000, 99000, 95000, 61000, 63000, 88000, 84000, 89000, 69000, 60000, 78000, 86000, 74000, 83000, 87000, 90000, 99000, 91000, 79000, 70000, 87000, 93000, 106000, 87000, 78000, 65000, 72000, 97000, 92000, 81000, 68000, 89000, 85000, 92000, 77000, 74000, 89000, 73000, 97000, 83000, 107000, 101000, 72000, 82000, 83000, 84000, 91000, 64000, 97000]
        },
        {
          x: "Legal",
          y: [64000, 95000, 84000, 90000, 104000, 92000, 125000, 127000, 101000, 109000, 83000, 89000, 111000, 97000, 92000, 93000, 89000, 90000, 90000, 98000, 81000, 90000, 115000, 92000, 82000, 95000, 67000, 66000, 75000, 72000, 90000, 103000, 117000, 117000, 81000, 88000, 126000, 106000, 79000, 94000, 88000, 89000, 92000, 101000, 107000, 96000, 90000, 89000, 104000, 69000, 116000, 115000, 83000, 86000, 105000, 97000, 67000, 81000, 89000, 104000]
        }
      ]
    }
  ],
  plotOptions: {
    bar: {
      horizontal: true
    },
    beeswarm: {
      colorScale: {
        colors: ["#93c5fd", "#2563eb", "#1e3a8a"]
      }
    }
  },
  xaxis: {
    labels: {
      formatter: (v) => {
    if (v == null || isNaN(v)) return '–'
    const a = Math.abs(v), s = v < 0 ? '\u2212' : ''
    if (a >= 1e9) return s + '€' + (Math.round((a / 1e9) * 10) / 10) + 'B'
    if (a >= 1e6) return s + '€' + (Math.round((a / 1e6) * 10) / 10) + 'M'
    if (a >= 1e4) return s + '€' + (Math.round((a / 1e3) * 10) / 10) + 'k'
    return s + '€' + Math.round(a).toLocaleString('en')
  }
    }
  },
  title: {
    text: "Salary by department"
  },
  theme: {
    mode: "light",
    preset: "coastal"
  }
}

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