Tooltip

Tooltip is the additional information displayed on different elements of the VChart chart, which is displayed through mouse hover operation. This tutorial mainly explains the related concepts and components of the tooltip. For more detailed configuration and examples of the components, please see the Configuration Documentation and Example pages.

Composition of Tooltip

In VChart charts, Tooltip mainly consists of two parts:

• Title (title): Displays the data category or other related information that the mouse is currently hovering over.
• Content (content): Displays detailed data and its attribute information that the mouse is currently hovering over.

In VChart, we provide two types of tooltips according to the displayed data, which are mark tooltip ('mark') and dimension tooltip ('dimension'). The mark ('mark') refers to the individual data corresponding to the graphic (such as a small square in the stacked column chart below). The 'dimension' refers to the set of data corresponding to the dimension value (such as x value) in the area where the mouse is currently located (such as the set of data stacked together in the stacked column chart below):

Style Configuration

By configuring the tooltip.style property, we can style the tooltip. The following code example shows common style configurations for the tooltip panel, such as adjusting the background color, rounded corners, and border shadow.

tooltip: {
    style: {
      panel: {
        /** Background color */
        backgroundColor: 'rgba(24,144,255, 0.1)',
        /** tooltip border */
        border: {
          color: '#6690F2',
          width: 2,
          /** Rounded corners */
          radius: 4
        },
        /** tooltip shadow */
        shadow: {
          blur: 10,
          spread: 2,
          color: '#6690F2'
        }
      }
    }
  }

Formatting

Title Formatting

Sometimes we need to display the tooltip title in a specific format. We can configure the title.value property in the corresponding tooltip type. If the property is configured as a string, it will be displayed as the corresponding constant text. It can also be configured as a function callback: (datum: Datum) => string; where datum is the default data item corresponding to the current tooltip line.

Title formatting example:

{
  tooltip: {
    // Configure the title content of the mark graphic
    mark: {
      title: {
        value: 'Title'
      }
    },
    // Configure the title content of the dimension item
    dimension: {
      title: {
        value: datum => datum.value
      }
    },
  }
}

2. Content Formatting

In addition to the title, we can also format the content of the tooltip. Similar to title formatting, we can configure the content property for the corresponding tooltip type. Each content of the tooltip consists of the following parts:

• shape: The shape of the data item.
• key: The name of the data item.
• value: The value of the data item.

When we need to format the content, we can configure the key, value properties. If they are configured as strings, they will be displayed as corresponding constant texts. It can also be configured as a function callback: (datum: Datum) => string; where datum is the default data item corresponding to the current tooltip line.

Content formatting example:

{
  tooltip: {
    // Configure the content of the mark graphic
    mark: {
      content: {
        key: 'Value',
        value: datum => datum.value
      }
    },
    // Configure the content of the dimension item
    dimension: {
      content: {
        key: datum => datum.type,
        value: datum => datum.value
      }
    },
  }
}

Customization

According to the chart and business requirements, we can further customize the tooltip. For details, please refer to the setTooltipHandler method.