Heatmap

Pattern

• Size/Position
  • Size: width and height of the component. Unit: pixel.
  • Position: position where the component is located in the canvas. Unit: pixel.
• Global Style
  • Font: text font.
  • Background Color: to set the background color of the chart by clicking the color editor.
  • Opacity: to set the chart opacity by entering a value or dragging .
• Margin
  • Top: spacing between the top sides of the chart and the component layer. You can enter a value or click to adjust the spacing.
  • Bottom: spacing between the bottom sides of the chart and the component. You can enter a value or click to adjust the spacing.
  • Left: spacing between the left sides of the chart and the component. You can enter a value or click to adjust the spacing.
  • Right: spacing between the right sides of the chart and the component. You can enter a value or click to adjust the spacing.
• X Axis
  • X Axis: to show or hide the X axis by clicking or .
  • Font Size: font size of the X axis text.
  • Color: font color of the X axis text.
  • Font Width: font width of the X axis text.
  • Angle: to set the offset angle of the X axis text by entering a value or dragging .
  • Inter-Label Clearance: to set the clearance between X axis texts by entering a value or dragging .
  • Show Min. Label: to show or hide the minimum label by clicking or .
  • Show Max. Label: to show or hide the maximum label by clicking or .
  • Min. Value: the minimum value of the X axis.
  • Max. Value: the maximum value of the X axis.
  • Grid Line: grid line color and width of the X axis.
  • Coordinate Axis: color and width of the X axis.
  • Scale: to show or hide the scales by clicking or .
  • Axis Unit: to set the unit, color, and offset of the X axis.
  Figure 2 X axis of a heatmap
  
• Y Axis
  • Y Axis: to show or hide the Y axis by clicking or .
  • Font Size: font size of the Y axis text.
  • Color: font color of the Y axis text.
  • Font Width: font width of the Y axis text.
  • Angle: to set the offset angle of the Y axis text by entering a value or dragging .
  • Inter-Label Clearance: to set the clearance between Y axis texts by entering a value or dragging .
  • Show Min. Label: to show or hide the minimum label by clicking or .
  • Show Max. Label: to show or hide the maximum label by clicking or .
  • Min. Value: the minimum value of the Y axis.
  • Max. Value: the maximum value of the Y axis.
  • Grid Line: grid line color and width of the Y axis.
  • Coordinate Axis: color and width of the Y axis.
  • Scale: to show or hide the scales by clicking or .
  • Axis Unit: to set the unit, color, and offset of the Y axis.
• Visual Mapping
  • Min. Value: to set the minimum value of visual mapping by clicking .
  • Max. Value: to set the maximum value of visual mapping by clicking .
  • Fill Color: to set the color of visual mapping by clicking the color editor.
  • Mapping: to show or hide the mapping by clicking or .
  • Mapping Type: type of the mapping. The options are Segment-based and Continuous.
  • Direction: direction of the mapping. The options are Horizontal and Vertical.
  • Width: to set the width of the mapping by entering a value or dragging .
  • Height: to set the height of the mapping by entering a value or dragging .
  • Left: to set the distance between the mapping and the left side of the component by entering a value or dragging .
  • Bottom: to set the distance between the mapping and the bottom of the component by entering a value or dragging .
  • Text: color and font size of the mapping text.
  Figure 3 Visual mapping of a heatmap
  
• Message
  • Message: If you click , a message will pop up when you hover over a previewed or published component.
  • Triggering Mode: to set the triggering mode of messages. The options are Coordinate Axis and Data.
  • Color: font color of the message.
  • Font Size: font size of the message.
  • Font Width: font width of the message.

Data

For details about how to configure component data, see Configuring Component Data.

Interaction

For details about whether the component supports the interaction function and how to use the interaction function, see Configuring Component Interaction.