Säule mit Datenbeschriftungen

import WestCoastCharts from 'west-coast-charts'

const options = {
  chart: {
    height: 380,
    fontFamily: "Inter, Geist, \"IBM Plex Sans\", system-ui, sans-serif",
    type: "bar",
    toolbar: {
      show: false
    }
  },
  series: [
    {
      name: "Conversion",
      data: [3.1, 3.4, 3.7, 3.9, 4.2, 4, 3.9, 4.1, 4.1, 4, 3.9, 4.2]
    }
  ],
  xaxis: {
    categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
  },
  plotOptions: {
    bar: {
      borderRadius: 4,
      dataLabels: {
        position: "top"
      }
    }
  },
  dataLabels: {
    enabled: true,
    offsetY: -18,
    formatter: (v) => v + '%',
    style: {
      colors: ["#64748b"]
    }
  },
  yaxis: {
    labels: {
      formatter: (v) => v + '%'
    }
  },
  title: {
    text: "Checkout conversion rate"
  },
  theme: {
    mode: "light",
    preset: "coastal"
  }
}

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