Image Fill

Want to get creative? Fill paths with images instead of plain colors.

Using images as Fills

Filling paths with images can be done by configuring fill.image property.

fill: {
  type: 'image',
  image: {
    src: ['/path/to/image1.png', 'path/to/image2.jpg'],
    width: undefined,  // optional
    height: undefined  //optional
  }
}

---

External URL vs relative path

In server-side rendering environments such as Next.js or Nuxt, use absolute URLs (https://...) for image sources. Relative paths are resolved relative to the page URL, which differs between the server render and client hydration steps and can result in broken images.

fill: {
  type: 'image',
  image: {
    src: [
      'https://example.com/assets/texture-a.png',
      'https://example.com/assets/texture-b.png'
    ]
  }
}

When deploying to a known domain, you can also construct the absolute URL dynamically:

const base = typeof window !== 'undefined' ? window.location.origin : 'https://example.com'

fill: {
  type: 'image',
  image: {
    src: [`${base}/img/texture.png`]
  }
}

---

Width and height

When width and height are omitted, the image is stretched to fill the entire bar or area. Setting explicit pixel values causes the image to tile (repeat) at that size, which works well for seamless texture images.

var options = {
  chart: {
    type: 'bar'
  },
  series: [{
    name: 'Downloads',
    data: [44, 55, 41, 67, 22, 43]
  }],
  xaxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
  },
  fill: {
    type: 'image',
    image: {
      src: ['https://example.com/img/pattern-tile.png'],
      width: 40,
      height: 40
    }
  }
}

var chart = new ApexCharts(document.querySelector('#chart'), options)
chart.render()

A tile size of 30-50 px works well for most bar widths. Very small tiles (under 10 px) may look noisy; very large tiles may not repeat at all.

---

Multiple images per series

Pass an array of image URLs to src, one entry per series. Each series gets its own distinct image fill.

var options = {
  chart: {
    type: 'bar'
  },
  series: [
    { name: 'Cats', data: [44, 55, 41] },
    { name: 'Dogs', data: [13, 23, 20] },
    { name: 'Birds', data: [11, 17, 15] }
  ],
  xaxis: {
    categories: ['Group A', 'Group B', 'Group C']
  },
  fill: {
    type: 'image',
    image: {
      src: [
        '/img/cat.png',
        '/img/dog.png',
        '/img/bird.png'
      ]
    }
  }
}

var chart = new ApexCharts(document.querySelector('#chart'), options)
chart.render()

The array length should match the number of series. If the array is shorter than the series count, remaining series fall back to a solid color.

---

Mixing fill types across series

To use image fill on one series and a solid color on another, set type as an array with one value per series. Provide an empty string for the src of any series that does not use an image fill.

var options = {
  chart: {
    type: 'bar'
  },
  series: [
    { name: 'Textured', data: [44, 55, 41, 67] },
    { name: 'Solid', data: [13, 23, 20, 8] }
  ],
  xaxis: {
    categories: ['Q1', 'Q2', 'Q3', 'Q4']
  },
  fill: {
    type: ['image', 'solid'],
    image: {
      src: ['/img/texture.png', '']
    }
  }
}

var chart = new ApexCharts(document.querySelector('#chart'), options)
chart.render()

The second series uses 'solid' and ignores its src entry entirely. You can also mix 'gradient' and 'image' the same way.

---

See the full configuration reference at fill.image.