Download Core

Ring stem

Stems topped with hollow rings, here horizontal (bar wcc.mark: ringStem).

Chart type
Bar bar
Tier
Free Core
Collection
Custom series
Render
Live, site theme
View .md Agent setup
LIVE/custom-series/ring-stem3 of 3 in Custom series

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: "Signups (k)",
      data: [50, 49, 60, 68, 51, 53, 20, 74, 47, 76]
    }
  ],
  xaxis: {
    categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct"]
  },
  plotOptions: {
    bar: {
      horizontal: true,
      wcc: {
        mark: "ringStem",
        stemWidth: 3,
        headRadius: 7
      }
    }
  },
  dataLabels: {
    enabled: false
  },
  colors: ["#7c3aed"],
  title: {
    text: "Monthly signups (k)"
  },
  theme: {
    mode: "light",
    preset: "coastal"
  }
}

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