Web Components チャート注釈

Web Components チャートのホバー操作と注釈は、シリーズコレクションに追加されるシリーズであるホバー操作レイヤーを介して実装されます。これらのレイヤーはカーソルの位置に依存します。これらの注釈レイヤーはそれぞれ、個別に使用することも、他のレイヤーと組み合わせて強力なホバー操作を提供することもできる、異なるホバー操作を提供します。

Web Components 注釈の例

次の例は、Web Components チャートで使用できる注釈レイヤーを示しています。チェックボックスをクリックして、各レイヤーのオンとオフを切り替えます。

import { IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';
import { IgcMarkerTypeCollection } from 'igniteui-webcomponents-charts';
import { MarkerType } from 'igniteui-webcomponents-charts';
import { CrosshairsDisplayMode } from 'igniteui-webcomponents-charts';

ModuleManager.register(IgcCategoryChartModule);

export class Sample {

    private chart: IgcCategoryChartComponent;
    public includedProperties: string[] = ["Year", "USA"];
    public data: any[] = [];

    constructor() {

        this.onCrosshairsVisible = this.onCrosshairsVisible.bind(this);
        this.onCalloutsVisible = this.onCalloutsVisible.bind(this);
        this.onFinalValuesVisible = this.onFinalValuesVisible.bind(this);
        this.onMarkersVisible = this.onMarkersVisible.bind(this);

        this.chart = document.getElementById('chart') as IgcCategoryChartComponent;
        this.initData();
        this.chart.dataSource = this.data;

        this.chart.includedProperties = this.includedProperties;

        let checkbox1 = document.getElementById('checkbox1');
        checkbox1!.addEventListener('change', this.onCrosshairsVisible);

        let checkbox2 = document.getElementById('checkbox2');
        checkbox2!.addEventListener('change', this.onCalloutsVisible);

        let checkbox3 = document.getElementById('checkbox3');
        checkbox3!.addEventListener('change', this.onFinalValuesVisible);

        let checkbox4 = document.getElementById('checkbox4');
        checkbox4!.addEventListener('change', this.onMarkersVisible);
    }

    public initData() {
        this.data = [
            { Year: "2009", USA: 19 },
            { Year: "2010", USA: 24 },
            { Year: "2011", USA: 28 },
            { Year: "2012", USA: 26 },
            { Year: "2013", USA: 38 },
            { Year: "2014", USA: 31 },
            { Year: "2015", USA: 19 },
            { Year: "2016", USA: 52 },
            { Year: "2017", USA: 50 },
            { Year: "2018", USA: 34 },
            { Year: "2019", USA: 38 },
        ];

        let idx: number = 0;

        for (const item of this.data) {
            item.index = idx;
            item.value = item.USA;
            item.label = item.USA + " " + "TWh";
            idx++;
        }
    }

    public onCrosshairsVisible = (e: any) => {
        const isVisible = e.target.checked;
        this.chart.crosshairsAnnotationEnabled = isVisible;

        if (isVisible) {
            this.chart.crosshairsDisplayMode = CrosshairsDisplayMode.Both;
        }
        else {
            this.chart.crosshairsDisplayMode = CrosshairsDisplayMode.None;
        }
    }

    public onCalloutsVisible = (e: any) => {

        let value = e.target.checked;
        this.chart.calloutsVisible = value;
    }

    public onFinalValuesVisible = (e: any) => {

        let value = e.target.checked;
        this.chart.finalValueAnnotationsVisible = value;
    }

    public onMarkersVisible = (e: any) => {
        const visible = e.target.checked;
        const markers = e.target.checked ? 'Circle' : 'None';

        switch (markers) {
            case 'Circle': {
                let collection: IgcMarkerTypeCollection = new IgcMarkerTypeCollection();
                collection.add(MarkerType.Circle);
                this.chart.markerTypes = collection;
                break;
            }
            case 'None': {
                let collection: IgcMarkerTypeCollection = new IgcMarkerTypeCollection();
                collection.add(MarkerType.None);
                this.chart.markerTypes = collection;
                break;
            }
        }
    }
}

new Sample();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>CategoryChartLineChartWithAnnotations</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">Annotations: </label>
        <label class="options-label"><input type="checkbox" id="checkbox1" checked="true"></input> Crosshair </label>
        <label class="options-label"><input type="checkbox" id="checkbox2" checked="true"></input> Callouts </label>
        <label class="options-label"><input type="checkbox" id="checkbox3" checked="true"></input> Final Values </label>
        <label class="options-label"><input type="checkbox" id="checkbox4" checked="true"></input> Markers </label>
    </div>
    <div class="container fill" style="height: calc(100% - 1.25rem)">
      <igc-category-chart id="chart"
          width="100%" height="100%"
          chart-type="Line"
          subtitle="Renewable Electricity Generated"
          is-horizontal-zoom-enabled="false"
          is-vertical-zoom-enabled="false"
          yAxisTitle="TWh"
          y-axis-label-location="OutsideRight"
          thickness="2"
          callouts-visible="true"
          callouts-x-member-path="index"
          callouts-y-member-path="value"
          callouts-label-member-path="label"
          crosshairs-snap-to-data="false"
          crosshairs-display-mode="Both"
          crosshairs-annotation-enabled="true"
          final-value-annotations-visible="true"
          marker-types="Circle"
		  computed-plot-area-margin-mode="Series">
        </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

このサンプルが気に入りましたか? 完全な Ignite UI for Web Componentsツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

このサンプルが気に入りましたか? 完全な Web Components ツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

Web Components 十字線レイヤー

IgcCrosshairLayerComponent は、対象にするために構成される各シリーズの実際値で、異なるセットの線を描画する各シリーズと交差する十字線として描画されます。

十字線のタイプは次のとおりです:

Horizontal
Vertical
Both

チャートの十字線は、crosshairsSnapToData プロパティを true に設定することでデータポイントにスナップするように構成することもできます。そうしないと、十字線がデータポイント間で補完されます。注釈を有効にして軸に沿って十字線の値を表示できます。

デフォルトではチャートコントロールのすべてのシリーズをターゲットにするため、特定のシリーズを 1 つだけ表示するように十字線レイヤーを構成できます。これには、targetSeries プロパティを設定します。

デフォルトでは、十字線の色は交差するシリーズよりも軽い色になります。しかし、このデフォルト値は、十字線に使用される色を選択できるようにオーバーライドできます。これは、十字線レイヤーの brush プロパティを設定することによって行われます。

次の例は、単一のシリーズをターゲットにして、タイプを垂直に設定し、ブラシの色をスタイリングすることによって、十字線レイヤーを構成する方法を示しています。



export class SampleCategoryData {

    public static create(): any[] {
        const data: any[] = [];
        data.push({ "Year": "2009", "Europe": 31, "China": 21, "USA": 19 });
        data.push({ "Year": "2010", "Europe": 43, "China": 26, "USA": 24 });
        data.push({ "Year": "2011", "Europe": 66, "China": 29, "USA": 28 });
        data.push({ "Year": "2012", "Europe": 69, "China": 32, "USA": 26 });
        data.push({ "Year": "2013", "Europe": 58, "China": 47, "USA": 38 });
        data.push({ "Year": "2014", "Europe": 40, "China": 46, "USA": 31 });
        data.push({ "Year": "2015", "Europe": 78, "China": 50, "USA": 19 });
        data.push({ "Year": "2016", "Europe": 13, "China": 90, "USA": 52 });
        data.push({ "Year": "2017", "Europe": 78, "China": 132, "USA": 50 });
        data.push({ "Year": "2018", "Europe": 40, "China": 134, "USA": 34 });
        data.push({ "Year": "2019", "Europe": 80, "China": 96, "USA": 38 });
        return data;
    }
}
ts

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

ModuleManager.register(
    IgcDataChartCoreModule,
    IgcDataChartCategoryModule,
    IgcDataChartInteractivityModule,
    IgcLineSeriesModule,
    IgcCrosshairLayerModule
);

export class DataChartCrosshairLayerStyling {

    private chart: IgcDataChartComponent;

    constructor() {

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

}

new DataChartCrosshairLayerStyling();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>DataChartCrosshairLayerStyling</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" >
        <igc-data-chart id="chart" width="100%" height="100%"
            subtitle="Renewable Energy Generated">

            <igc-category-x-axis name="xAxis" label="Year">
            </igc-category-x-axis>
            <igc-numeric-y-axis name="yAxis" title="TWh"
                label-location="OutsideRight">
            </igc-numeric-y-axis>
            <igc-line-series
                name="series1"
                x-axis-name="xAxis"
                y-axis-name="yAxis"
                value-member-path="USA">
            </igc-line-series>

            <igc-crosshair-layer
                name="crosshairLayer"
                horizontal-line-visibility="Collapsed"
                brush="DodgerBlue">
            </igc-crosshair-layer>
        </igc-data-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

Web Components 最終値レイヤー

IgcDataChartComponent コントロールの IgcFinalValueLayerComponent は、シリーズに表示された最終値の軸に沿ったクイックビューをサポートします。

複数の最終値レイヤーを異なる設定で使用したい場合は、この注釈を設定して特定のシリーズをターゲットにすることができます。これには targetSeries プロパティを設定します。

次のプロパティを設定して、この注釈をカスタマイズすることもできます:

axisAnnotationBackground: このプロパティは注釈の背景色を選択するために使用されます。デフォルトはシリーズのブラシを使用します。
axisAnnotationTextColor: このプロパティは注釈のテキストの色のブラシを選択するために使用されます。
axisAnnotationOutline: このプロパティは注釈のアウトライン色を選択するために使用されます。

次の例は、上記のプロパティを設定して、最終的な値レイヤーの注釈のスタイルを設定する方法を示しています。



export class SampleCategoryData {

    public static create(): any[] {
        const data: any[] = [];
        data.push({ "Year": "2009", "Europe": 31, "China": 21, "USA": 19 });
        data.push({ "Year": "2010", "Europe": 43, "China": 26, "USA": 24 });
        data.push({ "Year": "2011", "Europe": 66, "China": 29, "USA": 28 });
        data.push({ "Year": "2012", "Europe": 69, "China": 32, "USA": 26 });
        data.push({ "Year": "2013", "Europe": 58, "China": 47, "USA": 38 });
        data.push({ "Year": "2014", "Europe": 40, "China": 46, "USA": 31 });
        data.push({ "Year": "2015", "Europe": 78, "China": 50, "USA": 19 });
        data.push({ "Year": "2016", "Europe": 13, "China": 90, "USA": 52 });
        data.push({ "Year": "2017", "Europe": 78, "China": 132, "USA": 50 });
        data.push({ "Year": "2018", "Europe": 40, "China": 134, "USA": 34 });
        data.push({ "Year": "2019", "Europe": 80, "China": 96, "USA": 38 });
        return data;
    }
}
ts

import { IgcDataChartCoreModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartCategoryModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartAnnotationModule } from  'igniteui-webcomponents-charts';
import { IgcLineSeriesModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartComponent } from 'igniteui-webcomponents-charts';
import { IgcFinalValueLayerModule } from  'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';
import { SampleCategoryData } from './SampleCategoryData';

ModuleManager.register(
    IgcDataChartCoreModule,
    IgcDataChartCategoryModule,
    IgcDataChartInteractivityModule,
    IgcDataChartAnnotationModule,
    IgcLineSeriesModule,
    IgcFinalValueLayerModule
);

export class DataChartFinalValueLayerStyling {

    private chart: IgcDataChartComponent;

    constructor() {

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

}

new DataChartFinalValueLayerStyling();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>DataChartFinalValueLayerStyling</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" >
        <igc-data-chart id="chart" width="100%" height="100%"
            subtitle="Renewable Energy Generated">

            <igc-category-x-axis name="xAxis" label="Year">
            </igc-category-x-axis>
            <igc-numeric-y-axis name="yAxis" title="TWh"
                label-location="OutsideRight">
            </igc-numeric-y-axis>
            <igc-line-series
                name="series1"
                x-axis-name="xAxis"
                y-axis-name="yAxis"
                value-member-path="USA">
            </igc-line-series>

            <igc-final-value-layer
                name="crosshairLayer"
                axis-annotation-background="Orange"
                axis-annotation-text-color="Black"
                axis-annotation-outline="Black">
            </igc-final-value-layer>
        </igc-data-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

<igc-category-chart
     id="chart"
     final-value-annotations-visible="true">
</igc-category-chart>
html

Web Components コールアウトレイヤー

IgcCalloutLayerComponent はチャートコントロール既存または新しいデータの注釈を表示します。注釈は、データソース内の指定されたデータ値の横に表示されます。

コールアウト注釈を使用して、メモやデータポイントに関する特定の詳細など、ユーザーに追加情報を表示します。

複数のコールアウトレイヤーを異なる設定で使用する場合は、コールアウトを設定して特定のシリーズをターゲットにできます。これには targetSeries プロパティを設定します。

次のプロパティを設定して、この注釈をカスタマイズすることもできます:

calloutLeaderBrush: このプロパティは、レイヤーのコールアウトのリーダー線のブラシを選択するために使用されます。
calloutOutline: このプロパティは注釈のアウトライン色を選択するために使用されます。
calloutBackground: このプロパティは注釈の背景色を選択するために使用されます。デフォルトはシリーズのブラシを使用します。
calloutTextColor: このプロパティは注釈のテキストの色のブラシを選択するために使用されます。
calloutStrokeThickness: このプロパティは、コールアウトバッキングの厚さを選択するために使用されます。
calloutCornerRadius: このプロパティは、コールアウトのコーナーをカーブさせるために使用されます。
allowedPositions: このプロパティは、コールアウトレイヤーが使用できる位置を選択するために使用されます。例: 上、下

次の例は、上記のプロパティを設定して、コールアウトレイヤーの注釈のスタイルを設定する方法を示しています。

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

    public year: string;
    public europe: number;
    public china: number;
    public america: number;

}
export class CountryRenewableElectricity extends Array<CountryRenewableElectricityItem> {
    public constructor(items: Array<CountryRenewableElectricityItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new CountryRenewableElectricityItem(
                {
                    year: `2009`,
                    europe: 34,
                    china: 21,
                    america: 19
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2010`,
                    europe: 43,
                    china: 26,
                    america: 24
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2011`,
                    europe: 66,
                    china: 29,
                    america: 28
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2012`,
                    europe: 69,
                    china: 32,
                    america: 26
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2013`,
                    europe: 58,
                    china: 47,
                    america: 38
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2014`,
                    europe: 40,
                    china: 46,
                    america: 31
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2015`,
                    europe: 78,
                    china: 50,
                    america: 19
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2016`,
                    europe: 13,
                    china: 90,
                    america: 52
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2017`,
                    europe: 78,
                    china: 132,
                    america: 50
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2018`,
                    europe: 40,
                    china: 134,
                    america: 34
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2018`,
                    europe: 40,
                    china: 134,
                    america: 34
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2019`,
                    europe: 80,
                    china: 96,
                    america: 38
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
ts

import { IgcDataChartCoreModule, IgcDataChartCategoryModule, IgcDataChartAnnotationModule, IgcDataChartInteractivityModule, IgcAnnotationLayerProxyModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisComponent, IgcLineSeriesComponent, IgcCalloutLayerComponent } from 'igniteui-webcomponents-charts';
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";


ModuleManager.register(
    IgcDataChartCoreModule,
    IgcDataChartCategoryModule,
    IgcDataChartAnnotationModule,
    IgcDataChartInteractivityModule,
    IgcAnnotationLayerProxyModule
);

export class Sample {

    private chart: IgcDataChartComponent
    private xAxis: IgcCategoryXAxisComponent
    private yAxis: IgcNumericYAxisComponent
    private lineSeries1: IgcLineSeriesComponent
    private calloutLayer1: IgcCalloutLayerComponent
    private _bind: () => void;

    constructor() {
        var chart = this.chart = document.getElementById('chart') as IgcDataChartComponent;
        var xAxis = this.xAxis = document.getElementById('xAxis') as IgcCategoryXAxisComponent;
        var yAxis = this.yAxis = document.getElementById('yAxis') as IgcNumericYAxisComponent;
        var lineSeries1 = this.lineSeries1 = document.getElementById('lineSeries1') as IgcLineSeriesComponent;
        var calloutLayer1 = this.calloutLayer1 = document.getElementById('CalloutLayer1') as IgcCalloutLayerComponent;

        this._bind = () => {
            xAxis.dataSource = this.countryRenewableElectricity;
            lineSeries1.xAxis = this.xAxis;
            lineSeries1.yAxis = this.yAxis;
            lineSeries1.dataSource = this.countryRenewableElectricity;
        }
        this._bind();
    }

    private _countryRenewableElectricity: CountryRenewableElectricity = null;
    public get countryRenewableElectricity(): CountryRenewableElectricity {
        if (this._countryRenewableElectricity == null)
        {
            this._countryRenewableElectricity = new CountryRenewableElectricity();
        }
        return this._countryRenewableElectricity;
    }

}

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">
        Renewable Electricity Generated
    </div>

    <div class="container fill">
        <igc-data-chart
        should-auto-expand-margin-for-initial-labels="true"
        computed-plot-area-margin-mode="Series"
        name="chart"
        id="chart">
            <igc-category-x-axis
            name="xAxis"
            id="xAxis"
            label="year">
            </igc-category-x-axis>
            <igc-numeric-y-axis
            name="yAxis"
            id="yAxis"
            title="TWh"
            label-location="OutsideRight">
            </igc-numeric-y-axis>
            <igc-line-series
            name="lineSeries1"
            id="lineSeries1"
            value-member-path="america"
            brush="rgba(137, 97, 169, 1)"
            marker-outline="rgba(137, 97, 169, 1)"
            should-hide-auto-callouts="false">
            </igc-line-series>
            <igc-callout-layer
            name="CalloutLayer1"
            id="CalloutLayer1"
            is-auto-callout-behavior-enabled="true"
            callout-leader-brush="rgba(137, 97, 169, 1)"
            callout-outline="rgba(137, 97, 169, 1)"
            callout-background="white"
            callout-text-color="rgba(137, 97, 169, 1)"
            callout-stroke-thickness="1"
            callout-collision-mode="Greedy">
            </igc-callout-layer>
        </igc-data-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

<igc-category-chart
     id="chart"
     width="800px"
     height="400px"
     callouts-visible="true">
</igc-category-chart>
html

let chart = (document.getElementById("chart") as IgcCategoryChartComponent);

chart.dataSource = data;
chart.calloutsDataSource = categoryData;
chart.calloutsXMemberPath = "index";
chart.calloutsYMemberPath = "value";
chart.calloutsLabelMemberPath = "info";
ts

API リファレンス

以下は、上記のセクションで説明した API メンバーのリストです。