Información sobre herramientas de gráficos de Angular

    In Angular 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 IgxCategoryChartComponent, IgxFinancialChartComponent, and IgxDataChartComponent controls.

    Angular Chart Tooltip Types

    Angular 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.

    The toolTipType property is configurable and can be set to one of the following options:

    El valor de la propiedad Descripción
    DefaultInformación sobre herramientas Muestra información sobre herramientas para un solo elemento cuando el puntero se coloca sobre él.
    DataInformación sobre herramientas Muestra información sobre herramientas de datos para todas las series del gráfico.
    ItemInformación sobre herramientas Muestre información sobre herramientas para cada elemento de datos en la categoría sobre la que se coloca el puntero.
    CategoryInformación sobre herramientas Muestra información sobre herramientas agrupada para todos los puntos de datos de la categoría sobre la que está colocado el puntero.

    Angular Chart Tooltip Template

    Si ninguno de los tipos integrados de información sobre herramientas se ajusta a sus requisitos, puede crear su propia información sobre herramientas para mostrar y aplicar estilo al título de la serie, los valores de datos y los valores de los ejes. En las secciones siguientes se muestra cómo hacerlo en diferentes tipos de gráficos de Angular.

    Custom Tooltips in Category Chart

    This example shows how to create custom tooltips for all series in Angular IgxCategoryChartComponent control. Note that you can also apply the same logic to custom tooltips in Angular IgxFinancialChartComponent control.

    Custom Tooltips in Data Chart

    En este ejemplo se muestra cómo crear información sobre herramientas personalizada para cada serie Angular Gráfico de datos control.

    Additional Resources

    Puede encontrar más información sobre las funciones de gráficos relacionadas en estos temas:

    API References

    The IgxCategoryChartComponent and IgxFinancialChartComponent components share the following API properties:

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