Getting Started with the React HeatMap Chart Component

Learn how to create and configure the Syncfusion React HeatMap Chart component in a React application using Visual Studio Code. The React HeatMap Chart is a graphical representation of two-dimensional data where the values are represented with gradient or solid color variations.

The data points are rendered as HeatMap cells using Scalable Vector Graphics (SVG) or canvas UI rendering. It displays simple or large matrix data graphically through color variations in SVG or canvas and analyze data pattern of the subject quickly with multiple views such as rectangle, bubble, calendar, and sector heatmaps.

In this video, you will learn how to configure the heatmap chart component with a few of its basic features like data points, bubbles, axes, color palettes, dimensions, and tooltips.

The bubble HeatMap Chart or the matrix bubble chart, visualizes data using variations in bubble attributes such as size, color, and sector. Populate data in the HeatMap Chart using different axis types: numeric, category, and date-time. You can achieve RTL layout by reversing the axis labels. This swaps the higher and lower ranges of an axis. Customize the default color settings of the HeatMap cells with gradient or solid custom colors. You can handle missed or undefined data values with empty data points. Display additional information for the data points with tooltips on mouse hover.

Tutorial video: https://www.syncfusion.com/tutorial-videos

Download example from GitHub:
https://github.com/SyncfusionExamples/getting-started-with-the-react-heatmap-chart-component

TRIAL LICENSE KEY
--------------------- 
If you need a trial license key, start your React trial from https://www.syncfusion.com/account/manage-trials/start-trials under your Syncfusion account. Then you can obtain your trial license key from the downloads page.

Check if you are eligible for a free license for all Syncfusion products on our Community License page.
https://www.syncfusion.com/products/communitylicense

BOOKMARK DETAILS
--------------------- 
[00:00] Introduction
[00:46] Create a React application
[01:26] Add the Heatmap chart component
[04:06] Add a title
[04:28] Axis
[05:32] Palette
[06:30] Bubble heat map
[08:20] Dimensions
[09:20] Add a tooltip

REACT HEATMAP CHART
---------------------
Product overview: https://www.syncfusion.com/react-components/react-heatmap-chart
Examples: https://ej2.syncfusion.com/react/demos/#/material/heatmap-chart/default
Documentation: https://ej2.syncfusion.com/react/documentation/heatmap-chart/getting-started
Download free trial: https://www.syncfusion.com/downloads/react/confirm
NuGet package: https://www.npmjs.com/package/@syncfusion/ej2-react-heatmap

SUBSCRIBE
-------------- 
Syncfusion on YouTube: http://bit.ly/syncfusionyoutube 
Sign up to receive email updates: http://bit.ly/syncfusionemail 

SOCIAL COMMUNITY
-----------------------------
Facebook: https://www.facebook.com/Syncfusion/ 
Twitter: https://twitter.com/Syncfusion 
LinkedIn: https://www.linkedin.com/company/syncfusion/
Instagram: http://instagram.com/syncfusionofficial

#react #heatmap #heatmapchart