Dicas de ferramentas do React Chart
In React charts, tooltips provide details about bound data and they are rendered in popups when the end-user hovers over data points. Tooltips are supported by the IgrCategoryChart, IgrFinancialChart, and IgrDataChart controls.
React Chart Tooltip Types
React Chart provide three types of tooltips that you can with tooltips enabled by setting the toolTipType property. The following example shows the Column Chart with a combo-box that you can use to change type of tooltips.
AtoolTipType propriedade é configurável e pode ser definida para uma das seguintes opções:
| Valor da propriedade | Descrição |
|---|---|
DefaultDica de ferramenta |
Exiba uma dica de ferramenta para um único item quando o ponteiro estiver posicionado sobre ele. |
DataDica de ferramenta |
Exiba as dicas de ferramentas de dados para todas as séries no gráfico. |
ItemDica de ferramenta |
Exiba uma dica de ferramenta para cada item de dados na categoria sobre a qual o ponteiro está posicionado. |
CategoryDica de ferramenta |
Exiba uma dica de ferramenta agrupada para todos os pontos de dados na categoria sobre a qual o ponteiro está posicionado. |
React Chart Tooltip Template
Se nenhum dos tipos de dicas de ferramentas integrados estiver correspondendo aos seus requisitos, você pode criar suas próprias dicas de ferramentas para exibir e estilizar títulos de séries, valores de dados e valores de eixos. As seções a seguir demonstram como fazer isso em diferentes tipos de gráficos React.
Custom Tooltips in Category Chart
This example shows how to create custom tooltips for all series in React IgrCategoryChart control. Note that you can also apply the same logic to custom tooltips in React IgrFinancialChart control.
Custom Tooltips in Data Chart
Este exemplo mostra como criar dicas de ferramentas personalizadas para cada série no controle React Data Chart.
Additional Resources
Você pode encontrar mais informações sobre recursos de gráfico relacionados nestes tópicos:
API References
OsIgrCategoryChart componentes eIgrFinancialChart compartilham as seguintes propriedades da API:
NoIgrDataChart componente, você pode usar os seguintes componentes e propriedades da API:
IgrDataToolTipLayerIgrItemToolTipLayerIgrCategoryToolTipLayerShowDefaultToolTip