Patterns

Using patterns can help to distinguish data and give a classic look to the charts.

Using patterns as Fill

Patterns can be applied by configuring fill.pattern property.

fill: {
  type: 'pattern',
  pattern: {
    style: 'verticalLines',
    width: 6,
    height: 6,
    strokeWidth: 2
  }
}

To view the list of all available patterns, checkout the pattern configuration

---

All available pattern styles

ApexCharts includes six built-in pattern styles:

Style name	Description
'verticalLines'	Evenly spaced vertical stripes
'horizontalLines'	Evenly spaced horizontal stripes
'slantedLines'	Diagonal stripes at 45 degrees
'squares'	A grid of small squares
'circles'	A repeating pattern of circles
'diamonds'	A repeating pattern of diamonds

Each style can be sized with width and height (tile dimensions in pixels) and strokeWidth (line thickness in pixels).

---

When to use patterns

Patterns are useful in situations where color alone cannot distinguish series:

• Print-friendly charts where color may not reproduce reliably.
• Accessibility for users with color vision deficiencies, since patterns provide a secondary visual channel independent of hue.
• Black-and-white reports where the chart is exported or screenshotted in grayscale.

Patterns work well on bar and column charts where each series fills a clearly bounded area.

---

Multi-series patterns

To assign a different pattern to each series, pass style as an array with one value per series. The example below applies three distinct patterns to a three-series bar chart:

var options = {
  chart: {
    type: 'bar'
  },
  series: [
    { name: 'Category A', data: [44, 55, 41, 67] },
    { name: 'Category B', data: [13, 23, 20, 8] },
    { name: 'Category C', data: [11, 17, 15, 15] }
  ],
  xaxis: {
    categories: ['Q1', 'Q2', 'Q3', 'Q4']
  },
  fill: {
    type: 'pattern',
    pattern: {
      style: ['verticalLines', 'squares', 'circles'],
      width: 6,
      height: 6,
      strokeWidth: 2
    }
  }
}

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

The array length must match the number of series. width, height, and strokeWidth apply to all patterns equally; they cannot be set per-series.

---

See the full configuration reference at fill.pattern.