Download Core

Rounded, spaced

Segments with parallel gaps and rounded corners (pie wcc.segmentGap / segmentRadius).

Chart type
Donut donut
Tier
Free Core
Collection
Pie & donut
Render
Live, site theme
View .md Agent setup
LIVE/pie/rounded-spaced4 of 10 in Pie

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: "donut",
    toolbar: {
      show: false
    }
  },
  series: [35, 25, 20, 12, 8],
  labels: ["North", "South", "East", "West", "Central"],
  stroke: {
    width: 0
  },
  plotOptions: {
    pie: {
      donut: {
        size: "70%"
      },
      wcc: {
        segmentGap: 4,
        segmentRadius: 6
      }
    }
  },
  title: {
    text: "Revenue share by region"
  },
  theme: {
    mode: "light",
    preset: "coastal"
  }
}

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