Web Components Chart Overlays

The Web Components IgcDataChartComponent allows for placement of horizontal or vertical lines at a single numeric value that you define through usage of the IgcValueOverlayComponent. This can help you to visualize data such as the mean or median of a particular series.

Web Components Value Overlay Example

The following example depicts a Column Chart with a few horizontal value overlays plotted.

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

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

Web Components Value Overlay Properties

Unlike other series types that use a ItemsSource for data binding, the value overlay uses a ValueMemberPath property to bind a single numeric value. In addition, the value overlay requires you to define a single axis to use. If you use an X-axis, the value overlay will be a vertical line, and if you use a Y-axis, it will be a horizontal line.

When using a numeric X or Y axis, the ValueMemberPath property should reflect the actual numeric value on the axis where you want the value overlay to be drawn. When using a category X or Y axis, the ValueMemberPath should reflect the index of the category at which you want the value overlay to appear.

When using the value overlay with a numeric angle axis, it will appear as a line from the center of the chart and when using a numeric radius axis, it will appear as a circle.

IgcValueOverlayComponent appearance properties are inherited from IgcSeriesComponent and so brush and thickness for example are available and work the same way they do with other types of series.

It is also possible to show an axis annotation on a IgcValueOverlayComponent to show the value of the overlay on the owning axis. In order to show this, you can set the isAxisAnnotationEnabled property to true.

Web Components Value Layer

The Web Components charting components also expose the ability to use value lines to call out different focal points of your data, such as minimum, maximum, and average values.

Applying the IgcValueLayerComponent in the IgcCategoryChartComponent and IgcFinancialChartComponent components is done by setting the valueLines property on the chart. This property takes a collection of the ValueLayerValueMode enumeration. You can mix and match multiple value layers in the same chart by adding multiple ValueLayerValueMode enumerations to the valueLines collection of the chart.

In the IgcDataChartComponent, this is done by adding a IgcValueLayerComponent to the IgcSeriesComponent collection of the chart and then setting the ValueMode property to one of the ValueLayerValueMode enumerations. Each of these enumerations and what they mean is listed below:

Auto: The default value mode of the ValueLayerValueMode enumeration.
Average: Applies potentially multiple value lines to call out the average value of each series plotted in the chart.
GlobalAverage: Applies a single value line to call out the average of all of the series values in the chart.
GlobalMaximum: Applies a single value line to call out the absolute maximum value of all of the series values in the chart.
GlobalMinimum: Applies a single value line to call out the absolute minimum value of all of the series values in the chart.
Maximum: Applies potentially multiple value lines to call out the maximum value of each series plotted in the chart.
Minimum: Applies potentially multiple value lines to call out the minimum value of each series plotted in the chart.

If you want to prevent any particular series from being taken into account when using the IgcValueLayerComponent element, you can set the targetSeries property on the layer. This will force the layer to target the series that you define. You can have as many IgcValueLayerComponent elements within a single IgcDataChartComponent as you want.

The following sample demonstrates usage of the different valueLines in the IgcCategoryChartComponent:

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

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

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

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

export class Sample {

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

    constructor() {
        var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
        var propertyEditor = this.propertyEditor = document.getElementById('PropertyEditor') as IgcPropertyEditorPanelComponent;
        var valueListEditor = this.valueListEditor = document.getElementById('ValueListEditor') as IgcPropertyEditorPropertyDescriptionComponent;
        this.editorChangeUpdateValueLines = this.editorChangeUpdateValueLines.bind(this);
        var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;

        this._bind = () => {
            propertyEditor.componentRenderer = this.renderer;
            propertyEditor.target = this.chart;
            valueListEditor.changed = this.editorChangeUpdateValueLines;
            chart.dataSource = this.countryRenewableElectricity;
            chart.legend = this.legend;
        }
        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);
            LegendDescriptionModule.register(context);
            CategoryChartDescriptionModule.register(context);
        }
        return this._componentRenderer;
    }

    public editorChangeUpdateValueLines(sender: any, args: IgcPropertyEditorPropertyDescriptionChangedEventArgs): void {
        var item = sender as IgcPropertyEditorPropertyDescriptionComponent;
        var chart = this.chart;

        var valueLineType = item.primitiveValue;
        chart.valueLines = valueLineType;
    }

}

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="ValueListHandler"
            name="ValueListEditor"
            id="ValueListEditor"
            label="Value List"
            should-override-default-editor="true"
            value-type="EnumValue"
            drop-down-values="Auto, Average, GlobalAverage, GlobalMaximum, GlobalMinimum, Maximum, Minimum"
            drop-down-names="Auto, Average, GlobalAverage, GlobalMaximum, GlobalMinimum, Maximum, Minimum"
            primitive-value="Auto">
            </igc-property-editor-property-description>
        </igc-property-editor-panel>
    </div>

    <div class="legend-title">
        Renewable Electricity Generated
    </div>

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

    <div class="container fill">
        <igc-category-chart
        name="chart"
        id="chart"
        included-properties="year, america, europe"
        chart-type="Column"
        is-horizontal-zoom-enabled="false"
        is-vertical-zoom-enabled="false"
        crosshairs-display-mode="None"
        is-transition-in-enabled="false"
        y-axis-minimum-value="0"
        y-axis-maximum-value="100">
        </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

Web Components Financial Overlays

You can also plot built-in financial overlays and indicators in Web Components Stock Chart.

Additional Resources

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

API References

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