React Chart Data Tooltip

    In Ignite UI for React, the DataToolTip displays values and titles of series as well as legend badges of series in a tooltip. In addition, it provides many configuration properties of the IgrDataLegend for filtering series rows and values columns, styling, and formatting values. This tooltip type updates while moving the mouse inside of the plot area of the IgrCategoryChart, IgrFinancialChart, and IgrDataChart components.

    React Data Tooltip Properties

    Todas as propriedades deIgrDataToolTipLayer são prefixadas com DataToolTip e expostas na API deIgrCategoryChart eIgrFinancialChart componentes. No entanto, você precisará criar uma instância eIgrDataToolTipLayer adicioná-la à coleção deIgrDataChart componentes em série se quiser usá-la com Radial Charts, Polar Charts, Scatter Charts.

    React Data Tooltip Elements

    O DataToolTip exibe o conteúdo usando um conjunto de três tipos de linhas e quatro tipos de colunas.

    React Data Tooltip Rows

    As linhas do DataToolTip incluem a linha de cabeçalho, as linhas de série e a linha de resumo.

    A linha do cabeçalho exibe o rótulo do eixo do ponto que está pairando, e pode ser alterada usando adataToolTipHeaderText propriedade.

    A linha da série pode, na verdade, ser um conjunto de linhas correspondentes a cada série plotada no gráfico. Essas linhas exibirão o emblema da legenda, o título da série, o valor real/abreviado da série e o símbolo e a unidade da abreviação, se especificado.

    Por fim, há uma linha de resumo que mostra o total de todos os valores da série. O título resumo padrão pode ser alterado usando adataToolTipSummaryTitleText propriedade da legenda. Além disso, você pode usar adataToolTipSummaryType propriedade para personalizar se você exibe o Total, Mínimo, Máximo ou Média dos valores da série na linha de resumo.

    O exemplo a seguir demonstra a dica de ferramenta de dados com um resumo aplicado:

    React Data Tooltip Columns

    As colunas de oIgrDataToolTipLayer incluem as colunas título, etiqueta, valor e unidades. Cada série no gráfico pode ter múltiplas colunas para rótulo, valor e unidades, dependendo dasdataToolTipIncludedColumns coleçõesdataToolTipExcludedColumns do gráfico.

    A coluna de título exibe os emblemas de legendas e títulos das séries, que vêm dachartTitle propriedade dos diferentesIgrSeries plotados no gráfico.

    A coluna de etiqueta exibe o nome ou a abreviação dos diferentes caminhos de propriedades nasdataToolTipIncludedColumns coleções oudataToolTipExcludedColumns da tooltip.

    A coluna de valores exibe os valores da série como texto abreviado, que pode ser formatado usando adataToolTipValueFormatAbbreviation propriedade para aplicar a mesma abreviação para todos os números, definindo essa propriedade comoAuto ou.Shared Alternativamente, o usuário pode selecionar outras abreviações comoIndependent,Kilo,Million, etc. A precisão dos valores abreviados é controlada usando osdataToolTipValueFormatMinFractions dígitos edataToolTipValueFormatMaxFractions para mínimo e máximo, respectivamente.

    A coluna de unidades exibe um símbolo de abreviação e/ou texto de unidade, que pode ser definido tanto no DataToolTip definindo paradataToolTipUnitsText todas as colunas quanto usando as seguintes propriedades em cada série do gráfico:

    • Série de categorias (por exemplo, ColumnSeries)
      • ValueMemberAsLegendUnit="K"
    • Série de preços financeiros:
      • OpenMemberAsLegendUnit="K"
      • LowMemberAsLegendUnit="K"
      • HighMemberAsLegendUnit="K"
      • CloseMemberAsLegendUnit="K"
    • Range Series:
      • LowMemberAsLegendUnit="K"
      • HighMemberAsLegendUnit="K"
    • Radial Series:
      • ValueMemberAsLegendUnit="km"
    • Polar Series:
      • RadiusMemberAsLegendUnit="km"
      • AngleMemberAsLegendUnit="degrees"

    Para as propriedades listadas acima, há propriedades correspondentes que terminam com MemberAsLegendLabel para determinar o texto nas colunas de rótulo mencionadas anteriormente.

    As colunas incluídas nasdataToolTipIncludedColumns coleções edataToolTipExcludedColumns geralmente correspondem aos caminhos de valor dos seus itens de dados subjacentes, mas a série financeira tem a opção de incluir alguns especiais além dosHigh caminhosLow​Open​Close que são necessários para que a série financeira seja plotada corretamente. Você tem a capacidade de mostrarTypicalPrice​Change eVolume as opções dentro da dica de ferramenta.

    O exemplo a seguir demonstra uma dica de ferramenta de dados com as colunas adicionadas de Abrir, Alto, Baixo, Fechar e Alterar:

    React Data Tooltip Grouping for Data Chart

    dataLegendGrouppode ser definido, em todos os tipos de séries, para uma string que categorizará um grupo de séries na Legenda de Dados. Cada grupo terá sua própria linha de resumo exibida antes de outro grupo de séries ser exibido: Por padrão, o DataLegend esconde os nomes dos grupos, mas você pode exibir os nomes dos grupos definindo agroupRowVisible propriedade como true.groupingMode deve ser definido como "Agrupado" elabelDisplayMode deve ser definido como "Visível" na Camada de Dica de Dados.

    React Data Tooltip Grouping & Positioning for Category Chart & Financial Chart

    Você pode definirdataToolTipGroupingMode a propriedade como ouGrouped​Individual agrupar conteúdo de várias séries em uma única dica de ferramenta ou conteúdo separado para cada série em várias dicas de ferramenta. NoGrouped modo, você pode personalizar onde a dica aparece definindo asdataToolTipGroupedPositionModeX propriedades edataToolTipGroupedPositionModeY. Isso basicamente permite personalizar os alinhamentos horizontal e vertical da dica de ferramenta e se você quer que ela acompanhe os pontos de série mais próximos da posição do mouse ou se fixe a dica na borda da área do gráfico.

    O exemplo a seguir demonstra uma dica de ferramenta de dados posicionada no canto superior direito do gráfico:

    React Data Tooltip Value Formatting

    O DataToolTip fornece a abreviação automática de números grandes usando suadataToolTipValueFormatAbbreviation propriedade. Isso adiciona um multiplicador na coluna de unidades, como quilo, milhão, bilhão, etc. Você pode personalizar o número de dígitos fracionários exibidos definindo odataToolTipValueFormatMinFractions edataToolTipValueFormatMaxFractions. Isso permitirá que você determine o número mínimo e máximo de dígitos que aparecem após a vírgula decimal, respectivamente.

    O exemplo a seguir demonstra um DataToolTip com as frações mínima e máxima definidas:

    React Data Tooltip Value Mode

    Você pode mudar a exibição decimal padrão dos valores dentro do DataToolTip para moeda mudando adataToolTipValueFormatMode propriedade da camada. O DataToolTip também expõe a possibilidade de modificar a cultura do símbolo da moeda exibido usando suadataToolTipValueFormatCulture propriedade e configurando-a para a tag de cultura correspondente. Por exemplo, o exemplo a seguir demonstra um gráfico com odataToolTipValueFormatCulture conjunto em "en-GB":

    Layout Mode

    Itens legendários podem ser posicionados em uma estrutura vertical ou de mesa via alayoutMode propriedade. O valor padrão éTable, que mantém a mesma aparência e sensação vistas em versões anteriores.

    Eg.

    Layout Mode

    React Data Tooltip Styling

    O DataToolTip fornece propriedades para estilizar cada tipo de coluna. Cada uma dessas propriedades começa com Título, Etiqueta, Valor ou Unidades, e você pode estilizar a cor, fonte e margem do texto. Por exemplo, se você quiser definir a cor do texto de cada uma dessas, você definiria asdataToolTipTitleTextColor propriedades ,dataToolTipLabelTextColor,dataToolTipValueTextColor, edataToolTipUnitsTextColor.

    O exemplo a seguir demonstra o uso das propriedades de estilo mencionadas acima:

    Várias propriedades são expostas, incluindo partes de agrupamento da dica de ferramenta.

    • GroupTextMargin
    • groupTextColor
    • GroupTextFontSize
    • GroupTextFontFamily
    • GroupTextFontStyle
    • GroupTextFontStretch
    • GroupTextFontWeight
    • HeaderTextMargin
    • headerTextColor
    • HeaderTextFontSize
    • HeaderTextFontFamily
    • HeaderTextFontStyle
    • HeaderTextFontStretch
    • HeaderTextFontWeight

    API References