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

Conclusion
I hope you enjoyed learning how to filer data for Javascript Column Chart series using a specific field.
You can refer to our Javascript Charts feature tour page to know about its other groundbreaking feature representations and Documentation, and how to quickly get started for configuration specifications. You can also explore our Javascript Charts example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac or feedback portal. We are always happy to assist you!