Web Components Chart Tooltips

    In Web Components 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 IgcCategoryChartComponent, IgcFinancialChartComponent, and IgcDataChartComponent controls.

    Web Components Chart Tooltip Types

    Web Components 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.

    A toolTipType propriedade é configurável e pode ser definida como 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.

    Web Components Chart Tooltip Template

    If none of built-in types of tooltips are matching your requirements, you can create your own tooltips to display and style series title, data values, and axis values. The following sections demonstrate how to do this in different types of Web Components charts.

    Custom Tooltips in Category Chart

    This example shows how to create custom tooltips for all series in Web Components IgcCategoryChartComponent control. Note that you can also apply the same logic to custom tooltips in Web Components IgcFinancialChartComponent control.

    Custom Tooltips in Data Chart

    This example shows how to create custom tooltips for each series in Web Components Data Chart control.

    Additional Resources

    Você pode encontrar mais informações sobre recursos de gráfico relacionados nestes tópicos:

    API References

    Os componentes IgcCategoryChartComponent e IgcFinancialChartComponent compartilham as seguintes propriedades de API:

    In the IgcDataChartComponent component, you can use the following API components and properties: