Download Core

Image markers

Scatter points drawn as our own generated icon images.

Chart type
Scatter scatter
Tier
Free Core
Collection
Scatter
Render
Live, site theme
View .md Agent setup
LIVE/scatter/scatter-images3 of 5 in Scatter

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: "scatter",
    toolbar: {
      show: false
    }
  },
  series: [
    {
      name: "Video",
      data: [
        [12, 56],
        [4, 90],
        [20, 86],
        [12, 33],
        [9, 31],
        [2, 33],
        [16, 64],
        [8, 53],
        [14, 14],
        [1, 27],
        [15, 40],
        [17, 66]
      ]
    },
    {
      name: "Podcast",
      data: [
        [27, 49],
        [9, 74],
        [21, 46],
        [18, 62],
        [11, 73],
        [10, 70],
        [3, 34],
        [22, 86],
        [4, 52],
        [15, 10],
        [9, 68],
        [17, 75]
      ]
    }
  ],
  fill: {
    type: "image",
    opacity: 1,
    image: {
      src: ["data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2215%22%20fill%3D%22%23e11d48%22%2F%3E%3Ctext%20x%3D%2216%22%20y%3D%2221%22%20font-family%3D%22sans-serif%22%20font-size%3D%2214%22%20font-weight%3D%22700%22%20text-anchor%3D%22middle%22%20fill%3D%22%23fff%22%3E%E2%96%B6%3C%2Ftext%3E%3C%2Fsvg%3E", "data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2215%22%20fill%3D%22%237c3aed%22%2F%3E%3Ctext%20x%3D%2216%22%20y%3D%2221%22%20font-family%3D%22sans-serif%22%20font-size%3D%2214%22%20font-weight%3D%22700%22%20text-anchor%3D%22middle%22%20fill%3D%22%23fff%22%3E%E2%99%AA%3C%2Ftext%3E%3C%2Fsvg%3E"],
      width: 28,
      height: 28
    }
  },
  markers: {
    size: 14
  },
  legend: {
    markers: {
      size: 7
    }
  },
  xaxis: {
    tickAmount: 6,
    title: {
      text: "Day"
    }
  },
  yaxis: {
    title: {
      text: "Engagement"
    }
  },
  title: {
    text: "Content engagement by format"
  },
  theme: {
    mode: "light",
    preset: "coastal"
  }
}

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