Download Core

Column with data labels

Monthly conversion rate with labels on top of each column.

Chart type
Bar bar
Tier
Free Core
Collection
Column
Render
Live, site theme
View .md Agent setup
LIVE/column/column-with-data-labels2 of 15 in Column

Open the chart without page chrome ↗

Configuration

Raw Standalone 
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)
chart.render()