Web Components Chart Features
The Ignite UI for Web Components Charts allow you to display many different features to portray the full data story to be told with your chart. Each of these features are fully customizable, and can be styled to suit your design needs - allowing you full control. Interactions such as highlighting and annotations allow you to call out important data details allowing for a deeper data analysis within your chart.
The Web Components Charts offer the following chart features:
Axis
Modify or customize all aspects of both the X-Axis and Y-Axis using the different axis properties. You can display gridlines, customize the style of tickmarks, change axis titles, and even modify axis locations and crossing values. You can learn more about customizations of the Web Components chart's Axis Gridlines, Axis Layouts, and Axis Options topic.
// data chart's modules:
import { IgcDataChartCoreModule, IgcDataChartScatterModule, IgcDataChartScatterCoreModule, IgcDataChartInteractivityModule,
IgcDataChartComponent, IgcLegendComponent, IgcNumericXAxisComponent, IgcNumericYAxisComponent } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';
ModuleManager.register(
IgcDataChartCoreModule,
IgcDataChartScatterModule,
IgcDataChartScatterCoreModule,
IgcDataChartInteractivityModule,
);
export class DataChartAxisCrossing {
private chart: IgcDataChartComponent;
private xAxis: IgcNumericXAxisComponent;
private yAxis: IgcNumericYAxisComponent;
private xAxisCrossLabel: HTMLLabelElement;
private yAxisCrossLabel: HTMLLabelElement;
private data: any[] = [];
constructor() {
this.onXAxisSliderChanged = this.onXAxisSliderChanged.bind(this);
this.onYAxisSliderChanged = this.onYAxisSliderChanged.bind(this);
this.initData();
this.chart = document.getElementById('chart') as IgcDataChartComponent;
this.xAxis = document.getElementById("xAxis") as IgcNumericXAxisComponent;
this.yAxis = document.getElementById("yAxis") as IgcNumericYAxisComponent;
this.xAxis.crossingAxis = this.yAxis;
this.yAxis.crossingAxis = this.xAxis;
this.xAxisCrossLabel = document.getElementById("xAxisCrossLabel") as HTMLLabelElement;
this.yAxisCrossLabel = document.getElementById("yAxisCrossLabel") as HTMLLabelElement;
const xAxisSlider = document.getElementById("xAxisCrossingSlider") as HTMLInputElement;
xAxisSlider.addEventListener("input", this.onXAxisSliderChanged);
const yAxisSlider = document.getElementById("yAxisCrossingSlider") as HTMLInputElement;
yAxisSlider.addEventListener("input", this.onYAxisSliderChanged);
this.chart.dataSource = this.data;
}
public initData() {
for (let i = -360; i <= 360; i += 10) {
const radians = (i * Math.PI) / 180;
const sin = Math.sin(radians);
const cos = Math.cos(radians);
this.data.push({ X: i, sinValue: sin, cosValue: cos });
}
}
public onXAxisSliderChanged(e: any) {
const value = e.target.value;
this.yAxis.crossingValue = value;
this.xAxisCrossLabel.textContent = value;
}
public onYAxisSliderChanged(e: any) {
const value = e.target.value;
this.xAxis.crossingValue = value;
this.yAxisCrossLabel.textContent = value;
}
}
new DataChartAxisCrossing();
ts<!DOCTYPE html>
<html>
<head>
<title>DataChartAxisCrossing</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="option-label">X-Axis Crossing Value: </label>
<label class="options-value" id="xAxisCrossLabel">0</label>
<input class="options-slider" id="xAxisCrossingSlider" type="range" min="-360" max="360" step="10" value="0"/>
<label class="option-label">Y-Axis Crossing Value: </label>
<label class="options-value" id="yAxisCrossLabel">0</label>
<input class="options-slider" id="yAxisCrossingSlider" type="range" min="-1.25" max="1.25" step="0.125" value="0"/>
</div>
<div class="container" style="height: calc(100% - 3rem)">
<igc-data-chart id="chart" width="100%" height="100%" is-horizontal-zoom-enabled="true"
is-vertical-zoom-enabled="true" plot-area-margin-bottom="60" plot-area-margin-top="60"
plot-area-margin-left="30" plot-area-margin-right="30">
<igc-numeric-x-axis id="xAxis" name="xAxis" interval="40" minimum-value="-360" maximum-value="360"
label-location="InsideBottom" label-top-margin="10" crossing-axis-name="yAxis"
crossing-value="0" stroke-thickness="1" stroke="Black">
</igc-numeric-x-axis>
<igc-numeric-y-axis id="yAxis" name="yAxis" minimum-value="-1.25" maximum-value="1.25" interval="0.25"
label-location="InsideLeft" label-right-margin="10" crossing-axis-name="xAxis"
crossing-value="0" stroke-thickness="1" stroke="Black">
</igc-numeric-y-axis>
<igc-scatter-spline-series x-axis-name="xAxis" y-axis-name="yAxis" marker-type="Circle" x-member-path="X" y-member-path="sinValue"></igc-scatter-spline-series>
<igc-scatter-spline-series x-axis-name="xAxis" y-axis-name="yAxis" marker-type="Circle" x-member-path="X" y-member-path="cosValue"></igc-scatter-spline-series>
</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
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.
Annotations
These additional layers are on top of the chart which are mouse / touch dependent. Used individually or combined, they provide powerful interactions that help to highlight certain values within the chart. You can learn more about this feature in the Chart Annotations topic.
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
Animations
Animate your chart as it loads a new data source by enabling animations. These are customizable by setting different types of animations and the speed at which those animations take place. You can learn more about this feature in the Chart Animations topic.
import { IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';
ModuleManager.register(
IgcCategoryChartModule
);
export class CategoryChartLineChartWithAnimations {
private chart: IgcCategoryChartComponent;
private transitionLabel: HTMLLabelElement;
public data: any[] = [];
constructor() {
this.onAnimationChanged = this.onAnimationChanged.bind(this);
this.onTransitionTimeChanged = this.onTransitionTimeChanged.bind(this);
this.onReloadChartBtnClicked = this.onReloadChartBtnClicked.bind(this);
this.reloadChart = this.reloadChart.bind(this);
this.initData();
this.chart = document.getElementById('chart') as IgcCategoryChartComponent;
this.chart.dataSource = this.data;
const animationSelect = document.getElementById("animationSelect") as HTMLSelectElement;
animationSelect.addEventListener("change", this.onAnimationChanged);
this.transitionLabel = document.getElementById("transitionLabel") as HTMLLabelElement;
const transitionSlider = document.getElementById("transitionSlider") as HTMLInputElement;
transitionSlider.addEventListener("change", this.onTransitionTimeChanged);
const reloadChartButton = document.getElementById("reloadChartBtn") as HTMLButtonElement;
reloadChartButton.addEventListener("click", this.onReloadChartBtnClicked);
}
public initData() {
this.data = [
{ Year: "2009", Europe: 31, China: 21, USA: 19 },
{ Year: "2010", Europe: 43, China: 26, USA: 24 },
{ Year: "2011", Europe: 66, China: 29, USA: 28 },
{ Year: "2012", Europe: 69, China: 32, USA: 26 },
{ Year: "2013", Europe: 58, China: 47, USA: 38 },
{ Year: "2014", Europe: 40, China: 46, USA: 31 },
{ Year: "2015", Europe: 78, China: 50, USA: 19 },
{ Year: "2016", Europe: 13, China: 90, USA: 52 },
{ Year: "2017", Europe: 78, China: 132, USA: 50 },
{ Year: "2018", Europe: 40, China: 134, USA: 34 },
{ Year: "2019", Europe: 80, China: 96, USA: 38 }
];
}
public onAnimationChanged(e: any) {
this.chart.transitionInMode = e.target.value;
this.reloadChart();
}
public onTransitionTimeChanged(e: any) {
this.chart.transitionInDuration = e.target.value;
this.transitionLabel.textContent = e.target.value + "ms";
this.reloadChart();
}
public onReloadChartBtnClicked(e: any) {
this.reloadChart();
}
public reloadChart() {
this.chart.replayTransitionIn();
}
}
new CategoryChartLineChartWithAnimations();
ts<!DOCTYPE html>
<html>
<head>
<title>CategoryChartLineChartWithAnimations</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample">
<div class="options horizontal">
<span class="options-label">Transition Type </span>
<select id="animationSelect">
<option>Auto</option>
<option>AccordionFromBottom</option>
<option>AccordionFromCategoryAxisMaximum</option>
<option>AccordionFromCategoryAxisMinimum</option>
<option>AccordionFromLeft</option>
<option>AccordionFromRight</option>
<option>AccordionFromTop</option>
<option>AccordionFromValueAxisMaximum</option>
<option>AccordionFromValueAxisMinimum</option>
<option>Expand</option>
<option>FromZero</option>
<option>SweepFromBottom</option>
<option>SweepFromCategoryAxisMaximum</option>
<option>SweepFromCategoryAxisMinimum</option>
<option>SweepFromCenter</option>
<option>SweepFromLeft</option>
<option>SweepFromRight</option>
<option>SweepFromTop</option>
<option>SweepFromValueAxisMaximum</option>
<option>SweepFromValueAxisMinimum</option>
</select>
<label id="transitionLabel" class="options-value" style="width: 75px">1000ms</label>
<input id="transitionSlider" class="options-slider" type="range" min="50" max="2000" step="50" value="1000" />
<button id="reloadChartBtn">Reload Chart</button>
</div>
<igc-category-chart id="chart" width="100%" height="calc(100% - 30px)"
chart-type="Line"
is-transition-in-enabled="true"
is-horizontal-zoom-enabled="false"
is-vertical-zoom-enabled="false"
y-axis-title="TWh"
y-axis-title-left-margin="10"
y-axis-title-right-margin="5"
y-axis-label-left-margin="0"
computed-plot-area-margin-mode="Series">
</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
Highlighting
Bring focus to visuals such as lines, columns, or markers by highlighting them as the mouse hovers over the data items. This features is enabled on all chart types. You can learn more about this feature in the Chart Highlighting topic.
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
Markers
Identify data points quickly, even if the value falls between major gridlines with the use of markers on the chart series. These are fully customizable in style, color, and shape. You can learn more about this feature in the Chart Markers topic.
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));
}
}
}
tsimport { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
import { IgcCategoryChartModule, IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, CategoryChartDescriptionModule, DataChartInteractivityDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
import { IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
import { IgcPropertyEditorPropertyDescriptionChangedEventArgs } from 'igniteui-webcomponents-layouts';
import { MarkerType, MarkerType_$type } from 'igniteui-webcomponents-charts';
import { EnumUtil } from 'igniteui-webcomponents-core';
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,
IgcDataChartInteractivityModule
);
export class Sample {
private propertyEditor: IgcPropertyEditorPanelComponent
private chartTypeEditor: IgcPropertyEditorPropertyDescriptionComponent
private markerTypeEditor: IgcPropertyEditorPropertyDescriptionComponent
private chart: IgcCategoryChartComponent
private _bind: () => void;
constructor() {
var propertyEditor = this.propertyEditor = document.getElementById('PropertyEditor') as IgcPropertyEditorPanelComponent;
var chartTypeEditor = this.chartTypeEditor = document.getElementById('ChartTypeEditor') as IgcPropertyEditorPropertyDescriptionComponent;
var markerTypeEditor = this.markerTypeEditor = document.getElementById('MarkerTypeEditor') as IgcPropertyEditorPropertyDescriptionComponent;
this.editorChangeUpdateMarkerType = this.editorChangeUpdateMarkerType.bind(this);
var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;
this._bind = () => {
propertyEditor.componentRenderer = this.renderer;
propertyEditor.target = this.chart;
markerTypeEditor.changed = this.editorChangeUpdateMarkerType;
chart.dataSource = this.countryRenewableElectricity;
}
this._bind();
}
private _countryRenewableElectricity: CountryRenewableElectricity = null;
public get countryRenewableElectricity(): CountryRenewableElectricity {
if (this._countryRenewableElectricity == null)
{
this._countryRenewableElectricity = new CountryRenewableElectricity();
}
return this._countryRenewableElectricity;
}
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);
DataChartInteractivityDescriptionModule.register(context);
}
return this._componentRenderer;
}
public editorChangeUpdateMarkerType(sender: any, args: IgcPropertyEditorPropertyDescriptionChangedEventArgs): void {
var item = sender as IgcPropertyEditorPropertyDescriptionComponent;
var chart = this.chart;
var markerVal = item.primitiveValue;
chart.markerTypes = markerVal;
}
}
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="ChartType"
name="ChartTypeEditor"
id="ChartTypeEditor"
label="Chart Type"
primitive-value="Line">
</igc-property-editor-property-description>
<igc-property-editor-property-description
property-path="MarkerTypeHandler"
name="MarkerTypeEditor"
id="MarkerTypeEditor"
label="Marker Type"
should-override-default-editor="true"
value-type="EnumValue"
drop-down-values="Circle, Automatic, Triangle, Pyramid, Square, Diamond, Pentagon, Hexagon, Tetragram, Pentagram, Hexagram, None"
drop-down-names="Circle, Automatic, Triangle, Pyramid, Square, Diamond, Pentagon, Hexagon, Tetragram, Pentagram, Hexagram, None"
primitive-value="Circle">
</igc-property-editor-property-description>
</igc-property-editor-panel>
</div>
<div class="legend-title">
Renewable Electricity Generated
</div>
<div class="container fill">
<igc-category-chart
name="chart"
id="chart"
is-series-highlighting-enabled="true"
chart-type="Line"
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
Navigation
You can navigate the chart by zooming and panning with the mouse, keyboard, and touch interactions. You can learn more about this feature in the Chart Navigation topic.
export class SampleFinancialData {
public static create(items?: number): any[] {
// initial values
let v = 10000;
let o = 500;
let h = Math.round(o + (Math.random() * 5));
let l = Math.round(o - (Math.random() * 5));
let c = Math.round(l + (Math.random() * (h - l)));
if (items === undefined) {
items = 200;
}
const today = new Date();
const end = new Date(today.getFullYear(), 11, 1);
let time = this.addDays(end, -items);
const data: any[] = [];
for (let i = 0; i < items; i++) {
const date = time.toDateString();
const label = this.getShortDate(time, false);
// adding new data item
data.push({"Time": time, "Date": date, "Label": label, "Close": c, "Open": o, "High": h, "Low": l, "Volume": v});
// generating new values
const mod = Math.random() - 0.45;
o = Math.round(o + (mod * 5 * 2));
v = Math.round(v + (mod * 5 * 100));
h = Math.round(o + (Math.random() * 5));
l = Math.round(o - (Math.random() * 5));
c = Math.round(l + (Math.random() * (h - l)));
time = this.addDays(time, 1);
}
return data;
}
public static addDays(dt: Date, days: number): Date {
return new Date(dt.getTime() + days * 24 * 60 * 60 * 1000);
}
public static getShortDate(dt: Date, showYear: boolean): string {
const months = [
"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
];
const ind = dt.getMonth();
const day = dt.getDay() + 1;
let label = months[ind] + " " + day;
if (showYear) {
label += " " + dt.getFullYear();
}
return label;
}
}
tsimport { ModuleManager } from 'igniteui-webcomponents-core';
// data chart's modules:
import { IgcDataChartComponent } from 'igniteui-webcomponents-charts';
import { IgcDataChartCoreModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartCategoryModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
// financial series modules:
import { IgcDataChartFinancialModule } from 'igniteui-webcomponents-charts';
// data chart's elements:
import { IgcNumericYAxisComponent } from 'igniteui-webcomponents-charts';
import { IgcCategoryXAxisComponent } from 'igniteui-webcomponents-charts';
import { IgcFinancialPriceSeriesComponent } from 'igniteui-webcomponents-charts';
import { InteractionState } from 'igniteui-webcomponents-core';
import { ModifierKeys } from 'igniteui-webcomponents-core';
import { SampleFinancialData } from './SampleFinancialData';
ModuleManager.register(
IgcDataChartCoreModule,
IgcDataChartCategoryModule,
IgcDataChartFinancialModule,
IgcDataChartInteractivityModule,
);
export class DataChartNavigation {
private chart: IgcDataChartComponent;
constructor() {
this.chart = document.getElementById('chart') as IgcDataChartComponent;
this.chart.dataSource = SampleFinancialData.create();
this.chart.actualWindowScaleHorizontal = 0.60;
this.chart.actualWindowScaleVertical = 0.60;
this.chart.actualWindowPositionVertical = 0.20;
this.chart.actualWindowPositionHorizontal = 0.20;
const panUp = document.getElementById('panUp') as HTMLButtonElement;
panUp!.addEventListener('click', this.onPanUpClick);
const panLeft = document.getElementById('panLeft') as HTMLButtonElement;
panLeft!.addEventListener('click', this.onPanLeftClick);
const zoomIn = document.getElementById('zoomIn') as HTMLButtonElement;
zoomIn!.addEventListener('click', this.onZoomInClick);
const panDown = document.getElementById('panDown') as HTMLButtonElement;
panDown!.addEventListener('click', this.onPanDownClick);
const panRight = document.getElementById('panRight') as HTMLButtonElement;
panRight!.addEventListener('click', this.onPanRightClick);
const zoomOut = document.getElementById('zoomOut') as HTMLButtonElement;
zoomOut!.addEventListener('click', this.onZoomOutClick);
const panModSelect = document.getElementById('panModSelect') as HTMLSelectElement;
panModSelect!.value = 'Alt';
panModSelect!.addEventListener('change', this.onPanModifierChange);
const interactionSelect = document.getElementById('interactionSelect') as HTMLSelectElement;
interactionSelect!.value = 'DragPan';
interactionSelect!.addEventListener('change', this.onDefaultInteractionChange);
const dragModSelect = document.getElementById('dragModSelect') as HTMLSelectElement;
dragModSelect!.value = 'Shift';
dragModSelect!.addEventListener('change', this.onDragModifierChange);
const zoomEnabled = document.getElementById('zoomEnabled') as HTMLInputElement;
zoomEnabled!.checked = true;
zoomEnabled!.addEventListener('change', this.onZoomEnabledChange);
}
public onDefaultInteractionChange = (e: any) => {
switch (e.target.value) {
case 'DragZoom':
this.chart.defaultInteraction = InteractionState.DragZoom;
break;
case 'DragPan':
this.chart.defaultInteraction = InteractionState.DragPan;
break;
case 'None':
this.chart.defaultInteraction = InteractionState.None;
break;
}
}
public onPanModifierChange = (e: any) => {
switch (e.target.value) {
case 'Alt':
this.chart.panModifier = ModifierKeys.Alt;
break;
case 'Control':
this.chart.panModifier = ModifierKeys.Control;
break;
case 'Shift':
this.chart.panModifier = ModifierKeys.Shift;
break;
case 'Windows':
this.chart.panModifier = ModifierKeys.Windows;
break;
case 'Apple':
this.chart.panModifier = ModifierKeys.Apple;
break;
case 'None':
this.chart.panModifier = ModifierKeys.None;
break;
}
}
public onDragModifierChange = (e: any) => {
switch (e.target.value) {
case 'Alt':
this.chart.dragModifier = ModifierKeys.Alt;
break;
case 'Control':
this.chart.dragModifier = ModifierKeys.Control;
break;
case 'Shift':
this.chart.dragModifier = ModifierKeys.Shift;
break;
case 'Windows':
this.chart.dragModifier = ModifierKeys.Windows;
break;
case 'Apple':
this.chart.dragModifier = ModifierKeys.Apple;
break;
case 'None':
this.chart.dragModifier = ModifierKeys.None;
break;
}
}
public onZoomEnabledChange = (e: any) => {
const isZoomEnabled = e.target.checked;
this.chart.isHorizontalZoomEnabled = isZoomEnabled;
this.chart.isVerticalZoomEnabled = isZoomEnabled;
}
public onPanUpClick = (e: any) => {
this.chart.actualWindowPositionVertical -= 0.05;
}
public onPanDownClick = (e: any) => {
this.chart.actualWindowPositionVertical += 0.05;
}
public onPanLeftClick = (e: any) => {
this.chart.actualWindowPositionHorizontal -= 0.05;
}
public onPanRightClick = (e: any) => {
this.chart.actualWindowPositionHorizontal += 0.05;
}
public onZoomOutClick = (e: any) => {
if (this.chart.actualWindowPositionHorizontal > 0.025) {
this.chart.actualWindowPositionHorizontal -= 0.025;
}
if (this.chart.actualWindowPositionVertical > 0.025) {
this.chart.actualWindowPositionVertical -= 0.025;
}
if (this.chart.actualWindowScaleHorizontal < 1.0) {
this.chart.actualWindowScaleHorizontal += 0.05;
}
if (this.chart.actualWindowScaleVertical < 1.0) {
this.chart.actualWindowScaleVertical += 0.05;
}
}
public onZoomInClick = (e: any) => {
if (this.chart.actualWindowPositionHorizontal < 1.0) {
this.chart.actualWindowPositionHorizontal += 0.025;
}
if (this.chart.actualWindowPositionVertical < 1.0) {
this.chart.actualWindowPositionVertical += 0.025;
}
if (this.chart.actualWindowScaleHorizontal > 0.05) {
this.chart.actualWindowScaleHorizontal -= 0.05;
}
if (this.chart.actualWindowScaleVertical > 0.05) {
this.chart.actualWindowScaleVertical -= 0.05;
}
}
}
new DataChartNavigation();
ts<!DOCTYPE html>
<html>
<head>
<title>DataChartNavigation</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">
<div class="options vertical" style="width: 100px">
<button id="panUp">Pan Up</button>
<button id="panDown">Pan Down</button>
</div>
<div class="options vertical" style="width: 100px">
<button id="panLeft">Pan Left</button>
<button id="panRight">Pan Right</button>
</div>
<div class="options vertical" style="width: 100px">
<button id="zoomIn">Zoom In</button>
<button id="zoomOut">Zoom Out</button>
</div>
<div class="options vertical" style="width: 120px; align-self: center">
<label class="options-label" style="margin: 5px">Pan Modifier:</label>
<label class="options-label" style="margin: 5px">Zoom Modifier:</label>
</div>
<div class="options vertical" style="width: 100px">
<select id="panModSelect" style="margin: 5px">
<option>Alt</option>
<option>Control</option>
<option>Shift</option>
<option>Windows</option>
<option>Apple</option>
<option>None</option>
</select>
<select id="dragModSelect" style="margin: 5px">
<option>Alt</option>
<option>Control</option>
<option>Shift</option>
<option>Windows</option>
<option>Apple</option>
<option>None</option>
</select>
</div>
<div class="options vertical" style="width: 150px; align-self: center">
<label class="options-label" style="margin: 5px;">Interaction:</label>
<label class="options-label" style="margin: 5px;">Zooming:</label>
</div>
<div class="options vertical" style="width: 100px">
<select id="interactionSelect" style="margin: 5px">
<option>DragZoom</option>
<option>DragPan</option>
<option>None</option>
</select>
<input id="zoomEnabled" class="options-item" type="checkbox" @onchange="OnEnableZoomingChange" checked="@IsZoomingEnabled" />
</div>
</div>
<div class="container vertical">
<igc-data-chart
id="chart"
width="100%"
height="100%"
subtitle="Stock Prices Series in Candlestick Display Type"
subtitle-top-margin="10"
is-horizontal-zoom-enabled="true"
is-vertical-zoom-enabled="true"
pan-modifier="Alt"
drag-modifier="Shift"
default-interaction="DragPan">
<igc-category-x-axis
name="xAxis"
label="Label"></igc-category-x-axis>
<igc-numeric-y-axis
name="yAxis"
title="Amount (in USD)"
title-right-margin="10"
label-right-margin="10"
label-horizontal-alignment="Left"
label-location="OutsideRight"></igc-numeric-y-axis>
<igc-financial-price-series
x-axis-name="xAxis"
y-axis-name="yAxis"
display-type="Candlestick"
open-member-path="Open"
close-member-path="Close"
high-member-path="High"
low-member-path="Low"
volume-member-path="Volume"
show-default-tooltip="true"
is-transition-in-enabled="true"
title="Price"></igc-financial-price-series>
</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
Overlays
Overlays allows you to annotate important values and thresholds by plotting horizontal or vertical lines in charts. You can learn more about this feature in the Chart Overlays topic.
import { IgcDataChartCoreModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartCategoryCoreModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartCategoryModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
import { IgcColumnSeriesModule } from 'igniteui-webcomponents-charts';
import { IgcValueOverlayModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartComponent } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';
ModuleManager.register(
IgcDataChartCoreModule,
IgcDataChartCategoryCoreModule,
IgcDataChartCategoryModule,
IgcDataChartInteractivityModule,
IgcColumnSeriesModule,
IgcValueOverlayModule
);
export class DataChartSeriesValueOverlay {
private chart: IgcDataChartComponent;
constructor() {
this.chart = document.getElementById('chart') as IgcDataChartComponent;
this.chart.dataSource = this.getData();
}
getData(): any[] {
const data = [
{ 'Label': 1, 'Value': 1.0 },
{ 'Label': 2, 'Value': 2.0 },
{ 'Label': 3, 'Value': 6.0 },
{ 'Label': 4, 'Value': 8.0 },
{ 'Label': 5, 'Value': 2.0 },
{ 'Label': 6, 'Value': 6.0 },
{ 'Label': 7, 'Value': 4.0 },
{ 'Label': 8, 'Value': 2.0 },
{ 'Label': 9, 'Value': 1.0 },
];
return data;
}
}
new DataChartSeriesValueOverlay();
ts<!DOCTYPE html>
<html>
<head>
<title>DataChartSeriesValueOverlay</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample">
<div class="container" style="height: 100%">
<igc-data-chart id="chart" width="100%" height="100%"
is-horizontal-zoom-enabled="true"
is-vertical-zoom-enabled="true">
<igc-category-x-axis name="xAxis" label="Label">
</igc-category-x-axis>
<igc-numeric-y-axis name="yAxis" minimum-value="0" maximum-value="10">
</igc-numeric-y-axis>
<igc-column-series name="series1" x-axis-name="xAxis" y-axis-name="yAxis" value-member-path="Value">
</igc-column-series>
<igc-value-overlay name="overlay1" axis-name="yAxis" value="2.0" thickness="5">
</igc-value-overlay>
<igc-value-overlay name="overlay2" axis-name="yAxis" value="3.6" thickness="5">
</igc-value-overlay>
<igc-value-overlay name="overlay3" axis-name="yAxis" value="5.8" thickness="5">
</igc-value-overlay>
<igc-value-overlay name="overlay4" axis-name="yAxis" value="1.0" thickness="5">
</igc-value-overlay>
<igc-value-overlay name="overlay5" axis-name="yAxis" value="8.0" thickness="5">
</igc-value-overlay>
<igc-value-overlay name="overlay6" axis-name="yAxis" value="7.0" thickness="5">
</igc-value-overlay>
<igc-value-overlay name="overlay7" axis-name="yAxis" value="5.0" thickness="5">
</igc-value-overlay>
</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
Performance
Web Components charts are optimized for high performance of rendering millions of data points and updating them every few milliseconds. However, there are several chart features that affect performance of the charts and they should be considered when optimizing performance in your application. You can learn more about this feature in the Chart Performance topic.
export class CategoryChartSharedData {
public static generateItems(startValue: number, maxPoints: number, useShortLabels?: boolean): any[] {
const data: any[] = [];
let value = startValue;
for (let i = 0; i <= maxPoints; i++) {
value += Math.random() * 4.0 - 2.0;
const v = Math.round(value);
let l = i.toString();
if (useShortLabels) {
l = this.toShortString(i);
}
data.push({ Label: l, Value: v });
}
return data;
}
public static getTemperatures(startValue: number, startYear: number, endYear: number): any[] {
const data: any[] = [];
let value = startValue;
for (let i = startYear; i <= endYear; i++) {
value += (Math.random() - 0.5) * 0.5;
const v = Math.abs(Math.round(value * 10) / 10);
data.push({ Label: i.toString(), Value: v });
}
return data;
}
public static getLastItem(array: any[]): any {
if (array.length === 0) {
return null;
}
return array[array.length - 1];
}
public static getNewItem(array: any[], index: number): any {
const lastItem = this.getLastItem(array);
const newValue = lastItem.Value + Math.random() * 4.0 - 2.0;
return { Label: index.toString(), Value: newValue };
}
public static toShortString(largeValue: number): string {
let roundValue: number;
if (largeValue >= 1000000) {
roundValue = Math.round(largeValue / 100000) / 10;
return roundValue + "m";
}
if (largeValue >= 1000) {
roundValue = Math.round(largeValue / 100) / 10;
return roundValue + "k";
}
roundValue = Math.round(largeValue);
return roundValue + "";
}
public static addDays(date: Date, days: number): Date {
date.setDate(date.getDate() + days);
return date;
}
}
tsimport { IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';
import { CategoryChartSharedData } from './CategoryChartSharedData';
ModuleManager.register(IgcCategoryChartModule);
export class CategoryChartHighVolume {
private chart: IgcCategoryChartComponent;
public dataPoints: number = 500000;
public dataInfo: string = CategoryChartSharedData.toShortString(this.dataPoints);
public data: any[] = [];
private dataInfoLabel: HTMLLabelElement;
constructor() {
this.onDataPointsChanged = this.onDataPointsChanged.bind(this);
this.onDataGenerateClick = this.onDataGenerateClick.bind(this);
this.chart = document.getElementById('chart') as IgcCategoryChartComponent;
this.chart.dataSource = CategoryChartSharedData.generateItems(0, this.dataPoints, true);
let slider1 = document.getElementById('dataPointsSlider') as HTMLInputElement;
slider1!.addEventListener('change', this.onDataPointsChanged);
let DataGenerate1 = document.getElementById('DataGenerate') as HTMLButtonElement;
DataGenerate1!.addEventListener('click', this.onDataGenerateClick);
}
public onDataPointsChanged = (e: any) => {
this.dataPoints = e.target.value;
const info = CategoryChartSharedData.toShortString(this.dataPoints);
this.dataPoints = this.dataPoints;
this.dataInfo = info;
this.dataInfoLabel = document.getElementById('dataInfoLabel') as HTMLLabelElement;
this.dataInfoLabel.textContent = this.dataPoints.toString();
}
public onDataGenerateClick = (e: any) => {
if (this.dataPoints === undefined) {
this.dataPoints = 10000;
}
this.generateData();
}
public generateData() {
this.chart.dataSource = CategoryChartSharedData.generateItems(0, this.dataPoints, true);
}
}
new CategoryChartHighVolume();
ts<!DOCTYPE html>
<html>
<head>
<title>CategoryChartHighVolume</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">Data Points: </label>
<label class="options-value" id="dataInfoLabel"> 500000 </label>
<input id="dataPointsSlider" class="options-slider" type="range" min="10000" max="1000000" step="1000"
value=500000 />
<button id="DataGenerate">Generate Data</button>
</div>
<igc-category-chart id="chart"
width="100%"
height="calc(100% - 3rem)"
chart-type="Line"
tool-tip-type="Default"
y-axis-extent="60"
x-axis-enhanced-interval-prefer-more-category-labels="false"
should-consider-auto-rotation-for-initial-labels="false"
should-auto-expand-margin-for-initial-labels="false"
crosshairs-display-mode="None"
auto-margin-and-angle-update-mode="None"
marker-types="None" >
</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
Tooltips
Display all information relevant to the particular series type via Tooltips. There are different tooltips that can be enabled, such as Item-level and Category-level tooltips. You can learn more about this feature in the Chart Tooltips topic.
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));
}
}
}
tsimport { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
import { IgcLegendModule, IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, LegendDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import { defineAllComponents } from 'igniteui-webcomponents';
import { ModuleManager } from 'igniteui-webcomponents-core';
defineAllComponents();
import "./index.css";
ModuleManager.register(
IgcPropertyEditorPanelModule,
IgcLegendModule,
IgcCategoryChartModule
);
export class Sample {
private propertyEditor: IgcPropertyEditorPanelComponent
private toolTipTypeEditor: IgcPropertyEditorPropertyDescriptionComponent
private legend: IgcLegendComponent
private chart: IgcCategoryChartComponent
private _bind: () => void;
constructor() {
var propertyEditor = this.propertyEditor = document.getElementById('PropertyEditor') as IgcPropertyEditorPanelComponent;
var toolTipTypeEditor = this.toolTipTypeEditor = document.getElementById('ToolTipTypeEditor') as IgcPropertyEditorPropertyDescriptionComponent;
var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;
this._bind = () => {
propertyEditor.componentRenderer = this.renderer;
propertyEditor.target = this.chart;
chart.legend = this.legend;
chart.dataSource = this.highestGrossingMovies;
}
this._bind();
}
private _highestGrossingMovies: HighestGrossingMovies = null;
public get highestGrossingMovies(): HighestGrossingMovies {
if (this._highestGrossingMovies == null)
{
this._highestGrossingMovies = new HighestGrossingMovies();
}
return this._highestGrossingMovies;
}
private _componentRenderer: ComponentRenderer = null;
public get renderer(): ComponentRenderer {
if (this._componentRenderer == null) {
this._componentRenderer = new ComponentRenderer();
var context = this._componentRenderer.context;
PropertyEditorPanelDescriptionModule.register(context);
LegendDescriptionModule.register(context);
CategoryChartDescriptionModule.register(context);
}
return this._componentRenderer;
}
}
new Sample();
ts<!DOCTYPE html>
<html>
<head>
<title>Sample | Ignite UI | Web Components | infragistics</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
<link rel="stylesheet" href="/src/index.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample">
<div class="options vertical">
<igc-property-editor-panel
name="PropertyEditor"
id="PropertyEditor"
description-type="CategoryChart"
is-horizontal="true"
is-wrapping-enabled="true">
<igc-property-editor-property-description
property-path="ToolTipType"
name="ToolTipTypeEditor"
id="ToolTipTypeEditor"
label="ToolTip Type: "
primitive-value="Data">
</igc-property-editor-property-description>
</igc-property-editor-panel>
</div>
<div class="legend-title">
Highest Grossing Movie Franchises
</div>
<div class="legend">
<igc-legend
name="legend"
id="legend">
</igc-legend>
</div>
<div class="container fill">
<igc-category-chart
name="chart"
id="chart"
chart-type="Column"
x-axis-interval="1"
y-axis-title="Billions of U.S. Dollars"
y-axis-title-left-margin="10"
y-axis-title-right-margin="5"
y-axis-label-left-margin="0"
is-horizontal-zoom-enabled="false"
is-vertical-zoom-enabled="false"
crosshairs-snap-to-data="true">
</igc-category-chart>
</div>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><script src="src/index.ts"></script><% } %>
</body>
</html>html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
Trendlines
Use trendlines to identify a trend or find patterns in your data. There are many different trendlines supported by the Web Components chart, such as CubicFit and LinearFit. You can learn more about this feature in the Chart Trendlines topic.
export class StocksHistory {
/** gets stock OHLC prices for multiple stocks */
public static async getMultipleStocks(): Promise<any[]> {
// getting prices of multiples stocks asynchronously
const dataSources: any[] = [
//await this.getAmazonStock(),
await this.getGoogleStock(),
await this.getMicrosoftStock(),
//await this.getTeslaStock()
];
return new Promise<any[]>((resolve, reject) => {
resolve(dataSources);
});
}
/** gets Amazon stock OHLC prices from a .JSON file */
public static async getAmazonStock(): Promise<StockItem[]> {
let url = "https://static.infragistics.com/xplatform/data/stocks/stockAmazon.json";
let response = await fetch(url);
let jsonData = await response.json();
let stockData = this.convertData(jsonData);
// setting data intent for Series Title, e.g. FinancialChart usage
(stockData as any).__dataIntents = {
close: ["SeriesTitle/Amazon"]
};
// console.log("fetchAmazonStock: ", stockData.length);
return new Promise<StockItem[]>((resolve, reject) => {
resolve(stockData);
});
}
/** gets Tesla stock OHLC prices from a .JSON file */
public static async getTeslaStock(): Promise<StockItem[]> {
let url = "https://static.infragistics.com/xplatform/data/stocks/stockTesla.json";
let response = await fetch(url);
let jsonData = await response.json();
let stockData = this.convertData(jsonData);
// setting data intent for Series Title, e.g. FinancialChart usage
(stockData as any).__dataIntents = {
close: ["SeriesTitle/Tesla"]
};
return new Promise<StockItem[]>((resolve, reject) => {
resolve(stockData);
});
}
/** gets Microsoft stock OHLC prices from a .JSON file */
public static async getMicrosoftStock(): Promise<StockItem[]> {
let url = "https://static.infragistics.com/xplatform/data/stocks/stockMicrosoft.json";
let response = await fetch(url);
let jsonData = await response.json();
let stockData = this.convertData(jsonData);
// setting data intent for Series Title, e.g. FinancialChart usage
(stockData as any).__dataIntents = {
close: ["SeriesTitle/Microsoft"]
};
return new Promise<StockItem[]>((resolve, reject) => {
resolve(stockData);
});
}
/** gets Google stock OHLC prices from a .JSON file */
public static async getGoogleStock(): Promise<StockItem[]> {
let url = "https://static.infragistics.com/xplatform/data/stocks/stockGoogle.json";
let response = await fetch(url);
let jsonData = await response.json();
let stockData = this.convertData(jsonData);
// setting data intent for Series Title, e.g. FinancialChart usage
(stockData as any).__dataIntents = {
close: ["SeriesTitle/Google"]
};
return new Promise<StockItem[]>((resolve, reject) => {
resolve(stockData);
});
}
public static convertData(jsonData: any[]): StockItem[] {
let stockItems: StockItem[] = [];
for (let json of jsonData) {
let parts = json.date.split("-"); // "2020-01-01"
let item = new StockItem();
item.date = new Date(parts[0], parts[1], parts[2]);
item.open = json.open;
item.high = json.high;
item.low = json.low;
item.close = json.close;
item.volume = json.volume;
stockItems.push(item);
}
return stockItems;
}
}
export class StockItem {
public open?: number;
public close?: number;
public high?: number;
public low?: number;
public volume?: number;
public date?: Date;
}
tsimport { IgcFinancialChartModule } from 'igniteui-webcomponents-charts';
import { IgcFinancialChartComponent } from 'igniteui-webcomponents-charts';
import { TrendLineType } from 'igniteui-webcomponents-core';
import { ModuleManager } from 'igniteui-webcomponents-core';
import { StocksHistory } from './StocksHistory';
ModuleManager.register(IgcFinancialChartModule);
export class FinancialChartTrendlines {
private chart: IgcFinancialChartComponent;
public trendLineType: TrendLineType = TrendLineType.QuinticFit;
constructor() {
this.chart = document.getElementById('chart') as IgcFinancialChartComponent;
this.chart.trendLineType = this.trendLineType;
let trendLineSelect = document.getElementById('trendLineSelect');
trendLineSelect!.addEventListener('change', this.onTrendlineChanged);
StocksHistory.getMicrosoftStock().then((stocks: any[]) => {
this.chart.dataSource = stocks;
});
}
public onTrendlineChanged = (e: any) => {
const type = e.target.value;
switch (type) {
case 'CubicFit':
this.trendLineType = TrendLineType.CubicFit;
break;
case 'LinearFit':
this.trendLineType = TrendLineType.LinearFit;
break;
case 'QuinticFit':
this.trendLineType = TrendLineType.QuinticFit;
break;
case 'QuarticFit':
this.trendLineType = TrendLineType.QuarticFit;
break;
case 'ExponentialFit':
this.trendLineType = TrendLineType.ExponentialFit;
break;
case 'PowerLawFit':
this.trendLineType = TrendLineType.PowerLawFit;
break;
case 'LogarithmicFit':
this.trendLineType = TrendLineType.LogarithmicFit;
break;
case 'CumulativeAverage':
this.trendLineType = TrendLineType.CumulativeAverage;
break;
case 'ExponentialAverage':
this.trendLineType = TrendLineType.ExponentialAverage;
break;
case 'SimpleAverage':
this.trendLineType = TrendLineType.SimpleAverage;
break;
case 'ModifiedAverage':
this.trendLineType = TrendLineType.ModifiedAverage;
break;
case 'WeightedAverage':
this.trendLineType = TrendLineType.WeightedAverage;
break;
case 'None':
this.trendLineType = TrendLineType.None;
break;
}
this.chart.trendLineType = this.trendLineType;
}
}
new FinancialChartTrendlines();
ts<!DOCTYPE html>
<html>
<head>
<title>FinancialChartTrendlines</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">Trendline Type:</label>
<select id="trendLineSelect">
<option>QuinticFit</option>
<option>CubicFit</option>
<option>LinearFit</option>
<option>QuarticFit</option>
<option>ExponentialFit</option>
<option>PowerLawFit</option>
<option>LogarithmicFit</option>
<option>CumulativeAverage</option>
<option>ExponentialAverage</option>
<option>SimpleAverage</option>
<option>ModifiedAverage</option>
<option>WeightedAverage</option>
<option>None</option>
</select>
</div>
<div class="container" style="height: calc(100% - 3rem)">
<igc-financial-chart id="chart" width="100%" height="100%"
chart-type="Bar"
thickness="2"
trend-line-thickness="2"
trend-line-period="10"
trend-line-brushes="rgba(0, 101, 209, 1)"
chart-title="Microsoft Trend"
subtitle="Between 2013 and 2017"
zoom-slider-type="None"
is-horizontal-zoom-enabled="false"
is-vertical-zoom-enabled="false"
>
</igc-financial-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