Example of Tooltip Template in Angular HeatMap Chart Component

undefined
Crude Oil Production of Non-OPEC Countries (in Million barrels per day)CanadaChinaEgyptMexicoNorwayRussiaUKUSA20002001200220032004200520062007200820090.56 M1.23 M2.74 M2.61 M1.87 M4.07 M5.47 M9.69 M0.58 M1.32 M2.57 M2.64 M2.06 M3.79 M5.35 M9.49 M0.56 M1.39 M2.57 M2.83 M2.18 M3.79 M5 M9.35 M0.53 M1.49 M2.62 M3.14 M2.27 M3.73 M5.07 M9.43 M0.53 M1.49 M2.52 M3.34 M2.49 M3.67 M5.08 M9.24 M0.72 M1.64 M2.36 M3.42 M2.69 M3.6 M5.18 M9.04 M0.67 M1.84 M2.39 M3.47 M2.95 M3.48 M5.44 M8.8 M0.71 M2.09 M2.3 M3.45 M3.04 M3.4 M5.64 M8.13 M0.71 M2.29 M2.17 M3.26 M3.13 M3.39 M5.74 M7.4 M0.72 M2.28 M2.02 M3.21 M3.22 M3.3 M5.8 M6.91 M

This sample visualizes the crude oil production of the non-OPEC countries over the years. The data point values displayed are in million barrels per day units.

In this example, you can see how to customize the tooltip content in the HeatMap. You can customize the tooltip content by using the template property.

The tooltip is enabled in this example. To see the tooltip in action, hover the mouse over an item or tap an item on touch-enabled devices.


Injecting Module


Heatmap component features are separated into discrete feature-based modules. To use a tooltip, inject the Tooltip module using the Heatmap.Inject(Tooltip) method, and to use a legend, inject the Legend module using the Heatmap.Inject(Legend) method.