React Legends

Legends help end-users identify visuals of data chart series with contextual information related to data plotted in the React 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.


Edit on CodeSandbox

Legend Overview

By default, the React 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 React data chart component:

public render() {
    return (
                <IgrLegend ref={this.onLegendRef}
                    orientation="Horizontal" />
            <IgrDataChart dataSource={} 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" />
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;