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.

EXAMPLE

DATA

TS

HTML

CSS

export class HighestGrossingMoviesItem {
    public constructor(init: Partial<HighestGrossingMoviesItem>) {
        Object.assign(this, init);
    }

    public franchise: string;
    public totalRevenue: number;
    public highestGrossing: number;

}
export class HighestGrossingMovies extends Array<HighestGrossingMoviesItem> {
    public constructor(items: Array<HighestGrossingMoviesItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new HighestGrossingMoviesItem(
                {
                    franchise: `Marvel Universe`,
                    totalRevenue: 22.55,
                    highestGrossing: 2.8
                }),
                new HighestGrossingMoviesItem(
                {
                    franchise: `Star Wars`,
                    totalRevenue: 10.32,
                    highestGrossing: 2.07
                }),
                new HighestGrossingMoviesItem(
                {
                    franchise: `Harry Potter`,
                    totalRevenue: 9.19,
                    highestGrossing: 1.34
                }),
                new HighestGrossingMoviesItem(
                {
                    franchise: `Avengers`,
                    totalRevenue: 7.76,
                    highestGrossing: 2.8
                }),
                new HighestGrossingMoviesItem(
                {
                    franchise: `Spider Man`,
                    totalRevenue: 7.22,
                    highestGrossing: 1.28
                }),
                new HighestGrossingMoviesItem(
                {
                    franchise: `James Bond`,
                    totalRevenue: 7.12,
                    highestGrossing: 1.11
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
tsコピー

import { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
import { IgcLegendModule, IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, LegendDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import { defineAllComponents } from 'igniteui-webcomponents';
import { ModuleManager } from 'igniteui-webcomponents-core';

defineAllComponents();

import "./index.css";

ModuleManager.register(
    IgcPropertyEditorPanelModule,
    IgcLegendModule,
    IgcCategoryChartModule
);

export class Sample {

    private propertyEditor: IgcPropertyEditorPanelComponent
    private toolTipTypeEditor: IgcPropertyEditorPropertyDescriptionComponent
    private legend: IgcLegendComponent
    private chart: IgcCategoryChartComponent
    private _bind: () => void;

    constructor() {
        var propertyEditor = this.propertyEditor = document.getElementById('PropertyEditor') as IgcPropertyEditorPanelComponent;
        var toolTipTypeEditor = this.toolTipTypeEditor = document.getElementById('ToolTipTypeEditor') as IgcPropertyEditorPropertyDescriptionComponent;
        var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
        var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;

        this._bind = () => {
            propertyEditor.componentRenderer = this.renderer;
            propertyEditor.target = this.chart;
            chart.legend = this.legend;
            chart.dataSource = this.highestGrossingMovies;
        }
        this._bind();
    }

    private _highestGrossingMovies: HighestGrossingMovies = null;
    public get highestGrossingMovies(): HighestGrossingMovies {
        if (this._highestGrossingMovies == null)
        {
            this._highestGrossingMovies = new HighestGrossingMovies();
        }
        return this._highestGrossingMovies;
    }

    private _componentRenderer: ComponentRenderer = null;
    public get renderer(): ComponentRenderer {
        if (this._componentRenderer == null) {
            this._componentRenderer = new ComponentRenderer();
            var context = this._componentRenderer.context;
            PropertyEditorPanelDescriptionModule.register(context);
            LegendDescriptionModule.register(context);
            CategoryChartDescriptionModule.register(context);
        }
        return this._componentRenderer;
    }

}

new Sample();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>Sample | Ignite UI | Web Components | infragistics</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
    <link rel="stylesheet" href="/src/index.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample">
    <div class="options vertical">
        <igc-property-editor-panel
        name="PropertyEditor"
        id="PropertyEditor"
        description-type="CategoryChart"
        is-horizontal="true"
        is-wrapping-enabled="true">
            <igc-property-editor-property-description
            property-path="ToolTipType"
            name="ToolTipTypeEditor"
            id="ToolTipTypeEditor"
            label="ToolTip Type: "
            primitive-value="Data">
            </igc-property-editor-property-description>
        </igc-property-editor-panel>
    </div>

    <div class="legend-title">
        Highest Grossing Movie Franchises
    </div>

    <div class="legend">
        <igc-legend
        name="legend"
        id="legend">
        </igc-legend>
    </div>

    <div class="container fill">
        <igc-category-chart
        name="chart"
        id="chart"
        chart-type="Column"
        x-axis-interval="1"
        y-axis-title="Billions of U.S. Dollars"
        y-axis-title-left-margin="10"
        y-axis-title-right-margin="5"
        y-axis-label-left-margin="0"
        is-horizontal-zoom-enabled="false"
        is-vertical-zoom-enabled="false"
        crosshairs-snap-to-data="true">
        </igc-category-chart>
    </div>
</div>

    </div>

    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>
  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */

cssコピー

Edit in: Codesandbox

Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

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

Property Value	Description
Default Tooltip	Display a tooltip for a single item when the pointer is positioned over it.
Data Tooltip	Display the data tooltips for all series in the chart.
Item Tooltip	Display a tooltip for each data item in the category that the pointer is positioned over.
Category Tooltip	Display a grouped tooltip for all data points in the category that the pointer is positioned over.

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.

EXAMPLE

TS

HTML

CSS

import { IgcCategoryChartModule, IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
import { IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';
import { IgcDomainChartComponent } from 'igniteui-webcomponents-charts';
import { IgcChartSeriesEventArgs } from 'igniteui-webcomponents-charts';

ModuleManager.register(IgcCategoryChartModule);
ModuleManager.register(IgcDataChartInteractivityModule);

export class CategoryChartTooltipTemplate {

    private chart: IgcCategoryChartComponent;

    public data: any[] = [];

    constructor() {

        this.initData();

        this.chart = document.getElementById('chart') as IgcCategoryChartComponent;
        this.chart.seriesAdded = this.onSeriesAdded;
        this.chart.dataSource = this.data;
    }

    public onSeriesAdded = (s: IgcDomainChartComponent, e: IgcChartSeriesEventArgs) => {
        if (e.series) {
            e.series.tooltipTemplate = this.createCategoryChartTooltipTemplate;
        }
    }

    public createCategoryChartTooltipTemplate(context: any) : any {

        if (!context) return null;

        var dataItem = context.item;
        if (!dataItem) return null;

        var tooltipItem1 = document.createElement("div");
        tooltipItem1.innerHTML = "Franchise: " + dataItem.Franchise;
        tooltipItem1.className = "tooltipTitle";

        var tooltipItem2 = document.createElement("div");
        tooltipItem2.innerHTML = "Revenue of All Movies: " + dataItem.TotalRevenue;
        tooltipItem2.className = "tooltipLbl";

        var tooltipItem3= document.createElement("div");
        tooltipItem3.innerHTML = "Highest Grossing Movie: $" + dataItem.HighestGrossing;
        tooltipItem3.className = "tooltipLbl";

        var tooltip = document.createElement("div");
        tooltip.className = "tooltipVertical";
        tooltip.appendChild(tooltipItem1);
        tooltip.appendChild(tooltipItem2);
        tooltip.appendChild(tooltipItem3);

        return tooltip;
    }

    public initData() {
        this.data = [
            { Franchise: "Marvel Universe All Films", TotalRevenue: 22.55, HighestGrossing: 2.8 },
            { Franchise: "Star Wars", TotalRevenue: 10.32, HighestGrossing: 2.07 },
            { Franchise: "Harry Potter", TotalRevenue: 9.19, HighestGrossing: 1.34 },
            { Franchise: "Avengers", TotalRevenue: 7.76, HighestGrossing: 2.8 },
            { Franchise: "Spider Man", TotalRevenue: 7.22, HighestGrossing: 1.28 },
            { Franchise: "James Bond", TotalRevenue: 7.12, HighestGrossing: 1.11 }
        ];
    }
}

new CategoryChartTooltipTemplate();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>CategoryChartTooltipTemplate</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample">
  <div class="options horizontal">
    <span class="legend-title">Highest Grossing Movie Franchises</span>
  </div>

  <igc-category-chart id="chart"
      width="100%"
      height="calc(100% - 3rem)"
      is-transition-in-enabled="true"
      chart-type="Column"
      tooltip-type="None"
      x-axis-interval="1">
  </igc-category-chart>
</div>

    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

Custom Tooltips in Data Chart

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

EXAMPLE

DATA

TS

HTML

CSS

export class SampleCategoryData {

    public static create(): any[] {
        const data: any[] = [];
        data.push({ "Country": "Canada", "Coal": 400000000, "Oil": 100000000, "Gas": 175000000, "Nuclear": 225000000, "Hydro": 350000000 });
        data.push({ "Country": "China", "Coal": 925000000, "Oil": 200000000, "Gas": 350000000, "Nuclear": 400000000, "Hydro": 625000000 });
        data.push({ "Country": "Russia", "Coal": 550000000, "Oil": 200000000, "Gas": 250000000, "Nuclear": 475000000, "Hydro": 425000000 });
        data.push({ "Country": "Australia", "Coal": 450000000, "Oil": 100000000, "Gas": 150000000, "Nuclear": 175000000, "Hydro": 350000000 });
        data.push({ "Country": "United States", "Coal": 800000000, "Oil": 250000000, "Gas": 475000000, "Nuclear": 575000000, "Hydro": 750000000 });
        data.push({ "Country": "France", "Coal": 375000000, "Oil": 150000000, "Gas": 350000000, "Nuclear": 275000000, "Hydro": 325000000 });
        return data;
    }
}
tsコピー

import { IgcDataChartCoreModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartCategoryModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
import { IgcColumnSeriesModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartComponent } from 'igniteui-webcomponents-charts';
import { IgcChartMouseEventArgs } from 'igniteui-webcomponents-charts'
import { ModuleManager } from 'igniteui-webcomponents-core';
import { SampleCategoryData } from './SampleCategoryData';

ModuleManager.register(
    IgcDataChartCoreModule,
    IgcDataChartCategoryModule,
    IgcDataChartInteractivityModule,
    IgcColumnSeriesModule
);

export class DataChartTooltipTemplate {

    private chart: IgcDataChartComponent;

    constructor() {

        this.onSeriesMouseEnter = this.onSeriesMouseEnter.bind(this);
        this.createDataChartTooltip = this.createDataChartTooltip.bind(this);
        this.createDataChartTooltipLine = this.createDataChartTooltipLine.bind(this);

        this.chart = document.getElementById('chart') as IgcDataChartComponent;
        this.chart.dataSource = SampleCategoryData.create();
        this.chart.seriesMouseEnter = this.onSeriesMouseEnter;
    }

    public onSeriesMouseEnter = (s: any, e: IgcChartMouseEventArgs) => {
        if (e.series.tooltipTemplate === null ||
            e.series.tooltipTemplate === undefined) {
            e.series.tooltipTemplate = this.createDataChartTooltip;
        }
    }

    public createDataChartTooltip(context: any): any {
        if (!context) return null;

        var dataItem = context.item;
        if (!dataItem) return null;

        var dataSeries = context.series;
        if (!dataSeries) return null;

        var tooltip = document.createElement("div");
        tooltip.className = "ui-tooltip-content";

        var title = document.createElement("div");
        title.innerHTML = dataItem.Country + " Production";
        title.className = "tooltipTitle";
        tooltip.appendChild(title);

        var line1 = this.createDataChartTooltipLine(dataSeries, "Coal", dataItem.Coal);
        var line2 = this.createDataChartTooltipLine(dataSeries, "Hydro", dataItem.Hydro);
        var line3 = this.createDataChartTooltipLine(dataSeries, "Nuclear", dataItem.Nuclear);
        var line4 = this.createDataChartTooltipLine(dataSeries, "Gas", dataItem.Gas);
        var line5 = this.createDataChartTooltipLine(dataSeries, "Oil", dataItem.Oil);

        tooltip.appendChild(line1);
        tooltip.appendChild(line2);
        tooltip.appendChild(line3);
        tooltip.appendChild(line4);
        tooltip.appendChild(line5);

        return tooltip;
    }

    createDataChartTooltipLine(dataSeries: any, dataName: string, dataValue: string): any {
        var label = document.createElement("label");
        label.innerHTML = dataName + ":";
        label.className = "tooltipLbl";
        label.style.width = "4rem";

        var value = document.createElement("label");
        value.innerHTML = dataValue;
        value.className = "tooltipVal";

        var line = document.createElement("div");
        line.className = "tooltipHorizontal";

        // applying conditional styling based on mapping of the current series
        var isMatching = dataSeries.valueMemberPath == dataName;
        if (isMatching)
            line.style.color = dataSeries.actualBrush;
        else
            line.style.color = "black";

        line.appendChild(label);
        line.appendChild(value);
        return line;
    }

}

new DataChartTooltipTemplate();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>DataChartTooltipTemplate</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample">
    <div class="container" style="height: calc(100% - 3rem)">
        <igc-data-chart id="chart" width="100%" height="100%"
            is-horizontal-zoom-enabled="false"
            is-vertical-zoom-enabled="false">

            <igc-category-x-axis name="xAxis" label="Country">
            </igc-category-x-axis>
            <igc-numeric-y-axis name="yAxis">
            </igc-numeric-y-axis>
            <igc-column-series
                name="series1"
                title="Coal"
                x-axis-name="xAxis"
                y-axis-name="yAxis"
                value-member-path="Coal"
                show-default-tooltip="false">
            </igc-column-series>
            <igc-column-series
                name="series2"
                title="Hydro"
                x-axis-name="xAxis"
                y-axis-name="yAxis"
                value-member-path="Hydro"
                show-default-tooltip="false">
            </igc-column-series>
            <igc-column-series
                name="series3"
                title="Nuclear"
                x-axis-name="xAxis"
                y-axis-name="yAxis"
                value-member-path="Nuclear"
                show-default-tooltip="false">
            </igc-column-series>
            <igc-column-series
                name="series4"
                title="Gas"
                x-axis-name="xAxis"
                y-axis-name="yAxis"
                value-member-path="Gas"
                show-default-tooltip="false">
            </igc-column-series>
            <igc-column-series
                name="series5"
                title="Oil"
                x-axis-name="xAxis"
                y-axis-name="yAxis"
                value-member-path="Oil"
                show-default-tooltip="false">
            </igc-column-series>
        </igc-data-chart>
    </div>
</div>

    </div>
    <script src="src/index.ts"></script>

  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

Additional Resources

You can find more information about related chart features in these topics:

• Chart Annotations
• Chart Markers

API References

The IgcCategoryChartComponent and IgcFinancialChartComponent components share the following API properties:

• toolTipType

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

• IgcDataToolTipLayerComponent
• IgcItemToolTipLayerComponent
• IgcCategoryToolTipLayerComponent
• ShowDefaultToolTip