Syncfusion Feedback
Choose Framework
Controls
  • Grids
    • Data Grid
    • Pivot Table
    • Tree Grid
    • Spreadsheet
  • Data Visualization
    • Chart
    • Bullet Chart
    • Kanban Board
    • Range Selector
    • Sparkline Charts
    • HeatMap Chart
    • TreeMap
    • Circular Gauge
    • Stock Chart
    • Linear Gauge
    • Smith Chart
    • Maps
    • Diagram
    • 3D Circular Charts
    • 3D Charts
    • Barcode Generator
  • Editors
    • Word Processor
    • Rich Text Editor
    • Image Editor
  • Buttons
    • Button
    • Progress Button
    • Chips
  • Calendars
    • Scheduler
    • Gantt Chart
    • Calendar
    • DatePicker
    • DateRangePicker
    • DateTime Picker
    • TimePicker
  • Dropdowns
    • ComboBox
    • AutoComplete
    • Dropdown List
    • MultiSelect Dropdown
    • ListBox
    • Mention
    • Dropdown Tree
  • Navigation
    • Carousel
    • TreeView
    • File Manager
    • Toolbar
    • Menu Bar
    • Breadcrumb
    • Accordion
    • Context Menu
    • Tabs
    • Sidebar
    • Stepper
    • AppBar
  • Inputs
    • File Upload
    • Signature
    • Color Picker
    • Input Mask
    • TextBox
    • Numeric Textbox
    • Slider
    • Radio Button & Checkbox
    • Toggle Switch Button
    • Rating
    • TextArea
    • OTP Input
  • Layout
    • ListView
    • Splitter
    • Dialog
    • Dashboard Layout
    • Card
    • Tooltip
    • Timeline
    • Avatar
  • Notifications
    • Message
    • ProgressBar
    • Skeleton
    • Toast
    • Badge
  • Forms
    • Query Builder
  • File Viewers & Editors
    • PDF Viewer
    • In-place Editor
  • Interactive Chat
    • AI AssistView
  • Smart Components
    • Smart Paste Button

React HeatMap Chart - Tutorial Videos

Go Back
thumbnail image

Watch video

Getting Started with the React HeatMap Chart Component

Learn how to create and configure the Syncfusion React HeatMap Chart component in a React application. The React HeatMap Chart is a graphical representation of two-dimensional data where the values are represented with gradient or solid color variations. In this video, you will learn 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.

Download Example: Getting Started with the React HeatMap Chart

Topics included
1. Introduction 00:00 min
2. Create a React application 00:46 min
3. Add the Heatmap chart component 01:26 min
4. Add a title 04:06 min
5. Axis 04:28 min
6. Palette 05:32 min
7. Bubble HeatMap 06:30 min
8. Dimensions 08:20 min
9. Add a tooltip 09:20 min
Plaform: React Show more
thumbnail image

Watch video

How to Bind Data to the React HeatMap Chart Component

Learn how easily you can bind data to the Syncfusion React HeatMap Chart component in a React application. In this video you will learn how to bind a two-dimensional array data and JSON data to the HeatMap Chart component using cell binding and row binding methods.

Download Example: How to Bind Data to the React HeatMap Chart

Topics included
1. Introduction 00:00 min
2. Overview of the app 00:16 min
3. Bind array data using the cell binding method 01:06 min
4. Bind JSON data using the cell binding method 02:47 min
5. Bind JSON data using the row binding method 04:07 min
Plaform: React Show more
Chat with us