Web Components Legends

Legends help end-users identify visuals of data chart series with contextual information related to data plotted in the Web Components data chart component. Most data charts should have at least one legend in order to make it easier to understand data displayed in the plot area, however, it is not a requirement and the data chart can render without any legends, as it does by default.


Legend Overview

By default, the Web Components data chart component does not display legends for any series in the data chart. If you want to show a common legend for multiple series, you need to add a legend object to your application and then set it to the Legend property of the data chart.

In addition, you must set the chartTitle property for each series object or the legend will use a default series title.

The following code snippet shows how to use a legend in the Web Components data chart component:

  <igc-legend id="legend" orientation="horizontal">
  <igc-data-chart id="chart" height="500px" width="700px" >

    <igc-category-x-axis id="xAxis" label="Country"></igc-category-x-axis>
    <igc-numeric-y-axis id="yAxis" min-value="0" abbreviate-large-numbers="true"></igc-numeric-y-axis>

    <igc-column-series id="series1" title=" Coal" value-member-path="Coal"></igc-column-series>
    <igc-column-series id="series2" title=" Hydro" value-member-path="Hydro"></igc-column-series>
    <igc-column-series id="series3" title=" Nuclear" value-member-path="Nuclear"></igc-column-series>
    <igc-column-series id="series4" title=" Gas" value-member-path="Gas"></igc-column-series>
    <igc-column-series id="series5" title=" Oil" value-member-path="Oil"></igc-column-series>
let chart = (document.getElementById("chart") as IgcDataChartComponent);
chart.dataSource = data;

let legend = (document.getElementById("legend") as IgcLegendComponent);
chart.legend = legend;

let xAxis = (document.getElementById("xAxis") as IgcCategoryXAxisComponent);
let yAxis = (document.getElementById("yAxis") as IgcNumericYAxisComponent);

let series1 = (document.getElementById("series1") as IgcColumnSeriesComponent);
series1.xAxis = xAxis;
series1.yAxis = yAxis;

let series2 = (document.getElementById("series2") as IgcColumnSeriesComponent);
series2.xAxis = xAxis;
series2.yAxis = yAxis;

let series3 = (document.getElementById("series3") as IgcColumnSeriesComponent);
series3.xAxis = xAxis;
series3.yAxis = yAxis;

let series4 = (document.getElementById("series4") as IgcColumnSeriesComponent);
series4.xAxis = xAxis;
series4.yAxis = yAxis;

let series5 = (document.getElementById("series5") as IgcColumnSeriesComponent);
series5.xAxis = xAxis;
series5.yAxis = yAxis;