Help Center/ Huawei Cloud Astro Canvas/ User Guide/ Widgets/ Charts/ Heat Map
Updated on 2025-03-24 GMT+08:00
View PDF
Share

Heat Map

The heat map is a type of bar chart that displays data statistics using different color blocks.

On the large screen design page, drag the heat map widget from All > Chart to the blank area of the canvas, as shown in Figure 1.

Figure 1 Heat Map
Figure 2 Margin style

Card

A card wraps a chart widget. A widget consists of card elements (card title, chart, card background, and card border) and chart elements.

Figure 3 Heat map card
  • Card style: You can select a card style based on your service requirements. You can click the clear style button to clear the configured style.
  • Title
    • Title: Whether to display the widget title.
    • Content: Widget title.
    • Font: Font, size, and color of the title.
    • Align: Alignment mode of the title relative to the widget.
    • Background color: Background color of the title.
  • Background
    • Background color: Background color of the widget.
    • Border: Border of the widget card. Options: no border, full border, and corner border. For full border and corner border, you can set the line type and rounded corners of the outer border of the widget.
    • Style: Image display style. The options are normal, center, stretch, and tiled.
    • Choose image: Use a local image as the widget background. Directories and subdirectories can be added to facilitate image management by category. JPG, JPEG, PNG, and GIF images are recommended. Each image cannot exceed 50 MB.
  • Special effect: Widget highlighted status. Displayed by default or on page load.
  • Padding: Distance between the chart in the widget and the four sides (top, bottom, left, and right) of the widget (see Figure 2). The default value is 0, indicating that the chart is stretched across the widget.
  • Round corner: Round corners of the border. The radian of the four corners ranges from 0 to 500, in pixels.
  • Chart background: Background color of the chart.

Graphic

A graphic is a specific graphical expression element that visualizes data in a widget, for example, a slice in a pie chart, a bar in a bar chart, a line or a kink point in a line chart.

Figure 4 Heat map graphic
  • Color: Color of the graphic.
  • Heat map color

    In the color settings, you can change the heat map colors or click Add Color Settings to add a color block.

  • Heap map colors

    Data range of color display. You need to set the maximum and minimum values.

  • Heat map marker

    Indicates whether to display markers. If markers will be displayed, you need to set the font, font color, and font size.

Legend

A legend shows the dimensions in a multi-dimensional visualized graphic expression.

Figure 5 Heat map Legend
  • Legend display: Whether to display the legend.
  • Location selection: Position of the legend.
  • Top gap: Spacing between the legend and the top of the widget.
  • Bottom gap: Spacing between the legend and the bottom of the widget.
  • Drag handle: Whether to display the drag handle on the legend.
  • Legend width: Width of the legend.
  • Legend height: Height of the legend.
  • Hover Link: Whether to enable mouse cursor hovering.

Coordinate

In the coordinate settings, you can set the X axis and Y axis of a chart, for example, whether to display the two axises and scale, and the font and font color.

Figure 6 Heat map coordinate
  • X axis
    • X axis: Whether to display the X axis.
    • Segmentation: Number of segments the axis is divided into. The actual number of segments will be adjusted to ensure that the tick labels will be displayed clearly.
    • Min: Minimum value of the axis.
    • Max: Maximum value of the axis.
    • Tick ​​label rotation angle: Rotation angle of the tick labels to avoid overlapping.
    • Axis line display: Whether to display the axis.
    • Scale display: Whether to display the scale.
    • Line color: Color of the axis.
    • Label display: Whether to display the scale label. After this function is enabled, you need to set the font, font color, size, and weight of the scale label.
    • Scale label font: Font, font color, and font size of the scale label.
    • Grid line show or not: Whether to display the axis grid lines, and their type and color.
  • Y axis
    • Y axis: Whether to display the Y axis.
    • Min: Minimum value of the axis.
    • Max: Maximum value of the axis.
    • Axis line display: Whether to display the axis.
    • Scale display: Whether to display the scale.
    • Line color: Color of the axis.
    • Label display: Whether to display the scale label. After this function is enabled, you need to set the font, font color, size, and weight of the scale label.
    • Scale label font: Font, font color, and font size of the scale label.
    • Grid line show or not: Whether to display the axis grid lines, and their type and color.

Data

In the data settings, you can set the data source of the heat map widget. For more information, see Data Access.

Interaction

In the interaction settings, you can configure the interaction between the heat map and other widgets or pages. For details, see Interaction Configuration.

Parent topic: Charts