Download Core

Bar with image fill

Bars filled with generated texture images (our own SVG tiles).

Chart type
Bar bar
Tier
Free Core
Collection
Bar
Render
Live, site theme
View .md Agent setup
LIVE/bar/bar-with-images9 of 12 in Bar

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: "Harvest t",
      data: [62, 48, 35, 22]
    }
  ],
  xaxis: {
    categories: ["Apples", "Pears", "Plums", "Cherries"]
  },
  plotOptions: {
    bar: {
      horizontal: true,
      barHeight: "70%",
      distributed: true,
      borderRadius: 4
    }
  },
  fill: {
    type: "image",
    opacity: 0.95,
    image: {
      src: ["data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Crect%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22%2316a34a%22%2F%3E%3Cpath%20d%3D%22M0%2024L24%200M-6%206L6%20-6M18%2030L30%2018%22%20stroke%3D%22%234ade80%22%20stroke-width%3D%225%22%2F%3E%3C%2Fsvg%3E", "data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Crect%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22%23ca8a04%22%2F%3E%3Cpath%20d%3D%22M0%2024L24%200M-6%206L6%20-6M18%2030L30%2018%22%20stroke%3D%22%23fde047%22%20stroke-width%3D%225%22%2F%3E%3C%2Fsvg%3E", "data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Crect%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22%237c3aed%22%2F%3E%3Cpath%20d%3D%22M0%2024L24%200M-6%206L6%20-6M18%2030L30%2018%22%20stroke%3D%22%23c4b5fd%22%20stroke-width%3D%225%22%2F%3E%3C%2Fsvg%3E", "data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Crect%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22%23e11d48%22%2F%3E%3Cpath%20d%3D%22M0%2024L24%200M-6%206L6%20-6M18%2030L30%2018%22%20stroke%3D%22%23fda4af%22%20stroke-width%3D%225%22%2F%3E%3C%2Fsvg%3E"],
      width: 24,
      height: 24
    }
  },
  legend: {
    show: false
  },
  dataLabels: {
    enabled: true,
    style: {
      colors: ["#fff"]
    }
  },
  title: {
    text: "Orchard harvest"
  },
  theme: {
    mode: "light",
    preset: "coastal"
  }
}

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