Dicas de ferramentas do Blazor Chart
Em gráficos Blazor, as dicas de ferramentas fornecem detalhes sobre dados vinculados e são renderizadas em pop-ups quando o usuário final passa o mouse sobre pontos de dados. As dicas de ferramentas são suportadas pelos controles IgbCategoryChart
, IgbFinancialChart
e IgbDataChart
.
Blazor Chart Tooltip Types
Blazor Chart fornece três tipos de dicas de ferramentas que você pode usar com dicas de ferramentas habilitadas definindo a propriedade ToolTipType
. O exemplo a seguir mostra o Column Chart com uma caixa de combinação que você pode usar para alterar o tipo de dicas de ferramentas.
A propriedade ToolTipType
é configurável e pode ser definida como uma das seguintes opções:
Valor da propriedade | Descrição |
---|---|
Default Dica de ferramenta |
Exiba uma dica de ferramenta para um único item quando o ponteiro estiver posicionado sobre ele. |
Data Dica de ferramenta |
Exiba as dicas de ferramentas de dados para todas as séries no gráfico. |
Item Dica de ferramenta |
Exiba uma dica de ferramenta para cada item de dados na categoria sobre a qual o ponteiro está posicionado. |
Category Dica de ferramenta |
Exiba uma dica de ferramenta agrupada para todos os pontos de dados na categoria sobre a qual o ponteiro está posicionado. |
Blazor 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 Blazor.
Custom Tooltips in Category Chart
Este exemplo mostra como criar dicas de ferramentas personalizadas para todas as séries no controle Blazor IgbCategoryChart
. Observe que você também pode aplicar a mesma lógica a dicas de ferramentas personalizadas no controle Blazor IgbFinancialChart
.
Custom Tooltips in Data Chart
Este exemplo mostra como criar dicas de ferramentas personalizadas para cada série no controle Blazor Data Chart.
Additional Resources
Você pode encontrar mais informações sobre recursos de gráfico relacionados nestes tópicos:
API References
Os componentes IgbCategoryChart
e IgbFinancialChart
compartilham as seguintes propriedades de API:
No componente IgbDataChart
, você pode usar os seguintes componentes e propriedades da API:
IgbDataToolTipLayer
IgbItemToolTipLayer
IgbCategoryToolTipLayer
ShowDefaultToolTip