Download Core

Ring with icon

Our own icon in the centre of the ring.

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

Open the chart without page chrome ↗

Configuration

Raw Standalone 
const options = {
  chart: {
    height: 340,
    fontFamily: "Inter, Geist, \"IBM Plex Sans\", system-ui, sans-serif",
    type: "radialBar",
    toolbar: {
      show: false
    }
  },
  series: [81],
  labels: ["Hydration"],
  plotOptions: {
    radialBar: {
      hollow: {
        size: "58%",
        image: "data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2264%22%20height%3D%2264%22%3E%3Cpath%20fill%3D%22%230ea5e9%22%20d%3D%22M12%202.5c3.8%205%206.6%208.6%206.6%2012a6.6%206.6%200%200%201-13.2%200c0-3.4%202.8-7%206.6-12Z%22%2F%3E%3C%2Fsvg%3E",
        imageWidth: 64,
        imageHeight: 64,
        imageClipped: false
      },
      dataLabels: {
        name: {
          show: false
        },
        value: {
          show: false
        }
      }
    }
  },
  colors: ["#0ea5e9"],
  theme: {
    mode: "light",
    preset: "coastal"
  }
}

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