Angular 바 차트

Ignite UI for Angular 바 차트, 막대 그래프 또는 가로형 바 차트은 높이가 같지만 길이가 다른 가로 막대로 인코딩된 데이터로 여러 카테고리의 데이터 빈도, 개수, 합계 또는 평균을 빠르게 비교하는 데 사용되는 가장 일반적인 카테고리 차트 유형 중 하나입니다. 이 차트는 시간 경과에 따른 항목 값의 변화를 표시하는 데 이상적입니다. 데이터는 차트의 왼쪽에서 오른쪽으로 데이터 포인트의 값을 향해 확장되는 직사각형 모음을 사용하여 표현됩니다. 바 차트와 매우 유사합니다. 기둥 차트와 매우 유사하지만 바 차트은 시계 방향으로 90도 회전하여 렌더링되므로 가로 방향(왼쪽에서 오른쪽)을 가지며, 은 세로 방향(위아래)을 가지지만 기둥 차트는 세로 방향(위아래)을 갖습니다.

60 以上のリアルタイム Angular チャート を使用して、何百万ものデータ ポイントを描画し、視覚化を構築します。これは、あらゆるアプリケーション シナリオに対応する最も広範なチャート ライブラリです。

無料で試してみる

Angular 바 차트 예

아래 예와 같이 데이터 소스를 여러 IgxBarSeriesComponent에 바인딩하여 IgxDataChartComponent 컨트롤에서 Angular 바 차트 만들 수 있습니다.

EXAMPLE

DATA

MODULES

TS

HTML

SCSS

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 { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";

import { IgxLegendModule, IgxDataChartCoreModule, IgxDataChartCategoryCoreModule, IgxDataChartCategoryModule, IgxDataChartInteractivityModule, IgxDataChartVerticalCategoryModule, IgxDataChartAnnotationModule } from 'igniteui-angular-charts';

@NgModule({
  bootstrap: [AppComponent],
  declarations: [
    AppComponent
],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CommonModule,
    FormsModule,
    IgxLegendModule,
    IgxDataChartCoreModule,
    IgxDataChartCategoryCoreModule,
    IgxDataChartCategoryModule,
    IgxDataChartInteractivityModule,
    IgxDataChartVerticalCategoryModule,
    IgxDataChartAnnotationModule
],
  providers: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies';
import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryYAxisComponent, IgxNumericXAxisComponent, IgxCategoryHighlightLayerComponent, IgxBarSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts';

@Component({
    standalone: false,
    selector: "app-root",
    styleUrls: ["./app.component.scss"],
    templateUrl: "./app.component.html",
    changeDetection: ChangeDetectionStrategy.OnPush
})

export class AppComponent implements AfterViewInit
{

    @ViewChild("legend", { static: true } )
    private legend: IgxLegendComponent
    @ViewChild("chart", { static: true } )
    private chart: IgxDataChartComponent
    @ViewChild("yAxis", { static: true } )
    private yAxis: IgxCategoryYAxisComponent
    @ViewChild("xAxis", { static: true } )
    private xAxis: IgxNumericXAxisComponent
    @ViewChild("categoryHighlightLayer", { static: true } )
    private categoryHighlightLayer: IgxCategoryHighlightLayerComponent
    @ViewChild("barSeries1", { static: true } )
    private barSeries1: IgxBarSeriesComponent
    @ViewChild("barSeries2", { static: true } )
    private barSeries2: IgxBarSeriesComponent
    @ViewChild("tooltips", { static: true } )
    private tooltips: IgxDataToolTipLayerComponent
    private _highestGrossingMovies: HighestGrossingMovies = null;
    public get highestGrossingMovies(): HighestGrossingMovies {
        if (this._highestGrossingMovies == null)
        {
            this._highestGrossingMovies = new HighestGrossingMovies();
        }
        return this._highestGrossingMovies;
    }

    public constructor(private _detector: ChangeDetectorRef)
    {
    }

    public ngAfterViewInit(): void
    {
    }

}

tsコピー

<div class="container vertical sample">
  <div class="legend-title">
      Highest Grossing Movie Franchises
  </div>
  <div class="legend">
      <igx-legend
      name="legend"
      #legend
      orientation="Horizontal">
      </igx-legend>
  </div>
  <div class="container fill">
      <igx-data-chart
      name="Chart"
      #chart
      [legend]="legend">
          <igx-category-y-axis
          name="yAxis"
          #yAxis
          label="franchise"
          useEnhancedIntervalManagement="true"
          enhancedIntervalPreferMoreCategoryLabels="true"
          [dataSource]="highestGrossingMovies"
          isInverted="true"
          gap="0.5"
          overlap="-0.1">
          </igx-category-y-axis>
          <igx-numeric-x-axis
          name="xAxis"
          #xAxis
          title="Billions of U.S. Dollars">
          </igx-numeric-x-axis>
          <igx-category-highlight-layer
          name="CategoryHighlightLayer"
          #categoryHighlightLayer>
          </igx-category-highlight-layer>
          <igx-bar-series
          name="BarSeries1"
          #barSeries1
          [xAxis]="xAxis"
          [yAxis]="yAxis"
          title="Total Revenue of Franchise"
          valueMemberPath="totalRevenue"
          [dataSource]="highestGrossingMovies"
          showDefaultTooltip="true"
          isTransitionInEnabled="true"
          isHighlightingEnabled="true">
          </igx-bar-series>
          <igx-bar-series
          name="BarSeries2"
          #barSeries2
          [xAxis]="xAxis"
          [yAxis]="yAxis"
          title="Highest Grossing Movie in Series"
          valueMemberPath="highestGrossing"
          [dataSource]="highestGrossingMovies"
          showDefaultTooltip="true"
          isTransitionInEnabled="true"
          isHighlightingEnabled="true">
          </igx-bar-series>
          <igx-data-tool-tip-layer
          name="Tooltips"
          #tooltips>
          </igx-data-tool-tip-layer>
      </igx-data-chart>
  </div>
</div>
htmlコピー

/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scssコピー

Edit in: Codesandbox

이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.

바 차트 권장 사항

Angular Bar Charts가 귀하의 프로젝트에 적합할까요?

Angular 바 차트 데이터 또는 데이터로 올바른 스토리를 전달하는 방법에 따라 여러 변형이 포함됩니다. 여기에는 다음이 포함됩니다.

• 그룹화된 바 차트
• 누적 바 차트
• 극 막대 바 차트
• 누적 100 바 차트

바 차트 사용 사례

바 차트 선택하는 데는 몇 가지 일반적인 사용 사례가 있습니다.

• 시간에 따른 추세나 데이터 범주의 숫자 값 변화를 표시해야 합니다.
• 1개 이상의 데이터 계열의 데이터 값을 비교해야 합니다.
• 부분 대 전체 비교를 표시하려고 합니다.
• 카테고리의 상위 또는 하위 비율을 표시하려고 합니다.
• 하위 카테고리(누적 막대)로 그룹화된 여러 데이터 포인트를 분석합니다.

이러한 사용 사례는 일반적으로 다음 시나리오에 사용됩니다.

• 영업관리.
• 재고 관리.
• 주식 차트.
• 숫자 값 또는 시계열 값을 비교하는 문자열 값입니다.

바 차트 모범 사례:

• 숫자 축을 0에서 시작합니다.
• 막대에는 단일 색상을 사용하십시오.
• 각 막대를 분리하는 공간이 막대 자체 너비의 1/2인지 확인하십시오.
• 순위 지정 또는 비교 순서가 지정된 범주(항목)가 오름차순 또는 내림차순으로 정렬되어 있는지 확인하세요.
• 가독성을 위해 범주 값을 Y축(차트의 왼쪽 레이블)에 오른쪽 정렬합니다.

바 차트 사용하지 말아야 할 경우

• 데이터가 너무 많아서 Y축이 공간에 맞지 않거나 읽을 수 없습니다.
• 자세한 시계열 분석이 필요합니다. 이러한 유형의 데이터에 대해 시계열이 포함된 선형 차트 고려하세요.

바 차트 데이터 구조:

• 데이터 소스는 데이터 항목의 배열 또는 목록이어야 합니다.
• 데이터 소스에는 데이터 항목이 하나 이상 포함되어 있어야 합니다.
• 목록에는 하나 이상의 데이터 열(문자열 또는 날짜 시간)이 포함되어야 합니다.
• 목록에는 숫자 데이터 열이 하나 이상 포함되어야 합니다.

단일 시리즈가 있는 Angular 바 차트

바 차트 카테고리 시리즈 그룹에 속하며 차트의 왼쪽에서 오른쪽으로 데이터 포인트 값을 향해 확장되는 직사각형 모음을 사용하여 렌더링됩니다. 아래 예와 같이 데이터를 IgxBarSeriesComponent에 바인딩하여 IgxDataChartComponent 컨트롤에서 이러한 유형의 차트를 생성할 수 있습니다.

EXAMPLE

DATA

MODULES

TS

HTML

SCSS

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

    public x: number;
    public y: number;
    public label: string;
    public percent: number;
    public shop: string;

}
export class OnlineShoppingSearches extends Array<OnlineShoppingSearchesItem> {
    public constructor(items: Array<OnlineShoppingSearchesItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new OnlineShoppingSearchesItem(
                {
                    x: 63,
                    y: 0,
                    label: `63%`,
                    percent: 63,
                    shop: `Amazon`
                }),
                new OnlineShoppingSearchesItem(
                {
                    x: 48,
                    y: 1,
                    label: `48%`,
                    percent: 48,
                    shop: `Search Engines`
                }),
                new OnlineShoppingSearchesItem(
                {
                    x: 33,
                    y: 2,
                    label: `33%`,
                    percent: 33,
                    shop: `Retailer Sites`
                }),
                new OnlineShoppingSearchesItem(
                {
                    x: 25,
                    y: 3,
                    label: `25%`,
                    percent: 25,
                    shop: `Marketplaces`
                }),
                new OnlineShoppingSearchesItem(
                {
                    x: 21,
                    y: 4,
                    label: `21%`,
                    percent: 21,
                    shop: `Brand Website`
                }),
                new OnlineShoppingSearchesItem(
                {
                    x: 10,
                    y: 5,
                    label: `10%`,
                    percent: 10,
                    shop: `Comparison Sites`
                }),
                new OnlineShoppingSearchesItem(
                {
                    x: 8,
                    y: 6,
                    label: `8%`,
                    percent: 8,
                    shop: `Social Media`
                }),
                new OnlineShoppingSearchesItem(
                {
                    x: 2,
                    y: 7,
                    label: `2%`,
                    percent: 2,
                    shop: `Other`
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
tsコピー

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";

import { IgxDataChartCoreModule, IgxDataChartCategoryCoreModule, IgxDataChartCategoryModule, IgxDataChartAnnotationModule, IgxDataChartInteractivityModule, IgxDataChartVerticalCategoryModule } from 'igniteui-angular-charts';

@NgModule({
  bootstrap: [AppComponent],
  declarations: [
    AppComponent
],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CommonModule,
    FormsModule,
    IgxDataChartCoreModule,
    IgxDataChartCategoryCoreModule,
    IgxDataChartCategoryModule,
    IgxDataChartAnnotationModule,
    IgxDataChartInteractivityModule,
    IgxDataChartVerticalCategoryModule
],
  providers: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { OnlineShoppingSearchesItem, OnlineShoppingSearches } from './OnlineShoppingSearches';
import { IgxDataChartComponent, IgxCategoryYAxisComponent, IgxNumericXAxisComponent, IgxCategoryHighlightLayerComponent, IgxBarSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts';

@Component({
    standalone: false,
    selector: "app-root",
    styleUrls: ["./app.component.scss"],
    templateUrl: "./app.component.html",
    changeDetection: ChangeDetectionStrategy.OnPush
})

export class AppComponent implements AfterViewInit
{

    @ViewChild("chart", { static: true } )
    private chart: IgxDataChartComponent
    @ViewChild("yAxis", { static: true } )
    private yAxis: IgxCategoryYAxisComponent
    @ViewChild("xAxis", { static: true } )
    private xAxis: IgxNumericXAxisComponent
    @ViewChild("categoryHighlightLayer", { static: true } )
    private categoryHighlightLayer: IgxCategoryHighlightLayerComponent
    @ViewChild("barSeries1", { static: true } )
    private barSeries1: IgxBarSeriesComponent
    @ViewChild("tooltips", { static: true } )
    private tooltips: IgxDataToolTipLayerComponent
    private _onlineShoppingSearches: OnlineShoppingSearches = null;
    public get onlineShoppingSearches(): OnlineShoppingSearches {
        if (this._onlineShoppingSearches == null)
        {
            this._onlineShoppingSearches = new OnlineShoppingSearches();
        }
        return this._onlineShoppingSearches;
    }

    public constructor(private _detector: ChangeDetectorRef)
    {
    }

    public ngAfterViewInit(): void
    {
    }

}

tsコピー

<div class="container vertical sample">
  <div class="legend-title">
      Where Online Shoppers Start Their Search
  </div>
  <div class="container fill">
      <igx-data-chart
      name="Chart"
      #chart
      isHorizontalZoomEnabled="false"
      isVerticalZoomEnabled="false">
          <igx-category-y-axis
          name="yAxis"
          #yAxis
          label="shop"
          useEnhancedIntervalManagement="true"
          enhancedIntervalPreferMoreCategoryLabels="true"
          [dataSource]="onlineShoppingSearches"
          isInverted="true"
          gap="0.5"
          overlap="-0.1">
          </igx-category-y-axis>
          <igx-numeric-x-axis
          name="xAxis"
          #xAxis
          labelFormat="{0}%">
          </igx-numeric-x-axis>
          <igx-category-highlight-layer
          name="CategoryHighlightLayer"
          #categoryHighlightLayer>
          </igx-category-highlight-layer>
          <igx-bar-series
          name="BarSeries1"
          #barSeries1
          [xAxis]="xAxis"
          [yAxis]="yAxis"
          valueMemberPath="percent"
          [dataSource]="onlineShoppingSearches"
          showDefaultTooltip="true"
          isTransitionInEnabled="true"
          isHighlightingEnabled="true">
          </igx-bar-series>
          <igx-data-tool-tip-layer
          name="Tooltips"
          #tooltips>
          </igx-data-tool-tip-layer>
      </igx-data-chart>
  </div>
</div>
htmlコピー

/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scssコピー

Edit in: Codesandbox

여러 시리즈가 있는 Angular 바 차트

바 차트 비교 목적으로 범주별로 여러 막대를 렌더링할 수 있습니다. 이 예에서 바 차트 인기 영화 프랜차이즈 간의 박스오피스 수익을 비교합니다. 아래 예와 같이 데이터를 여러 IgxBarSeriesComponent에 바인딩하여 IgxDataChartComponent 컨트롤에서 이러한 유형의 차트를 생성할 수 있습니다.

EXAMPLE

DATA

MODULES

TS

HTML

SCSS

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 { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";

import { IgxLegendModule, IgxDataChartCoreModule, IgxDataChartCategoryCoreModule, IgxDataChartCategoryModule, IgxDataChartInteractivityModule, IgxDataChartVerticalCategoryModule, IgxDataChartAnnotationModule } from 'igniteui-angular-charts';

@NgModule({
  bootstrap: [AppComponent],
  declarations: [
    AppComponent
],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CommonModule,
    FormsModule,
    IgxLegendModule,
    IgxDataChartCoreModule,
    IgxDataChartCategoryCoreModule,
    IgxDataChartCategoryModule,
    IgxDataChartInteractivityModule,
    IgxDataChartVerticalCategoryModule,
    IgxDataChartAnnotationModule
],
  providers: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies';
import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryYAxisComponent, IgxNumericXAxisComponent, IgxCategoryHighlightLayerComponent, IgxBarSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts';

@Component({
    standalone: false,
    selector: "app-root",
    styleUrls: ["./app.component.scss"],
    templateUrl: "./app.component.html",
    changeDetection: ChangeDetectionStrategy.OnPush
})

export class AppComponent implements AfterViewInit
{

    @ViewChild("legend", { static: true } )
    private legend: IgxLegendComponent
    @ViewChild("chart", { static: true } )
    private chart: IgxDataChartComponent
    @ViewChild("yAxis", { static: true } )
    private yAxis: IgxCategoryYAxisComponent
    @ViewChild("xAxis", { static: true } )
    private xAxis: IgxNumericXAxisComponent
    @ViewChild("categoryHighlightLayer", { static: true } )
    private categoryHighlightLayer: IgxCategoryHighlightLayerComponent
    @ViewChild("barSeries1", { static: true } )
    private barSeries1: IgxBarSeriesComponent
    @ViewChild("barSeries2", { static: true } )
    private barSeries2: IgxBarSeriesComponent
    @ViewChild("tooltips", { static: true } )
    private tooltips: IgxDataToolTipLayerComponent
    private _highestGrossingMovies: HighestGrossingMovies = null;
    public get highestGrossingMovies(): HighestGrossingMovies {
        if (this._highestGrossingMovies == null)
        {
            this._highestGrossingMovies = new HighestGrossingMovies();
        }
        return this._highestGrossingMovies;
    }

    public constructor(private _detector: ChangeDetectorRef)
    {
    }

    public ngAfterViewInit(): void
    {
    }

}

tsコピー

<div class="container vertical sample">
  <div class="legend-title">
      Highest Grossing Movie Franchises
  </div>
  <div class="legend">
      <igx-legend
      name="legend"
      #legend
      orientation="Horizontal">
      </igx-legend>
  </div>
  <div class="container fill">
      <igx-data-chart
      name="Chart"
      #chart
      [legend]="legend">
          <igx-category-y-axis
          name="yAxis"
          #yAxis
          label="franchise"
          useEnhancedIntervalManagement="true"
          enhancedIntervalPreferMoreCategoryLabels="true"
          [dataSource]="highestGrossingMovies"
          isInverted="true"
          gap="0.5"
          overlap="-0.1">
          </igx-category-y-axis>
          <igx-numeric-x-axis
          name="xAxis"
          #xAxis
          title="Billions of U.S. Dollars">
          </igx-numeric-x-axis>
          <igx-category-highlight-layer
          name="CategoryHighlightLayer"
          #categoryHighlightLayer>
          </igx-category-highlight-layer>
          <igx-bar-series
          name="BarSeries1"
          #barSeries1
          [xAxis]="xAxis"
          [yAxis]="yAxis"
          title="Total Revenue of Franchise"
          valueMemberPath="totalRevenue"
          [dataSource]="highestGrossingMovies"
          showDefaultTooltip="true"
          isTransitionInEnabled="true"
          isHighlightingEnabled="true">
          </igx-bar-series>
          <igx-bar-series
          name="BarSeries2"
          #barSeries2
          [xAxis]="xAxis"
          [yAxis]="yAxis"
          title="Highest Grossing Movie in Series"
          valueMemberPath="highestGrossing"
          [dataSource]="highestGrossingMovies"
          showDefaultTooltip="true"
          isTransitionInEnabled="true"
          isHighlightingEnabled="true">
          </igx-bar-series>
          <igx-data-tool-tip-layer
          name="Tooltips"
          #tooltips>
          </igx-data-tool-tip-layer>
      </igx-data-chart>
  </div>
</div>
htmlコピー

/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scssコピー

Edit in: Codesandbox

Angular 바 차트 스타일링

바 차트 스타일을 지정할 수 있으며, 예를 들어 백분율 비교를 보여주기 위해 각 막대에 주석 값을 사용하는 기능을 허용합니다. 아래 예와 같이 데이터를 IgxBarSeriesComponent에 바인딩하고 IgxCalloutLayerComponent를 추가하여 IgxDataChartComponent 컨트롤에서 이러한 유형의 차트를 생성할 수 있습니다.

EXAMPLE

DATA

MODULES

TS

HTML

SCSS

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

    public x: number;
    public y: number;
    public label: string;
    public percent: number;
    public shop: string;

}
export class OnlineShoppingSearches extends Array<OnlineShoppingSearchesItem> {
    public constructor(items: Array<OnlineShoppingSearchesItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new OnlineShoppingSearchesItem(
                {
                    x: 63,
                    y: 0,
                    label: `63%`,
                    percent: 63,
                    shop: `Amazon`
                }),
                new OnlineShoppingSearchesItem(
                {
                    x: 48,
                    y: 1,
                    label: `48%`,
                    percent: 48,
                    shop: `Search Engines`
                }),
                new OnlineShoppingSearchesItem(
                {
                    x: 33,
                    y: 2,
                    label: `33%`,
                    percent: 33,
                    shop: `Retailer Sites`
                }),
                new OnlineShoppingSearchesItem(
                {
                    x: 25,
                    y: 3,
                    label: `25%`,
                    percent: 25,
                    shop: `Marketplaces`
                }),
                new OnlineShoppingSearchesItem(
                {
                    x: 21,
                    y: 4,
                    label: `21%`,
                    percent: 21,
                    shop: `Brand Website`
                }),
                new OnlineShoppingSearchesItem(
                {
                    x: 10,
                    y: 5,
                    label: `10%`,
                    percent: 10,
                    shop: `Comparison Sites`
                }),
                new OnlineShoppingSearchesItem(
                {
                    x: 8,
                    y: 6,
                    label: `8%`,
                    percent: 8,
                    shop: `Social Media`
                }),
                new OnlineShoppingSearchesItem(
                {
                    x: 2,
                    y: 7,
                    label: `2%`,
                    percent: 2,
                    shop: `Other`
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
tsコピー

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";

import { IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartCategoryCoreModule, IgxDataChartInteractivityModule, IgxDataChartVerticalCategoryModule, IgxAnnotationLayerProxyModule, IgxCalloutLayerModule, IgxDataChartAnnotationModule } from 'igniteui-angular-charts';

@NgModule({
  bootstrap: [AppComponent],
  declarations: [
    AppComponent
],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CommonModule,
    FormsModule,
    IgxDataChartCoreModule,
    IgxDataChartCategoryModule,
    IgxDataChartCategoryCoreModule,
    IgxDataChartInteractivityModule,
    IgxDataChartVerticalCategoryModule,
    IgxAnnotationLayerProxyModule,
    IgxCalloutLayerModule,
    IgxDataChartAnnotationModule
],
  providers: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { OnlineShoppingSearchesItem, OnlineShoppingSearches } from './OnlineShoppingSearches';
import { IgxDataChartComponent, IgxCategoryYAxisComponent, IgxNumericXAxisComponent, IgxCategoryHighlightLayerComponent, IgxBarSeriesComponent, IgxCalloutLayerComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts';

@Component({
    standalone: false,
    selector: "app-root",
    styleUrls: ["./app.component.scss"],
    templateUrl: "./app.component.html",
    changeDetection: ChangeDetectionStrategy.OnPush
})

export class AppComponent implements AfterViewInit
{

    @ViewChild("chart", { static: true } )
    private chart: IgxDataChartComponent
    @ViewChild("yAxis", { static: true } )
    private yAxis: IgxCategoryYAxisComponent
    @ViewChild("xAxis", { static: true } )
    private xAxis: IgxNumericXAxisComponent
    @ViewChild("categoryHighlightLayer", { static: true } )
    private categoryHighlightLayer: IgxCategoryHighlightLayerComponent
    @ViewChild("barSeries1", { static: true } )
    private barSeries1: IgxBarSeriesComponent
    @ViewChild("calloutLayer1", { static: true } )
    private calloutLayer1: IgxCalloutLayerComponent
    @ViewChild("tooltips", { static: true } )
    private tooltips: IgxDataToolTipLayerComponent
    private _onlineShoppingSearches: OnlineShoppingSearches = null;
    public get onlineShoppingSearches(): OnlineShoppingSearches {
        if (this._onlineShoppingSearches == null)
        {
            this._onlineShoppingSearches = new OnlineShoppingSearches();
        }
        return this._onlineShoppingSearches;
    }

    public constructor(private _detector: ChangeDetectorRef)
    {
    }

    public ngAfterViewInit(): void
    {
    }

}

tsコピー

<div class="container vertical sample">
  <div class="legend-title">
      Where Online Shoppers Start Their Search
  </div>
  <div class="container fill">
      <igx-data-chart
      name="Chart"
      #chart
      isHorizontalZoomEnabled="false"
      isVerticalZoomEnabled="false">
          <igx-category-y-axis
          name="yAxis"
          #yAxis
          label="shop"
          [dataSource]="onlineShoppingSearches"
          isInverted="true"
          gap="0.75">
          </igx-category-y-axis>
          <igx-numeric-x-axis
          name="xAxis"
          #xAxis
          interval="20"
          maximumValue="80"
          minimumValue="0"
          labelFormat="{0}%">
          </igx-numeric-x-axis>
          <igx-category-highlight-layer
          name="CategoryHighlightLayer"
          #categoryHighlightLayer>
          </igx-category-highlight-layer>
          <igx-bar-series
          name="BarSeries1"
          #barSeries1
          [xAxis]="xAxis"
          [yAxis]="yAxis"
          valueMemberPath="percent"
          [dataSource]="onlineShoppingSearches"
          showDefaultTooltip="true"
          isTransitionInEnabled="true"
          isHighlightingEnabled="true"
          brush="rgba(201, 56, 207, 1)"
          outline="rgba(133, 6, 138, 1)"
          thickness="2"
          areaFillOpacity="0.5"
          markerType="Hidden">
          </igx-bar-series>
          <igx-callout-layer
          name="CalloutLayer1"
          #calloutLayer1
          isAutoCalloutBehaviorEnabled="true"
          calloutTextColor="rgba(133, 6, 138, 1)"
          calloutBackground="rgba(0, 0, 0, 0)"
          calloutLeaderBrush="rgba(0, 0, 0, 0)"
          [dataSource]="onlineShoppingSearches">
          </igx-callout-layer>
          <igx-data-tool-tip-layer
          name="Tooltips"
          #tooltips>
          </igx-data-tool-tip-layer>
      </igx-data-chart>
  </div>
</div>
htmlコピー

/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scssコピー

Edit in: Codesandbox

Angular 스택 막 바 차트

누적 바 차트 또는 누적 막대 그래프는 차트의 가로 막대에 다양한 크기의 조각을 표시하여 다양한 데이터 범주의 구성을 비교하는 데 사용되는 범주 차트 유형입니다. 각 막대의 길이 또는 조각 더미는 전체 값에 비례합니다.

누적 바 차트 데이터를 나타내는 데이터 요소가 수평으로 나란히 쌓여 데이터를 시각적으로 그룹화한다는 점에서 바 차트와 다릅니다. 각 스택에는 양수 값과 음수 값이 모두 포함될 수 있습니다. 모든 양수 값은 X축의 양수 쪽에 그룹화되고, 모든 음수 값은 X축의 음수 쪽에 그룹화됩니다.

아래 예와 같이 데이터를 IgxStackedBarSeriesComponent에 바인딩하여 IgxDataChartComponent 컨트롤에서 이러한 유형의 차트를 생성할 수 있습니다.

EXAMPLE

DATA

MODULES

TS

HTML

SCSS

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

    public location: string;
    public year: number;
    public hydro: number;
    public solar: number;
    public wind: number;
    public other: number;

}
export class EnergyRenewableConsumption extends Array<EnergyRenewableConsumptionItem> {
    public constructor(items: Array<EnergyRenewableConsumptionItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new EnergyRenewableConsumptionItem(
                {
                    location: `China`,
                    year: 2019,
                    hydro: 1269.5,
                    solar: 223,
                    wind: 405.2,
                    other: 102.8
                }),
                new EnergyRenewableConsumptionItem(
                {
                    location: `Europe`,
                    year: 2019,
                    hydro: 632.54,
                    solar: 154,
                    wind: 461.3,
                    other: 220.3
                }),
                new EnergyRenewableConsumptionItem(
                {
                    location: `USA`,
                    year: 2019,
                    hydro: 271.16,
                    solar: 108,
                    wind: 303.4,
                    other: 78.34
                }),
                new EnergyRenewableConsumptionItem(
                {
                    location: `Brazil`,
                    year: 2019,
                    hydro: 399.3,
                    solar: 5.5,
                    wind: 55.83,
                    other: 56.25
                }),
                new EnergyRenewableConsumptionItem(
                {
                    location: `Canada`,
                    year: 2019,
                    hydro: 381.98,
                    solar: 4.3,
                    wind: 34.17,
                    other: 10.81
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
tsコピー

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";

import { IgxLegendModule, IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartCategoryCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule, IgxDataChartStackedModule, IgxStackedFragmentSeriesModule, IgxCalloutLayerModule } from 'igniteui-angular-charts';

@NgModule({
  bootstrap: [AppComponent],
  declarations: [
    AppComponent
],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CommonModule,
    FormsModule,
    IgxLegendModule,
    IgxDataChartCoreModule,
    IgxDataChartCategoryModule,
    IgxDataChartCategoryCoreModule,
    IgxDataChartInteractivityModule,
    IgxDataChartAnnotationModule,
    IgxDataChartStackedModule,
    IgxStackedFragmentSeriesModule,
    IgxCalloutLayerModule
],
  providers: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { EnergyRenewableConsumptionItem, EnergyRenewableConsumption } from './EnergyRenewableConsumption';
import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryYAxisComponent, IgxNumericXAxisComponent, IgxStackedBarSeriesComponent, IgxStackedFragmentSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts';

@Component({
    standalone: false,
    selector: "app-root",
    styleUrls: ["./app.component.scss"],
    templateUrl: "./app.component.html",
    changeDetection: ChangeDetectionStrategy.OnPush
})

export class AppComponent implements AfterViewInit
{

    @ViewChild("legend", { static: true } )
    private legend: IgxLegendComponent
    @ViewChild("chart", { static: true } )
    private chart: IgxDataChartComponent
    @ViewChild("yAxis", { static: true } )
    private yAxis: IgxCategoryYAxisComponent
    @ViewChild("xAxis", { static: true } )
    private xAxis: IgxNumericXAxisComponent
    @ViewChild("stackedBarSeries", { static: true } )
    private stackedBarSeries: IgxStackedBarSeriesComponent
    @ViewChild("s1", { static: true } )
    private s1: IgxStackedFragmentSeriesComponent
    @ViewChild("s2", { static: true } )
    private s2: IgxStackedFragmentSeriesComponent
    @ViewChild("s3", { static: true } )
    private s3: IgxStackedFragmentSeriesComponent
    @ViewChild("s4", { static: true } )
    private s4: IgxStackedFragmentSeriesComponent
    @ViewChild("dataToolTipLayer", { static: true } )
    private dataToolTipLayer: IgxDataToolTipLayerComponent
    private _energyRenewableConsumption: EnergyRenewableConsumption = null;
    public get energyRenewableConsumption(): EnergyRenewableConsumption {
        if (this._energyRenewableConsumption == null)
        {
            this._energyRenewableConsumption = new EnergyRenewableConsumption();
        }
        return this._energyRenewableConsumption;
    }

    public constructor(private _detector: ChangeDetectorRef)
    {
    }

    public ngAfterViewInit(): void
    {
    }

}

tsコピー

<div class="container vertical sample">
  <div class="legend-title">
      Renewable Energy Consumption
  </div>
  <div class="legend">
      <igx-legend
      name="legend"
      #legend
      orientation="Horizontal">
      </igx-legend>
  </div>
  <div class="container fill">
      <igx-data-chart
      name="chart"
      #chart
      [legend]="legend"
      isHorizontalZoomEnabled="false"
      isVerticalZoomEnabled="false">
          <igx-category-y-axis
          name="yAxis"
          #yAxis
          [dataSource]="energyRenewableConsumption"
          label="location"
          isInverted="true"
          gap="0.75">
          </igx-category-y-axis>
          <igx-numeric-x-axis
          name="xAxis"
          #xAxis
          minimumValue="0"
          title="TWh">
          </igx-numeric-x-axis>
          <igx-stacked-bar-series
          name="stackedBarSeries"
          #stackedBarSeries
          [dataSource]="energyRenewableConsumption"
          [xAxis]="xAxis"
          [yAxis]="yAxis"
          showDefaultTooltip="true"
          areaFillOpacity="1">
              <igx-stacked-fragment-series
              name="s1"
              #s1
              valueMemberPath="hydro"
              title="Hydro">
              </igx-stacked-fragment-series>
              <igx-stacked-fragment-series
              name="s2"
              #s2
              valueMemberPath="wind"
              title="Wind">
              </igx-stacked-fragment-series>
              <igx-stacked-fragment-series
              name="s3"
              #s3
              valueMemberPath="solar"
              title="Solar">
              </igx-stacked-fragment-series>
              <igx-stacked-fragment-series
              name="s4"
              #s4
              valueMemberPath="other"
              title="Other">
              </igx-stacked-fragment-series>
          </igx-stacked-bar-series>
          <igx-data-tool-tip-layer
          name="dataToolTipLayer"
          #dataToolTipLayer>
          </igx-data-tool-tip-layer>
      </igx-data-chart>
  </div>
</div>
htmlコピー

/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scssコピー

Edit in: Codesandbox

Angular 스택 100% 막 바 차트

Angular Stacked 100% 바 차트 X축(차트의 하단 레이블)의 값을 처리하는 것을 제외하고는 모든 면에서 Angular Stacked 바 차트와 동일합니다. Stacked 100 bar chart는 데이터를 직접 표현하는 대신 데이터 포인트의 모든 값의 합계에 대한 백분율로 데이터를 표현합니다.

아래 예와 같이 데이터를 IgxStacked100BarSeriesComponent에 바인딩하여 IgxDataChartComponent 컨트롤에서 이러한 유형의 차트를 생성할 수 있습니다.

EXAMPLE

DATA

MODULES

TS

HTML

SCSS

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

    public location: string;
    public year: number;
    public hydro: number;
    public solar: number;
    public wind: number;
    public other: number;

}
export class EnergyRenewableConsumption extends Array<EnergyRenewableConsumptionItem> {
    public constructor(items: Array<EnergyRenewableConsumptionItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new EnergyRenewableConsumptionItem(
                {
                    location: `China`,
                    year: 2019,
                    hydro: 1269.5,
                    solar: 223,
                    wind: 405.2,
                    other: 102.8
                }),
                new EnergyRenewableConsumptionItem(
                {
                    location: `Europe`,
                    year: 2019,
                    hydro: 632.54,
                    solar: 154,
                    wind: 461.3,
                    other: 220.3
                }),
                new EnergyRenewableConsumptionItem(
                {
                    location: `USA`,
                    year: 2019,
                    hydro: 271.16,
                    solar: 108,
                    wind: 303.4,
                    other: 78.34
                }),
                new EnergyRenewableConsumptionItem(
                {
                    location: `Brazil`,
                    year: 2019,
                    hydro: 399.3,
                    solar: 5.5,
                    wind: 55.83,
                    other: 56.25
                }),
                new EnergyRenewableConsumptionItem(
                {
                    location: `Canada`,
                    year: 2019,
                    hydro: 381.98,
                    solar: 4.3,
                    wind: 34.17,
                    other: 10.81
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
tsコピー

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";

import { IgxLegendModule, IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartCategoryCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule, IgxDataChartStackedModule, IgxStackedFragmentSeriesModule } from 'igniteui-angular-charts';

@NgModule({
  bootstrap: [AppComponent],
  declarations: [
    AppComponent
],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CommonModule,
    FormsModule,
    IgxLegendModule,
    IgxDataChartCoreModule,
    IgxDataChartCategoryModule,
    IgxDataChartCategoryCoreModule,
    IgxDataChartInteractivityModule,
    IgxDataChartAnnotationModule,
    IgxDataChartStackedModule,
    IgxStackedFragmentSeriesModule
],
  providers: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { EnergyRenewableConsumptionItem, EnergyRenewableConsumption } from './EnergyRenewableConsumption';
import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryYAxisComponent, IgxNumericXAxisComponent, IgxStacked100BarSeriesComponent, IgxStackedFragmentSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts';

@Component({
    standalone: false,
    selector: "app-root",
    styleUrls: ["./app.component.scss"],
    templateUrl: "./app.component.html",
    changeDetection: ChangeDetectionStrategy.OnPush
})

export class AppComponent implements AfterViewInit
{

    @ViewChild("legend", { static: true } )
    private legend: IgxLegendComponent
    @ViewChild("chart", { static: true } )
    private chart: IgxDataChartComponent
    @ViewChild("yAxis", { static: true } )
    private yAxis: IgxCategoryYAxisComponent
    @ViewChild("xAxis", { static: true } )
    private xAxis: IgxNumericXAxisComponent
    @ViewChild("stacked100BarSeries", { static: true } )
    private stacked100BarSeries: IgxStacked100BarSeriesComponent
    @ViewChild("s1", { static: true } )
    private s1: IgxStackedFragmentSeriesComponent
    @ViewChild("s2", { static: true } )
    private s2: IgxStackedFragmentSeriesComponent
    @ViewChild("s3", { static: true } )
    private s3: IgxStackedFragmentSeriesComponent
    @ViewChild("s4", { static: true } )
    private s4: IgxStackedFragmentSeriesComponent
    @ViewChild("dataToolTipLayer", { static: true } )
    private dataToolTipLayer: IgxDataToolTipLayerComponent
    private _energyRenewableConsumption: EnergyRenewableConsumption = null;
    public get energyRenewableConsumption(): EnergyRenewableConsumption {
        if (this._energyRenewableConsumption == null)
        {
            this._energyRenewableConsumption = new EnergyRenewableConsumption();
        }
        return this._energyRenewableConsumption;
    }

    public constructor(private _detector: ChangeDetectorRef)
    {
    }

    public ngAfterViewInit(): void
    {
    }

}

tsコピー

<div class="container vertical sample">
  <div class="legend-title">
      Renewable Energy Consumption
  </div>
  <div class="legend">
      <igx-legend
      name="legend"
      #legend
      orientation="Horizontal">
      </igx-legend>
  </div>
  <div class="container fill">
      <igx-data-chart
      name="chart"
      #chart
      [legend]="legend"
      isHorizontalZoomEnabled="false"
      isVerticalZoomEnabled="false">
          <igx-category-y-axis
          name="yAxis"
          #yAxis
          [dataSource]="energyRenewableConsumption"
          label="location"
          isInverted="true">
          </igx-category-y-axis>
          <igx-numeric-x-axis
          name="xAxis"
          #xAxis
          minimumValue="0"
          title="TWh">
          </igx-numeric-x-axis>
          <igx-stacked-100-bar-series
          name="stacked100BarSeries"
          #stacked100BarSeries
          [dataSource]="energyRenewableConsumption"
          [xAxis]="xAxis"
          [yAxis]="yAxis"
          showDefaultTooltip="true"
          areaFillOpacity="1">
              <igx-stacked-fragment-series
              name="s1"
              #s1
              valueMemberPath="hydro"
              title="Hydro">
              </igx-stacked-fragment-series>
              <igx-stacked-fragment-series
              name="s2"
              #s2
              valueMemberPath="wind"
              title="Wind">
              </igx-stacked-fragment-series>
              <igx-stacked-fragment-series
              name="s3"
              #s3
              valueMemberPath="solar"
              title="Solar">
              </igx-stacked-fragment-series>
              <igx-stacked-fragment-series
              name="s4"
              #s4
              valueMemberPath="other"
              title="Other">
              </igx-stacked-fragment-series>
          </igx-stacked-100-bar-series>
          <igx-data-tool-tip-layer
          name="dataToolTipLayer"
          #dataToolTipLayer>
          </igx-data-tool-tip-layer>
      </igx-data-chart>
  </div>
</div>
htmlコピー

/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scssコピー

Edit in: Codesandbox

추가 리소스

다음 항목에서 관련 차트 유형에 대한 자세한 내용을 확인할 수 있습니다.

• 영역 차트
• 기둥 차트
• 선형 차트
• 스플라인 차트
• 누적 차트

API 참조

다음 표에는 위 섹션에서 언급된 API 멤버가 나열되어 있습니다.

• IgxDataChartComponent
• ItemsSource
• IgxBarSeriesComponent
• IgxCalloutLayerComponent
• IgxStackedBarSeriesComponent
• IgxStacked100BarSeriesComponent
• IgxStackedBarSeriesComponent