Toggle navigation Highcharts
  • About Us
    • About Us
    • Job Openings
    • Contact Us
    • News
    • Resellers
  • Home
  • Products
    • Highcharts
    • Highstock
    • Highmaps
    • Mobile
    • Highcharts Cloud
    • Highcharts Editor
    • Wrappers
    • Plugins
  • Demo
    • Highcharts demos
    • Highstock demos
    • Highmaps demo
  • Docs
    • General Documentation
    • API Reference
    • Changelog
    • Roadmap
  • Support
    • Support
    • Download
  • Blog
  • Community
    • Customer Showcase
    • Chart Code Showcase
    • Contribute
  • Buy
  • About Us
    • About Us
    • Job Openings
    • Contact Us
    • News
    • Resellers
Back to docs
  • Getting Started
    • System requirements
    • Installation
    • Install from npm
    • Install from Bower
    • Your first chart
    • How to set options
    • Frequently asked questions
    • How to create custom Highcharts files
    • Optional Dependencies
    • Compatibility
  • Chart concepts
    • Understanding Highcharts
    • Understanding Highstock
    • Title and subtitle
    • Axes
    • Series
    • Tooltip
    • Legend
    • Range selector
    • Navigator
    • Scrollbar
    • Plot bands and plot lines
    • Zooming
    • Labels and string formatting
    • Drilldown
    • 3D charts
    • Accessibility
    • Responsive
  • Maps
    • Getting started
    • Map navigation
    • Color axis
    • Map collection
    • Custom maps
    • Custom GeoJSON maps
    • Adding points and lines
    • Latitude/longitude
  • Chart and series types
    • Chart types
    • Combining chart types
    • Angular gauges
    • Area chart
    • Areaspline chart
    • Axis resizer
    • Bar chart
    • Bell curve series
    • Box plot series
    • Bullet chart
    • Candlestick chart
    • Column chart
    • Error bar series
    • Flag series
    • Funnel series
    • Heat map series
    • Histogram Series
    • Line chart
    • OHLC chart
    • Parallel Coordinates Chart
    • Pareto Chart
    • Pie chart
    • Polar chart
    • Range series
    • Sankey diagram
    • Scatter chart
    • Spline chart
    • Stream graph
    • Sunburst series
    • Technical Indicator Series
    • Tilemap Series
    • Treemap
    • Variable Radius Pie chart
    • Variwide chart
    • Vector plot
    • Waterfall series
    • Wind barbs series
    • Word Cloud series
    • X-range series
  • Advanced chart features
    • Annotations module
    • Annotations and Fibonacci Retracements
    • Boost module
    • Custom technical indicators
    • Data grouping
    • Freeform drawing
    • Internationalization
    • Stacking charts
  • Export module
    • Export module overview
    • Client side export
    • Setting up your own server
    • Command Line Rendering
    • Terms
  • Working with data
    • Data intro
    • Data module
    • Custom preprocessing
    • Live data
    • Data from a database
    • Getting data across domains (JSONP)
  • Chart design and style
    • Design and style
    • Colors
    • Themes
    • Styled mode
    • Custom themes in Styled Mode
    • Gradients, shadows and patterns
  • Extending Highcharts
    • Extending Highcharts

Heat map series

by Torstein Hønsi

A heat map is a graphical representation of data where the individual values contained in a matrix are represented as colors.

Setting up the heat map series

Heat maps require the modules/heatmap.js file to be loaded.

The heat map series is defined by setting the type to heatmap. A heat map has an X and Y axis like any cartesian series. The point definitions however, take three values, x, y as well as value, which serves as the value for color coding the point. These values can also be given as an array of three numbers.

The color axis

Heat maps borrow a central concept from Highmaps, the color axis. See the docs article on color axis for details

Resources

See the featured demos at Heat map and Large heatmap. The latter demonstrates how a HTML5 canvas can be plugged in to optimize rendering times.

See heatmap in the Highmaps docs.

© 2018 Highcharts. All rights reserved.