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.
Product overview: https://www.syncfusion.com/react-components/react-heatmap-chart
Tutorial video: https://www.syncfusion.com/tutorial-videos
Download example from GitHub: https://github.com/SyncfusionExamples/getting-started-with-the-react-heatmap-chart-component
Top comments (0)