How to display pattern style instead of fill color for a specific cell in the React HeatMap?

The cellRender event in the React HeatMap Chart allows us to change the color of the cells. In the HeatMap cell, you can also provide an SVG pattern as a color. This section will show you how to display the SVG pattern for a specific cell in the HeatMap.

You can define the SVG pattern element to create your preferred pattern and append it to the div element holding the HeatMap component. The cellRender event is fired when the HeatMap cell is rendered. To display the pattern style in the HeatMap cell, the id attribute of the SVG pattern element must be set in this event to the cellColor property available in the event argument.

The below code example demonstrates how to display pattern style instead of fill color for a specific cell in React HeatMap Chart.

index.js

import {
  HeatMapComponent,
  Tooltip,
  Inject,
} from '@syncfusion/ej2-react-heatmap';

function Default() {
  let heatmapData = [
    [9.5, 2.2, 4.2, 8.2, 0.5],
    [4.3, 8.9, 10.8, 6.5, 5.1],
    [3.9, 2.7, 2.5, 3.7, 2.6],
  ];

  function onCellRender(args) {
    if (args.xLabel == 'India' && args.yLabel == '2010') {
      var xmlns = 'http://www.w3.org/2000/svg';
      var svgElem = document.createElementNS(xmlns, 'svg');
      var defs = document.createElementNS(xmlns, 'defs');
      var patternElement = document.createElementNS(xmlns, 'pattern');
      patternElement.setAttributeNS(null, 'id', 'lines');
      patternElement.setAttributeNS(null, 'height', '10');
      patternElement.setAttributeNS(null, 'width', '10');
      patternElement.setAttributeNS(null, 'patternUnits', 'userSpaceOnUse');

      var lineElement = document.createElementNS(xmlns, 'line');
      lineElement.setAttributeNS(null, 'x1', '0');
      lineElement.setAttributeNS(null, 'y1', '4');
      lineElement.setAttributeNS(null, 'x2', '5');
      lineElement.setAttributeNS(null, 'y2', '4');
      lineElement.setAttributeNS(null, 'stroke-width', 2);
      lineElement.setAttributeNS(null, 'stroke', 'black');
      patternElement.appendChild(lineElement);

      defs.appendChild(patternElement);
      var divElement = document.getElementsByClassName('control-pane');
      svgElem.appendChild(defs);
      divElement[0].appendChild(svgElem);
      args.cellColor = 'url(#lines)';
    }
  }

  return (
    <div className="control-pane">
      <div className="control-section">
        <HeatMapComponent
          id="heatmap"
          cellRender={onCellRender.bind(this)}
          titleSettings={{
            text: 'Sales Revenue per Employee (in 1000 US$)',
            textStyle: {
              size: '15px',
              fontWeight: '500',
              fontStyle: 'Normal',
              fontFamily: 'Segoe UI',
            },
          }}
          xAxis={{
            labels: [
              'China',
              'India',
              'Australia',
              'Mexico',
              'Canada',
              'Brazil',
            ],
          }}
          yAxis={{
            labels: [
              '2008',
              '2009',
              '2010',
              '2011',
              '2012',
              '2013',
              '2014',
              '2015',
              '2016',
              '2017',
            ],
          }}
          cellSettings={{
            showLabel: true,
            textStyle: {
              fontWeight: '600',
              size: '20px',
            },
          }}
          dataSource={heatmapData}
        >
          <Inject services={[Tooltip]} />
        </HeatMapComponent>
      </div>
    </div>
  );
}
export default Default;

The following screenshot illustrates the output of the above code snippet.

View Sample in Stackblitz

Conclusion

I hope you enjoyed learning how to display pattern style instead of fill color for a specific cell in the React HeatMap Chart.

You can refer to our React HeatMap Chart 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 React HeatMap example to understand how to create and visualize 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, support portal, or feedback portal. We are always happy to assist you!