Search results

Legend

Legend provides information about the series rendered in the chart.

Enable Legend

You can use legend for the chart by setting the Visible property to true in LegendSettings object.

legend.razor
@using Syncfusion.EJ2.Blazor.Charts

<EjsChart Title="Inflation - Consumer Price">
       <ChartPrimaryXAxis LabelFormat="y" IntervalType="IntervalType.Years" ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.DateTime">
       </ChartPrimaryXAxis> 
  
        <ChartSeriesCollection> 
            <ChartSeries DataSource="@ConsumerReports" Name="Germany" XName="XValue" YName="YValue" Type="ChartSeriesType.Column">
            </ChartSeries> 
        </ChartSeriesCollection>

        <ChartLegendSettings Visible="true"></ChartLegendSettings>
</EjsChart>

@code{
    public class ChartData
     {
          public DateTime XValue;
          public double YValue;
     }

    public List<ChartData> ConsumerReports = new List<ChartData> {
            new ChartData { XValue = new DateTime(2005, 01, 01), YValue = 21 },
            new ChartData { XValue = new DateTime(2006, 01, 01), YValue = 24 },
            new ChartData { XValue = new DateTime(2007, 01, 01), YValue = 36 },
            new ChartData { XValue = new DateTime(2008, 01, 01), YValue = 38 },
            new ChartData { XValue = new DateTime(2009, 01, 01), YValue = 54 },
            new ChartData { XValue = new DateTime(2010, 01, 01), YValue = 57 },
            new ChartData { XValue = new DateTime(2011, 01, 01), YValue = 70 },
        };
}

Enable Legend

Position and Alignment

By using the Position property, you can position the legend at left, right, top or bottom of the chart. The legend is positioned at the bottom of the chart, by default.

default.razor
@using Syncfusion.EJ2.Blazor.Charts

<EjsChart Title="Olympic Medals">
    <ChartPrimaryXAxis ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.Category">
    </ChartPrimaryXAxis>
  
    <ChartSeriesCollection>
        <ChartSeries DataSource="@MedalDetails" Name="Gold" XName="Country" Width="2" Opacity="1" YName="Gold" Type="ChartSeriesType.Column">
        </ChartSeries>
        <ChartSeries DataSource="@MedalDetails" Name="Silver" XName="Country" Width="2" Opacity="1" YName="Silver" Type="ChartSeriesType.Column">
        </ChartSeries>
        <ChartSeries DataSource="@MedalDetails" Name="bronze" XName="Country" Width="2" Opacity="1" YName="Bronze" Type="ChartSeriesType.Column">
        </ChartSeries>
    </ChartSeriesCollection>
  
    <ChartLegendSettings Visible="true" Position="LegendPosition.Top"></ChartLegendSettings>
</EjsChart>

@code{
    public class ChartData
    {
        public string Country;
        public double Gold;
        public double Silver;
        public double Bronze;
    }

    public List<ChartData> MedalDetails = new List<ChartData> 
      {
            new ChartData{ Country= "USA", Gold=50, Silver=70, Bronze=45 },
            new ChartData{ Country="China", Gold=40, Silver= 60, Bronze=55 },
            new ChartData{ Country= "Japan", Gold=70, Silver= 60, Bronze=50 },
            new ChartData{ Country= "Australia", Gold=60, Silver= 56, Bronze=40 },
            new ChartData{ Country= "France", Gold=50, Silver= 45, Bronze=35 },
            new ChartData{ Country= "Germany", Gold=40, Silver=30, Bronze=22 },
            new ChartData{ Country= "Italy", Gold=40, Silver=35, Bronze=37 },
            new ChartData{ Country= "Sweden", Gold=30, Silver=25, Bronze=27 }
        };
}

Custom position helps you to position the legend anywhere in the chart using x, y coordinates.

position.razor
@using Syncfusion.EJ2.Blazor.Charts

<EjsChart Title="Inflation - Consumer Price" Width="60%">
        <ChartPrimaryXAxis LabelFormat="y" RangePadding="ChartRangePadding.Additional" ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.DateTime">
        </ChartPrimaryXAxis>
  
        <ChartPrimaryYAxis LabelFormat="{value}%" RangePadding="ChartRangePadding.None" Minimum="0" Maximum="100" Interval="20">
        </ChartPrimaryYAxis>
  
        <ChartSeriesCollection>
            <ChartSeries DataSource="@MedalDetails" Name="Gold" XName="XValue" Width="2" Opacity="1" YName="YValue" Type="ChartSeriesType.Column">
            </ChartSeries>
            <ChartSeries DataSource="@MedalDetails" Name="Silver" XName="XValue" Width="2" Opacity="1" YName="YValue1" Type="ChartSeriesType.Column">
            </ChartSeries>                                                           
        </ChartSeriesCollection>
  
        <ChartLegendSettings Visible="true" Position="LegendPosition.Top"></ChartLegendSettings>
</EjsChart>    
 
@code{
      public class ChartData
        {
            public DateTime XValue;
            public double YValue;
            public double YValue1;
        }
        
      public List<ChartData> MedalDetails =  new List<ChartData> {
            new ChartData { XValue = new DateTime(2005, 01, 01), YValue = 21, YValue1 = 28 },
            new ChartData { XValue = new DateTime(2006, 01, 01), YValue = 24, YValue1 = 44 },
            new ChartData { XValue = new DateTime(2007, 01, 01), YValue = 36, YValue1 = 48 },
            new ChartData { XValue = new DateTime(2008, 01, 01), YValue = 38, YValue1 = 50 },
            new ChartData { XValue = new DateTime(2009, 01, 01), YValue = 54, YValue1 = 66 },
            new ChartData { XValue = new DateTime(2010, 01, 01), YValue = 57, YValue1 = 78 },
            new ChartData { XValue = new DateTime(2011, 01, 01), YValue = 70, YValue1 = 84 },
        };
}

Legend Alignment

You can align the legend as Center, Far or Near to the chart using Alignment property.

alignment.razor
@using Syncfusion.EJ2.Blazor.Charts

<EjsChart Title="Olympic Medals">
   <ChartPrimaryXAxis ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.Category">
   </ChartPrimaryXAxis>
  
    <ChartSeriesCollection>
        <ChartSeries DataSource="@MedalDetails" Name="Gold" XName="Country" Width="2" Opacity="1" YName="Gold" Type="ChartSeriesType.Column">
        </ChartSeries>
        <ChartSeries DataSource="@MedalDetails" Name="Silver" XName="Country" Width="2" Opacity="1" YName="Silver" Type="ChartSeriesType.Column">
        </ChartSeries> 
        <ChartSeries DataSource="@MedalDetails" Name="bronze" XName="Country" Width="2" Opacity="1" YName="Bronze" Type="ChartSeriesType.Column">
        </ChartSeries>                                                             
     </ChartSeriesCollection>
  
     <ChartLegendSettings Visible="true" Alignment="Alignment.Far"></ChartLegendSettings>
</EjsChart>    
    
@code{
       public class ChartData
        {
            public string Country;
            public double Gold;
            public double Silver;
            public double Bronze;
        }

    public List<ChartData> MedalDetails =  new List<ChartData>
      {
            new ChartData{ Country= "USA", Gold=50, Silver=70, Bronze=45 },
            new ChartData{ Country="China", Gold=40, Silver= 60, Bronze=55 },
            new ChartData{ Country= "Japan", Gold=70, Silver= 60, Bronze=50 },
            new ChartData{ Country= "Australia", Gold=60, Silver= 56, Bronze=40 },
            new ChartData{ Country= "France", Gold=50, Silver= 45, Bronze=35 },
            new ChartData{ Country= "Germany", Gold=40, Silver=30, Bronze=22 },
            new ChartData{ Country= "Italy", Gold=40, Silver=35, Bronze=37 },
            new ChartData{ Country= "Sweden", Gold=30, Silver=25, Bronze=27 }
        };
    
}

Legend Alignment

Customization

To change the legend icon shape, you can use LegendShape property in the Series. By default legend icon shape is SeriesType.

custom.razor
@using Syncfusion.EJ2.Blazor.Charts

<EjsChart Title="Olympic Medals">
   <ChartPrimaryXAxis ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.Category">
   </ChartPrimaryXAxis>
  
   <ChartSeriesCollection>
       <ChartSeries DataSource="@MedalDetails" Name="Gold" XName="Country" Width="2" Opacity="1" YName="Gold" Type="ChartSeriesType.Column">
       </ChartSeries>
       <ChartSeries DataSource="@MedalDetails" Name="Silver" XName="Country" Width="2" Opacity="1" YName="Silver" Type="ChartSeriesType.Column">
       </ChartSeries> 
       <ChartSeries DataSource="@MedalDetails" Name="bronze" XName="Country" Width="2" Opacity="1" YName="Bronze" Type="ChartSeriesType.Column">
       </ChartSeries>                                                             
   </ChartSeriesCollection>
  
   <ChartLegendSettings Visible="true" Position="LegendPosition.Custom" Location="@location"></ChartLegendSettings>
</EjsChart>    

@code{

     public Object location = new
        {
            X = 200, Y = 20
        };
        
}

Legend Size

By default, legend takes 20% - 25% of the chart’s height, when it is placed on top or bottom position and 20% - 25% of the chart’s width, when placed on left or right position of the chart. You can change this default legend size by using the Width and Height property of the LegendSettings.

size.razor
@using Syncfusion.EJ2.Blazor.Charts

<EjsChart Title="Olympic Medals">
        <ChartPrimaryXAxis ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.Category">
        </ChartPrimaryXAxis>
  
        <ChartSeriesCollection>
            <ChartSeries DataSource="@MedalDetails" Name="Gold" XName="Country" Width="2" LegendShape="LegendShape.Circle" Opacity="1" YName="Gold" Type="ChartSeriesType.Column">
            </ChartSeries>
            <ChartSeries DataSource="@MedalDetails" Name="Silver" XName="Country" Width="2" LegendShape="LegendShape.SeriesType" Opacity="1" YName="Silver" Type="ChartSeriesType.Column">
            </ChartSeries> 
            <ChartSeries DataSource="@MedalDetails" Name="bronze" XName="Country" Width="2" LegendShape="LegendShape.Diamond" Opacity="1" YName="Bronze" Type="ChartSeriesType.Column">
            </ChartSeries>                                                             
        </ChartSeriesCollection>
  
        <ChartLegendSettings Visible="true" Height="50" Width="300" Border="@border">
        </ChartLegendSettings>
</EjsChart>    
 
@code{
    
     public Object border = new
        {
            color = "red", width = 3
        };

}

Legend Item Size

You can customize the size of the legend items by using the ShapeHeight and ShapeWidth property.

item-size.razor
@using Syncfusion.EJ2.Blazor.Charts

<EjsChart Title="Olympic Medals">
    <ChartPrimaryXAxis ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.Category">
    </ChartPrimaryXAxis>
  
    <ChartSeriesCollection>
        <ChartSeries DataSource="@MedalDetails" Name="Gold" XName="Country" Width="2" Opacity="1" YName="Gold" Type="ChartSeriesType.Column">
        </ChartSeries>
        <ChartSeries DataSource="@MedalDetails" Name="Silver" XName="Country" Width="2" Opacity="1" YName="Silver" Type="ChartSeriesType.Column">
        </ChartSeries> 
        <ChartSeries DataSource="@MedalDetails" Name="bronze" XName="Country" Width="2" Opacity="1" YName="Bronze" Type="ChartSeriesType.Column">
        </ChartSeries>                                                             
    </ChartSeriesCollection>
  
     <ChartLegendSettings Visible="true" ShapeHeight="20" ShapeWidth="20"></ChartLegendSettings>
</EjsChart>

Legend Alignment

Paging for Legend

Paging will be enabled by default, when the legend items exceeds the legend bounds. You can view each legend items by navigating between the pages using navigation buttons.

paging.razor
@using Syncfusion.EJ2.Blazor.Charts

<EjsChart Title="Olympic Medals">
         <ChartPrimaryXAxis ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.Category">
        </ChartPrimaryXAxis>
  
        <ChartSeriesCollection>
            <ChartSeries DataSource="@MedalDetails" Name="Gold" XName="Country" Width="2" LegendShape="LegendShape.Circle" Opacity="1" YName="Gold" Type="ChartSeriesType.Column">
            </ChartSeries>
            <ChartSeries DataSource="@MedalDetails" Name="Silver" XName="Country" Width="2" LegendShape="LegendShape.SeriesType" Opacity="1" YName="Silver" Type="ChartSeriesType.Column">
            </ChartSeries> 
            <ChartSeries DataSource="@MedalDetails" Name="bronze" XName="Country" Width="2" LegendShape="LegendShape.Diamond" Opacity="1" YName="Bronze" Type="ChartSeriesType.Column">
            </ChartSeries>                                                             
        </ChartSeriesCollection>
  
        <ChartLegendSettings Visible="true" Width="100" Height="70" Padding="10" ShapePadding="10" Border="@border">
        </ChartLegendSettings>
</EjsChart>    
  
@code{
  
      public Object border = new
        {
             color = "red", width = 3
        };

}

Series Selection on Legend

By default, legend click enables you to collapse the series visibility. On other hand, if you need to select a series through legend click, disable the ToggleVisibility.

selection.razor
@using Syncfusion.EJ2.Blazor.Charts

<EjsChart Title="Olympic Medals" SelectionMode="SelectionMode.Series">
        <ChartPrimaryXAxis ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
  
        <ChartSeriesCollection>
            <ChartSeries DataSource="@MedalDetails" Name="Gold" XName="Country" Width="2" legendShape="LegendShape.Circle" Opacity="1" YName="Gold" Type="ChartSeriesType.Column">
            </ChartSeries>
            <ChartSeries DataSource="@MedalDetails" Name="Silver" XName="Country" Width="2" legendShape="LegendShape.SeriesType" Opacity="1" YName="Silver" Type="ChartSeriesType.Column">
            </ChartSeries> 
            <ChartSeries DataSource="@MedalDetails" Name="bronze" XName="Country" Width="2" legendShape="LegendShape.Diamond" Opacity="1" YName="Bronze" Type="ChartSeriesType.Column">
            </ChartSeries>                                                             
        </ChartSeriesCollection>
  
        <ChartLegendSettings Visible="true" ToggleVisibility="false"></ChartLegendSettings>
</EjsChart>

Collapsing Legend Item

By default, series name will be displayed as legend. To skip the legend for a particular series, you can give empty string to the series name.

collapse.razor
@using Syncfusion.EJ2.Blazor.Charts

<EjsChart Title="Olympic Medals">
    <ChartPrimaryXAxis ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.Category">
    </ChartPrimaryXAxis>
  
    <ChartSeriesCollection>
        <ChartSeries DataSource="@MedalDetails" Name="Gold" XName="Country" Width="2" LegendShape="LegendShape.Circle" Opacity="1" YName="Gold" Type="ChartSeriesType.Column">
        </ChartSeries>
        <ChartSeries DataSource="@MedalDetails" Name="Silver" XName="Country" Width="2" LegendShape="LegendShape.SeriesType" Opacity="1" YName="Silver" Type="ChartSeriesType.Column">
        </ChartSeries> 
        <ChartSeries DataSource="@MedalDetails" Name="bronze" XName="Country" Width="2" LegendShape="LegendShape.Diamond" Opacity="1" YName="Bronze" Type="ChartSeriesType.Column">
        </ChartSeries>                                                             
    </ChartSeriesCollection>
  
    <ChartLegendSettings Visible="true" ToggleVisibility = "true">
    </ChartLegendSettings>
</EjsChart>

Collapsing Legend Item

See Also