Legends

Legends help end-users identify visuals of chart series with contextual information related to data plotted in the IgrDataChart control. Most 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 chart can render without any legends, as it does by default.

Demo

Legend Overview

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

In addition, you must set the Title 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 IgrDataChart control:

public render() {
    return (
        <div>
            <div>
                <IgrLegend ref={this.onLegendRef}
                    orientation="Horizontal" />
            </div>
            <IgrDataChart dataSource={this.data} ref={this.onChartRef} width="100%" height="400px">
                <IgrCategoryXAxis name="xAxis" label="Country" />
                <IgrNumericYAxis name="yAxis" minimumValue={0}  />

                <IgrColumnSeries name="series1" title="Coal" xAxisName="xAxis"
                    yAxisName="yAxis" valueMemberPath="Coal" />
                <IgrColumnSeries name="series2" title="Hydro" xAxisName="xAxis"
                    yAxisName="yAxis" valueMemberPath="Hydro" />
                <IgrColumnSeries name="series3" title="Nuclear" xAxisName="xAxis"
                    yAxisName="yAxis" valueMemberPath="Nuclear" />
                <IgrColumnSeries name="series4" title="Gas" xAxisName="xAxis"
                    yAxisName="yAxis" valueMemberPath="Gas" />
                <IgrColumnSeries name="series5" title="Oil" xAxisName="xAxis"
                    yAxisName="yAxis" valueMemberPath="Oil" />
            </IgrDataChart>
        </div>
    );
}
public onChartRef(chart: IgrDataChart) {
    this.chart = chart;
    if (this.legend) {
        this.chart.legend = this.legend;
    }
}

public onLegendRef(legend: IgrLegend) {
    this.legend = legend;
    if (this.chart) {
        this.chart.legend = this.legend;
    }
}