How to fill the JavaScript Column Charts with different patterns?

Description

This article explains how to apply different fill patterns to each column in a JavaScript Column Chart using SVG patterns and the pointColorMapping feature in Syncfusion Charts.

Solution

Patterns are graphical designs (such as diagonal lines, circles, dots, or grids) that enhance chart readability. You can use SVG definitions and assign unique pattern IDs to your chart data. Then, bind those IDs to the pointColorMapping property in the chart’s series to apply different patterns to each column.

You can assign an id to each pattern and then set that id to one of the properties in the dataSource. Afterwards, you can bind that property to the pointColorMapping property to display the column chart with different patterns applied.

<!-- SVG Pattern Definitions -->
<svg width="0" height="0" style="position:absolute">
  <defs>
    <pattern id="diagonalForward" patternUnits="userSpaceOnUse" width="6" height="6">
      <rect width="6" height="6" fill="red" />
      <path d="M 0 6 L 6 0" stroke="white" stroke-width="1" />
    </pattern>
    <pattern id="circle" patternUnits="userSpaceOnUse" width="6" height="6">
      <rect width="6" height="6" fill="blue" />
      <circle cx="3" cy="3" r="2" fill="white" />
    </pattern>
    <pattern id="lines" patternUnits="userSpaceOnUse" width="6" height="6">
      <rect width="6" height="6" fill="green" />
      <path d="M 0 0 L 0 6" stroke="white" stroke-width="1" />
    </pattern>
    <pattern id="dots" patternUnits="userSpaceOnUse" width="6" height="6">
      <rect width="6" height="6" fill="orange" />
      <circle cx="3" cy="3" r="1" fill="white" />
    </pattern>
    <pattern id="grid" patternUnits="userSpaceOnUse" width="6" height="6">
      <rect width="6" height="6" fill="purple" />
      <path d="M 0 0 L 6 0 M 0 0 L 0 6" stroke="white" stroke-width="1" />
    </pattern>
  </defs>
</svg>

var chart = new ej.charts.Chart({ 
    series: [{
        type: 'Column',
        xName: 'x',
        yName: 'y',
        pointColorMapping: 'pattern',
        dataSource: [
              { x: 'Japan', y: 1.71, pattern: 'url(#diagonalForward)' },
              { x: 'France', y: 1.82, pattern: 'url(#circle)' },
              { x: 'India', y: 6.68, pattern: 'url(#lines)' },
              { x: 'Germany', y: 2.22, pattern: 'url(#dots)' },
              { x: 'Italy', y: 1.5, pattern: 'url(#grid)' },
              { x: 'Canada', y: 3.05, pattern: 'url(#circle)' },
           ],
        name: 'GDP'
      }]
});
chart.appendTo('#column-container');     

Screenshot

Live Sample

View Sample in Stackblitz