Web Components Chart Highlighting Example

The following example demonstrates the different highlighting options that are available on the Web Components chart.

EXAMPLE

DATA

TS

HTML

CSS

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

    public index: number;
    public tempInfo: string;
    public temperature: number;
    public month: string;

}
export class TemperatureAnnotatedData extends Array<TemperatureAnnotatedDataItem> {
    public constructor(items: Array<TemperatureAnnotatedDataItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new TemperatureAnnotatedDataItem(
                {
                    index: 0,
                    tempInfo: `27°C`,
                    temperature: 27,
                    month: `Jan`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 1,
                    tempInfo: `25°C`,
                    temperature: 25,
                    month: `Feb`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 2,
                    tempInfo: `21°C`,
                    temperature: 21,
                    month: `Mar`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 3,
                    tempInfo: `19°C`,
                    temperature: 19,
                    month: `Apr`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 4,
                    tempInfo: `16°C`,
                    temperature: 16,
                    month: `May`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 5,
                    tempInfo: `13°C`,
                    temperature: 13,
                    month: `Jun`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 6,
                    tempInfo: `14°C`,
                    temperature: 14,
                    month: `Jul`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 7,
                    tempInfo: `15°C`,
                    temperature: 15,
                    month: `Aug`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 8,
                    tempInfo: `19°C`,
                    temperature: 19,
                    month: `Sep`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 9,
                    tempInfo: `22°C`,
                    temperature: 22,
                    month: `Oct`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 10,
                    tempInfo: `26°C`,
                    temperature: 26,
                    month: `Nov`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 11,
                    tempInfo: `30°C`,
                    temperature: 30,
                    month: `Dec`
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
tsコピー

import { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
import { IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
import { IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { TemperatureAnnotatedDataItem, TemperatureAnnotatedData } from './TemperatureAnnotatedData';
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,
    IgcCategoryChartModule
);

export class Sample {

    private propertyEditor: IgcPropertyEditorPanelComponent
    private highlightingModeEditor: IgcPropertyEditorPropertyDescriptionComponent
    private highlightingBehaviorEditor: IgcPropertyEditorPropertyDescriptionComponent
    private chart: IgcCategoryChartComponent
    private _bind: () => void;

    constructor() {
        var propertyEditor = this.propertyEditor = document.getElementById('PropertyEditor') as IgcPropertyEditorPanelComponent;
        var highlightingModeEditor = this.highlightingModeEditor = document.getElementById('HighlightingModeEditor') as IgcPropertyEditorPropertyDescriptionComponent;
        var highlightingBehaviorEditor = this.highlightingBehaviorEditor = document.getElementById('HighlightingBehaviorEditor') as IgcPropertyEditorPropertyDescriptionComponent;
        var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;

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

    private _temperatureAnnotatedData: TemperatureAnnotatedData = null;
    public get temperatureAnnotatedData(): TemperatureAnnotatedData {
        if (this._temperatureAnnotatedData == null)
        {
            this._temperatureAnnotatedData = new TemperatureAnnotatedData();
        }
        return this._temperatureAnnotatedData;
    }

    private _componentRenderer: ComponentRenderer = null;
    public get renderer(): ComponentRenderer {
        if (this._componentRenderer == null) {
            this._componentRenderer = new ComponentRenderer();
            var context = this._componentRenderer.context;
            PropertyEditorPanelDescriptionModule.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="HighlightingMode"
            name="HighlightingModeEditor"
            id="HighlightingModeEditor"
            label="Highlighting Mode: "
            primitive-value="FadeOthersSpecific">
            </igc-property-editor-property-description>
            <igc-property-editor-property-description
            property-path="HighlightingBehavior"
            name="HighlightingBehaviorEditor"
            id="HighlightingBehaviorEditor"
            label="Highlighting Behavior: "
            primitive-value="NearestItemsAndSeries">
            </igc-property-editor-property-description>
        </igc-property-editor-panel>
    </div>

    <div class="legend-title">
        Average Temperature in Sydney
    </div>

    <div class="container fill">
        <igc-category-chart
        name="chart"
        id="chart"
        chart-type="Column"
        computed-plot-area-margin-mode="Series"
        is-horizontal-zoom-enabled="false"
        is-vertical-zoom-enabled="false"
        highlighting-mode="FadeOthersSpecific"
        highlighting-behavior="NearestItemsAndSeries"
        y-axis-maximum-value="35"
        y-axis-label-location="OutsideRight"
        tool-tip-type="None"
        is-transition-in-enabled="false">
        </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.

Web Components Chart Highlighting Modes & Behaviors

All Web Components Charts support a variety of highlighting options. highlightingMode can be set to brighten or fade when the mouse is hovering over a series/data item rendered in the plot area. highlightingBehavior can be set to directly over or the nearest data item to trigger the highlighting effect. Highlighting modes and behaviors is supported by the IgcCategoryChartComponent, IgcFinancialChartComponent, and IgcDataChartComponent controls and they have the same API for using the highlighting feature.

The following example demonstrates the highlightingMode Web Components chart.

EXAMPLE

DATA

TS

HTML

CSS

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

    public index: number;
    public tempInfo: string;
    public temperature: number;
    public month: string;

}
export class TemperatureAnnotatedData extends Array<TemperatureAnnotatedDataItem> {
    public constructor(items: Array<TemperatureAnnotatedDataItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new TemperatureAnnotatedDataItem(
                {
                    index: 0,
                    tempInfo: `27°C`,
                    temperature: 27,
                    month: `Jan`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 1,
                    tempInfo: `25°C`,
                    temperature: 25,
                    month: `Feb`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 2,
                    tempInfo: `21°C`,
                    temperature: 21,
                    month: `Mar`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 3,
                    tempInfo: `19°C`,
                    temperature: 19,
                    month: `Apr`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 4,
                    tempInfo: `16°C`,
                    temperature: 16,
                    month: `May`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 5,
                    tempInfo: `13°C`,
                    temperature: 13,
                    month: `Jun`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 6,
                    tempInfo: `14°C`,
                    temperature: 14,
                    month: `Jul`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 7,
                    tempInfo: `15°C`,
                    temperature: 15,
                    month: `Aug`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 8,
                    tempInfo: `19°C`,
                    temperature: 19,
                    month: `Sep`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 9,
                    tempInfo: `22°C`,
                    temperature: 22,
                    month: `Oct`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 10,
                    tempInfo: `26°C`,
                    temperature: 26,
                    month: `Nov`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 11,
                    tempInfo: `30°C`,
                    temperature: 30,
                    month: `Dec`
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
tsコピー

import { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
import { IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
import { IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { TemperatureAnnotatedDataItem, TemperatureAnnotatedData } from './TemperatureAnnotatedData';
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,
    IgcCategoryChartModule
);

export class Sample {

    private propertyEditor: IgcPropertyEditorPanelComponent
    private highlightingModeEditor: IgcPropertyEditorPropertyDescriptionComponent
    private chart: IgcCategoryChartComponent
    private _bind: () => void;

    constructor() {
        var propertyEditor = this.propertyEditor = document.getElementById('PropertyEditor') as IgcPropertyEditorPanelComponent;
        var highlightingModeEditor = this.highlightingModeEditor = document.getElementById('HighlightingModeEditor') as IgcPropertyEditorPropertyDescriptionComponent;
        var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;

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

    private _temperatureAnnotatedData: TemperatureAnnotatedData = null;
    public get temperatureAnnotatedData(): TemperatureAnnotatedData {
        if (this._temperatureAnnotatedData == null)
        {
            this._temperatureAnnotatedData = new TemperatureAnnotatedData();
        }
        return this._temperatureAnnotatedData;
    }

    private _componentRenderer: ComponentRenderer = null;
    public get renderer(): ComponentRenderer {
        if (this._componentRenderer == null) {
            this._componentRenderer = new ComponentRenderer();
            var context = this._componentRenderer.context;
            PropertyEditorPanelDescriptionModule.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="HighlightingMode"
            name="HighlightingModeEditor"
            id="HighlightingModeEditor"
            label="Highlighting Mode: "
            primitive-value="BrightenSpecific">
            </igc-property-editor-property-description>
        </igc-property-editor-panel>
    </div>

    <div class="container fill">
        <igc-category-chart
        name="chart"
        id="chart"
        chart-type="Column"
        computed-plot-area-margin-mode="Series"
        is-horizontal-zoom-enabled="false"
        is-vertical-zoom-enabled="false"
        highlighting-mode="BrightenSpecific"
        tool-tip-type="None"
        crosshairs-display-mode="None"
        is-transition-in-enabled="false">
        </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

The following example demonstrates the highlightingBehavior Web Components chart.

EXAMPLE

DATA

TS

HTML

CSS

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

    public index: number;
    public tempInfo: string;
    public temperature: number;
    public month: string;

}
export class TemperatureAnnotatedData extends Array<TemperatureAnnotatedDataItem> {
    public constructor(items: Array<TemperatureAnnotatedDataItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new TemperatureAnnotatedDataItem(
                {
                    index: 0,
                    tempInfo: `27°C`,
                    temperature: 27,
                    month: `Jan`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 1,
                    tempInfo: `25°C`,
                    temperature: 25,
                    month: `Feb`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 2,
                    tempInfo: `21°C`,
                    temperature: 21,
                    month: `Mar`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 3,
                    tempInfo: `19°C`,
                    temperature: 19,
                    month: `Apr`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 4,
                    tempInfo: `16°C`,
                    temperature: 16,
                    month: `May`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 5,
                    tempInfo: `13°C`,
                    temperature: 13,
                    month: `Jun`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 6,
                    tempInfo: `14°C`,
                    temperature: 14,
                    month: `Jul`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 7,
                    tempInfo: `15°C`,
                    temperature: 15,
                    month: `Aug`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 8,
                    tempInfo: `19°C`,
                    temperature: 19,
                    month: `Sep`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 9,
                    tempInfo: `22°C`,
                    temperature: 22,
                    month: `Oct`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 10,
                    tempInfo: `26°C`,
                    temperature: 26,
                    month: `Nov`
                }),
                new TemperatureAnnotatedDataItem(
                {
                    index: 11,
                    tempInfo: `30°C`,
                    temperature: 30,
                    month: `Dec`
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
tsコピー

import { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
import { IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
import { IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { TemperatureAnnotatedDataItem, TemperatureAnnotatedData } from './TemperatureAnnotatedData';
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,
    IgcCategoryChartModule
);

export class Sample {

    private propertyEditor: IgcPropertyEditorPanelComponent
    private highlightingBehaviorEditor: IgcPropertyEditorPropertyDescriptionComponent
    private chart: IgcCategoryChartComponent
    private _bind: () => void;

    constructor() {
        var propertyEditor = this.propertyEditor = document.getElementById('PropertyEditor') as IgcPropertyEditorPanelComponent;
        var highlightingBehaviorEditor = this.highlightingBehaviorEditor = document.getElementById('HighlightingBehaviorEditor') as IgcPropertyEditorPropertyDescriptionComponent;
        var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;

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

    private _temperatureAnnotatedData: TemperatureAnnotatedData = null;
    public get temperatureAnnotatedData(): TemperatureAnnotatedData {
        if (this._temperatureAnnotatedData == null)
        {
            this._temperatureAnnotatedData = new TemperatureAnnotatedData();
        }
        return this._temperatureAnnotatedData;
    }

    private _componentRenderer: ComponentRenderer = null;
    public get renderer(): ComponentRenderer {
        if (this._componentRenderer == null) {
            this._componentRenderer = new ComponentRenderer();
            var context = this._componentRenderer.context;
            PropertyEditorPanelDescriptionModule.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="HighlightingBehavior"
            name="HighlightingBehaviorEditor"
            id="HighlightingBehaviorEditor"
            label="Highlighting Behavior: "
            primitive-value="DirectlyOver">
            </igc-property-editor-property-description>
        </igc-property-editor-panel>
    </div>

    <div class="container fill">
        <igc-category-chart
        name="chart"
        id="chart"
        chart-type="Column"
        computed-plot-area-margin-mode="Series"
        is-horizontal-zoom-enabled="false"
        is-vertical-zoom-enabled="false"
        highlighting-mode="Brighten"
        highlighting-behavior="DirectlyOver"
        tool-tip-type="None"
        crosshairs-display-mode="None"
        is-transition-in-enabled="false">
        </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

Web Components Chart Legend Highlighting

All Web Components Charts support legend highlighting. legendHighlightingMode can enabled so that when mouse is hovering over a legend marker item then the rendered series will highlight in the plot area. Legend highlighting is supported by the IgcCategoryChartComponent, IgcFinancialChartComponent, and IgcDataChartComponent controls and they have the same API for using the highlighting feature.

The following example demonstrates the legend series highlighting Web Components chart.

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 { IgcLegendModule, IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";


ModuleManager.register(
    IgcLegendModule,
    IgcCategoryChartModule
);

export class Sample {

    private legend: IgcLegendComponent
    private chart: IgcCategoryChartComponent
    private _bind: () => void;

    constructor() {
        var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
        var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;

        this._bind = () => {
            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;
    }

}

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="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"
        highlighting-mode="Brighten"
        legend-highlighting-mode="MatchSeries"
        is-transition-in-enabled="false">
        </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

Highlight Layers

The Ignite UI for Web Components IgcCategoryChartComponent can enable three types of highlighting when hovering over data items.

1. Series Highlighting will highlight the single data point represented by a marker or column when the pointer is positioned over it. This is enabled by setting the isSeriesHighlightingEnabled property to true.

2. Item Highlighting highlights items in a series either by drawing a banded shape at their position or by rendering a marker at their position. This is enabled by setting the isItemHighlightingEnabled property to true.

3. Category Highlighting targets all category axes in the chart. They draw a shape that illuminates the area of the axis closest to the pointer position. This is enabled by setting the isCategoryHighlightingEnabled property to true.

The following example demonstrates the different highlighting layers that are available on the Web Components chart.

EXAMPLE

TS

HTML

CSS

import { SeriesHighlightingBehavior, LegendHighlightingMode, SeriesHighlightingMode, IgcLegendModule, IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';

ModuleManager.register(IgcCategoryChartModule, IgcLegendModule);

export class CategoryChartHighlighting {

    private chart: IgcCategoryChartComponent;
    private legend: IgcLegendComponent
    public data: any[] = [];

    constructor() {

        this.onHighlightingTargetChanged = this.onHighlightingTargetChanged.bind(this);
        this.onHighlightingModeChanged = this.onHighlightingModeChanged.bind(this);
        this.onBehaviorModeChanged = this.onBehaviorModeChanged.bind(this);
        this.onLegendHighlightingModeChanged = this.onLegendHighlightingModeChanged.bind(this);

        this.initData();

        this.chart = document.getElementById('chart') as IgcCategoryChartComponent;
        this.chart.dataSource = this.data;
        this.legend = document.getElementById('Legend') as IgcLegendComponent;
        this.chart.legend = this.legend
        this.chart.isItemHighlightingEnabled = false;
        this.chart.isSeriesHighlightingEnabled = true;
        this.chart.isCategoryHighlightingEnabled = false;
        this.chart.highlightingMode = SeriesHighlightingMode.Auto;
        this.chart.highlightingBehavior = SeriesHighlightingBehavior.Auto;
        this.chart.legendHighlightingMode = LegendHighlightingMode.Auto;

        const highlightingTarget1 = document.getElementById('highlightingTarget') as HTMLSelectElement;
        highlightingTarget1!.addEventListener('change', this.onHighlightingTargetChanged);

        const highlightingMode = document.getElementById("highlightingMode") as HTMLSelectElement;
        highlightingMode!.addEventListener("change", this.onHighlightingModeChanged);

        const behaviorMode = document.getElementById("behaviorMode") as HTMLSelectElement;
        behaviorMode!.addEventListener("change", this.onBehaviorModeChanged);

        const legendHighlightingMode = document.getElementById("legendHighlightingMode") as HTMLSelectElement;
        legendHighlightingMode!.addEventListener("change", this.onLegendHighlightingModeChanged);
    }

    public onHighlightingTargetChanged = (e: any) => {
        let value = e.target.value as String;

        if(value == "Series"){
            this.chart.isItemHighlightingEnabled = false;
            this.chart.isSeriesHighlightingEnabled = true;
            this.chart.isCategoryHighlightingEnabled = false;
        }
         else if(value == "Item") {
            this.chart.isItemHighlightingEnabled = true;
            this.chart.isSeriesHighlightingEnabled = false;
            this.chart.isCategoryHighlightingEnabled = false;
        }
         else if(value == "Category") {
            this.chart.isItemHighlightingEnabled = false;
            this.chart.isSeriesHighlightingEnabled = false;
            this.chart.isCategoryHighlightingEnabled = true;
        }
         else if(value=="None") {
            this.chart.isItemHighlightingEnabled = false;
            this.chart.isSeriesHighlightingEnabled = false;
            this.chart.isCategoryHighlightingEnabled = false;
        }
    }

    public onHighlightingModeChanged(e: any) {
        this.chart.highlightingMode = e.target.value as SeriesHighlightingMode;
    }

    public onBehaviorModeChanged(e: any) {
        this.chart.highlightingBehavior = e.target.value as SeriesHighlightingBehavior;
    }

    public onLegendHighlightingModeChanged(e: any) {
        this.chart.legendHighlightingMode = e.target.value as LegendHighlightingMode;
    }

    public initData() {
        const CityTemperatureData: any = [
            { Month: "JAN", NewYork: 10.6, LosAngeles: 28.3},
            { Month: "FEB", NewYork: 7.8,  LosAngeles: 31.1},
            { Month: "MAR", NewYork: 12.2, LosAngeles: 27.8},
            { Month: "APR", NewYork: 11.7, LosAngeles: 33.9},
            { Month: "MAY", NewYork: 19.4, LosAngeles: 35.0},
            { Month: "JUN", NewYork: 23.3, LosAngeles: 36.7},
            { Month: "JUL", NewYork: 27.2, LosAngeles: 33.3},
            { Month: "AUG", NewYork: 25.6, LosAngeles: 36.7},
            { Month: "SEP", NewYork: 22.8, LosAngeles: 43.9},
            { Month: "OCT", NewYork: 17.8, LosAngeles: 38.3 },
            { Month: "NOV", NewYork: 17.8, LosAngeles: 32.8},
            { Month: "DEC", NewYork: 8.3, LosAngeles: 28.9},
        ];
        this.data = [ CityTemperatureData];
    }

}

new CategoryChartHighlighting();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>CategoryChartColumnChartWithHighlighting</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">
        <label class="options-label">Highlight Target: </label>
        <select id="highlightingTarget">
          <option>Series</option>
          <option>Item</option>
          <option>Category</option>
          <option>None</option>
        </select>

        <span class="options-label">Mode:</span>
        <select id="highlightingMode">
          <option>Auto</option>
          <option>Brighten</option>
          <option>BrightenSpecific</option>
          <option>FadeOthers</option>
          <option>FadeOthersSpecific</option>
          <option>None</option>
        </select>
        <span class="options-label">Behavior:</span>
        <select id="behaviorMode">
          <option>Auto</option>
          <option>DirectlyOver</option>
          <option>NearestItems</option>
          <option>NearestItemsAndSeries</option>
          <option>NearestItemsRetainMainShapes</option>
        </select>
        <span class="options-label">Legend:</span>
        <select id="legendHighlightingMode">
          <option>Auto</option>
          <option>MatchSeries</option>
          <option>None</option>
        </select>
    </div>
    <div class="options vertical">
      <span class="legend-title">
         Average Temperatures in the U.S. Cities
      </span>
      <div class="legend">
          <igc-legend
          orientation="Horizontal"
          name="Legend"
          id ="Legend">
          </igc-legend>
      </div>
    </div>
    <igc-category-chart id="chart" style="height: calc(100% - 3rem)"
        width="100%"
        height="100%"
        x-axis-interval="1"
        y-axis-minimum-value="0"
        y-axis-title="Temperatures in Celsius"
        is-series-highlighting-enabled="true"
        is-category-highlighting-enabled="true"
        is-item-highlighting-enabled="true">
    </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

Additional Resources

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

• Chart Animations
• Chart Annotations
• Chart Tooltips

API References

The following is a list of API members mentioned in the above sections:

• highlightingMode
• highlightingBehavior
• LegendHighlightingBehavior
• isCategoryHighlightingEnabled
• isItemHighlightingEnabled
• isSeriesHighlightingEnabled
• IgcCategoryChartComponent
• IgcDataChartComponent
• IgcFinancialChartComponent