Download Core

Custom angle

A 270° sweep with the legend beside the ring starts.

Chart type
Radial Bar radialBar
Tier
Free Core
Collection
Radial bar
Render
Live, site theme
View .md Agent setup
LIVE/radialbar/circle-custom-angle3 of 7 in Radial bar

Open the chart without page chrome ↗

Configuration

Raw Standalone 
const options = {
  chart: {
    height: 360,
    fontFamily: "Inter, Geist, \"IBM Plex Sans\", system-ui, sans-serif",
    type: "radialBar",
    toolbar: {
      show: false
    }
  },
  series: [76, 61, 44, 29],
  labels: ["Email", "Push", "SMS", "In-app"],
  plotOptions: {
    radialBar: {
      startAngle: 0,
      endAngle: 270,
      hollow: {
        size: "30%"
      },
      dataLabels: {
        name: {
          show: false
        },
        value: {
          show: false
        }
      }
    }
  },
  legend: {
    show: true,
    floating: true,
    position: "left",
    offsetX: 10,
    offsetY: 10,
    formatter: (n, o) => n + ': ' + o.w.globals.series[o.seriesIndex] + '%'
  },
  theme: {
    mode: "light",
    preset: "coastal"
  }
}

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