How to Display a Custom Legend Within Chart Bounds in Blazor Charts?

This article explains how to display a custom legend within the chart area bounds without overlapping the axis in Blazor Charts using Syncfusion components.

Blazor Charts allows customizing the legend’s position and dimensions to ensure it fits within the chart area and does not interfere with the chart axes. You can achieve this by setting a specific Width for the legend in the ChartLegendSettings and using the Position and Location properties to place it appropriately.

Steps to display a custom legend within chart bounds

To position the custom legend inside the chart area without overlapping the axis, follow these steps:

• Set Position=“LegendPosition.Custom” in ChartLegendSettings.
• Define the Width property to restrict legend size.
• Use ChartLocation to set the X and Y coordinates for legend placement.

@page "/"

@using Syncfusion.Blazor.Charts

<SfChart>
   <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
   <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" EdgeLabelPlacement="EdgeLabelPlacement.Shift">
       <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
   </ChartPrimaryXAxis>
   <ChartPrimaryYAxis>
       <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
   </ChartPrimaryYAxis>
   <ChartAxes>
       <ChartAxis OpposedPosition="true" RowIndex="0" Name="yAxis1">
           <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
       </ChartAxis>
       <ChartAxis OpposedPosition="true" RowIndex="1" Name="yAxis2">
           <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
       </ChartAxis>
       <ChartAxis OpposedPosition="true" RowIndex="2" Name="yAxis3">
           <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
       </ChartAxis>

   </ChartAxes>
   <ChartTooltipSettings Enable="true"></ChartTooltipSettings>
   <ChartSeriesCollection>
       <ChartSeries Type="Syncfusion.Blazor.Charts.ChartSeriesType.Line" DataSource="@ChartPoints1" XName="Period" YName="StockPrice" Width="2" Name="Product A">
       </ChartSeries>
       <ChartSeries Type="Syncfusion.Blazor.Charts.ChartSeriesType.Line" DataSource="@ChartPoints2" XName="Period" YName="StockPrice" Width="2" Name="Product B">
       </ChartSeries>
       <ChartSeries Type="Syncfusion.Blazor.Charts.ChartSeriesType.Line" DataSource="@ChartPoints3" XName="Period" YName="StockPrice" Width="2" Name="Product C">
       </ChartSeries>
       <ChartSeries Type="Syncfusion.Blazor.Charts.ChartSeriesType.Line" DataSource="@ChartPoints4" XName="Period" YName="StockPrice" Width="2" Name="Product D">
       </ChartSeries>
       <ChartSeries Type="Syncfusion.Blazor.Charts.ChartSeriesType.Line" DataSource="@ChartPoints5" XName="Period" YName="StockPrice" Width="2" Name="Product E">
       </ChartSeries>
       <ChartSeries Type="Syncfusion.Blazor.Charts.ChartSeriesType.Line" DataSource="@ChartPoints6" XName="Period" YName="StockPrice" Width="2" Name="Product F">
       </ChartSeries>
       <ChartSeries YAxisName="yAxis1" Type="Syncfusion.Blazor.Charts.ChartSeriesType.Line" DataSource="@ChartPoints7" XName="Period" YName="StockPrice" Width="2" Name="Product G">
       </ChartSeries>
       <ChartSeries YAxisName="yAxis2" Type="Syncfusion.Blazor.Charts.ChartSeriesType.Line" DataSource="@ChartPoints8" XName="Period" YName="StockPrice" Width="2" Name="Product H">
       </ChartSeries>
       <ChartSeries YAxisName="yAxis3" Type="Syncfusion.Blazor.Charts.ChartSeriesType.Line" DataSource="@ChartPoints9" XName="Period" YName="StockPrice" Width="2" Name="Product I">
       </ChartSeries>
       <ChartSeries Type="Syncfusion.Blazor.Charts.ChartSeriesType.Line" DataSource="@ChartPoints10" XName="Period" YName="StockPrice" Width="2" Name="Product J">
       </ChartSeries>
       <ChartSeries Type="Syncfusion.Blazor.Charts.ChartSeriesType.Line" DataSource="@ChartPoints11" XName="Period" YName="StockPrice" Width="2" Name="Product K">
       </ChartSeries>
       <ChartSeries Type="Syncfusion.Blazor.Charts.ChartSeriesType.Line" DataSource="@ChartPoints12" XName="Period" YName="StockPrice" Width="2" Name="Product L">
       </ChartSeries>
   </ChartSeriesCollection>
   <ChartLegendSettings Width="470" Position="Syncfusion.Blazor.Charts.LegendPosition.Custom" EnableHighlight="true">
       <ChartLocation X="15" Y="300"></ChartLocation>
   </ChartLegendSettings>
</SfChart>

@code {
   private Random randomNum = new Random();
   private double stockPrice1 = 10, stockPrice2 = 20, stockPrice3 = 30, stockPrice4 = 40, stockPrice5 = 50, stockPrice6 = 60,
   stockPrice7 = 70, stockPrice8 = 80, stockPrice9 = 90, stockPrice10 = 100, stockPrice11 = 110, stockPrice12 = 120;
   public List<LineChartData> ChartPoints1 { get; set; } = new List<LineChartData>();
   public List<LineChartData> ChartPoints2 { get; set; } = new List<LineChartData>();
   public List<LineChartData> ChartPoints3 { get; set; } = new List<LineChartData>();
   public List<LineChartData> ChartPoints4 { get; set; } = new List<LineChartData>();
   public List<LineChartData> ChartPoints5 { get; set; } = new List<LineChartData>();
   public List<LineChartData> ChartPoints6 { get; set; } = new List<LineChartData>();
   public List<LineChartData> ChartPoints7 { get; set; } = new List<LineChartData>();
   public List<LineChartData> ChartPoints8 { get; set; } = new List<LineChartData>();
   public List<LineChartData> ChartPoints9 { get; set; } = new List<LineChartData>();
   public List<LineChartData> ChartPoints10 { get; set; } = new List<LineChartData>();
   public List<LineChartData> ChartPoints11 { get; set; } = new List<LineChartData>();
   public List<LineChartData> ChartPoints12 { get; set; } = new List<LineChartData>();

   protected override void OnInitialized()
   {
       GetChartPoints();
   }
   private void GetChartPoints()
   {
       for (int i = 1; i < 50; i++)
       {
           if (randomNum.NextDouble() > 0.5)
           {
               stockPrice1 += randomNum.NextDouble();
               stockPrice2 += randomNum.NextDouble();
               stockPrice3 += randomNum.NextDouble();
               stockPrice4 += randomNum.NextDouble();
               stockPrice5 += randomNum.NextDouble();
               stockPrice6 += randomNum.NextDouble();
               stockPrice7 += randomNum.NextDouble();
               stockPrice8 += randomNum.NextDouble();
               stockPrice9 += randomNum.NextDouble();
               stockPrice10 += randomNum.NextDouble();
               stockPrice11 += randomNum.NextDouble();
               stockPrice12 += randomNum.NextDouble();
           }
           else
           {
               stockPrice1 -= randomNum.NextDouble();
               stockPrice2 -= randomNum.NextDouble();
               stockPrice3 -= randomNum.NextDouble();
               stockPrice4 -= randomNum.NextDouble();
               stockPrice5 -= randomNum.NextDouble();
               stockPrice6 -= randomNum.NextDouble();
               stockPrice7 -= randomNum.NextDouble();
               stockPrice8 -= randomNum.NextDouble();
               stockPrice9 -= randomNum.NextDouble();
               stockPrice10 -= randomNum.NextDouble();
               stockPrice11 -= randomNum.NextDouble();
               stockPrice12 -= randomNum.NextDouble();
           }
           ChartPoints1.Add(new LineChartData
               {
                   Period = new DateTime(1960, 1, 1).AddMonths(i + 1).AddDays(i),
                   StockPrice = Math.Round(stockPrice1)
               });
           ChartPoints2.Add(new LineChartData
               {
                   Period = new DateTime(1960, 1, 1).AddMonths(i + 1).AddDays(i),
                   StockPrice = Math.Round(stockPrice2)
               });
           ChartPoints3.Add(new LineChartData
               {
                   Period = new DateTime(1960, 1, 1).AddMonths(i + 1).AddDays(i),
                   StockPrice = Math.Round(stockPrice3)
               });
           ChartPoints4.Add(new LineChartData
               {
                   Period = new DateTime(1960, 1, 1).AddMonths(i + 1).AddDays(i),
                   StockPrice = Math.Round(stockPrice4)
               });
           ChartPoints5.Add(new LineChartData
               {
                   Period = new DateTime(1960, 1, 1).AddMonths(i + 1).AddDays(i),
                   StockPrice = Math.Round(stockPrice5)
               });
           ChartPoints6.Add(new LineChartData
               {
                   Period = new DateTime(1960, 1, 1).AddMonths(i + 1).AddDays(i),
                   StockPrice = Math.Round(stockPrice6)
               });
           ChartPoints7.Add(new LineChartData
               {
                   Period = new DateTime(1960, 1, 1).AddMonths(i + 1).AddDays(i),
                   StockPrice = Math.Round(stockPrice7)
               });
           ChartPoints8.Add(new LineChartData
               {
                   Period = new DateTime(1960, 1, 1).AddMonths(i + 1).AddDays(i),
                   StockPrice = Math.Round(stockPrice8)
               });
           ChartPoints9.Add(new LineChartData
               {
                   Period = new DateTime(1960, 1, 1).AddMonths(i + 1).AddDays(i),
                   StockPrice = Math.Round(stockPrice9)
               });
           ChartPoints10.Add(new LineChartData
               {
                   Period = new DateTime(1960, 1, 1).AddMonths(i + 1).AddDays(i),
                   StockPrice = Math.Round(stockPrice10)
               });
           ChartPoints11.Add(new LineChartData
               {
                   Period = new DateTime(1960, 1, 1).AddMonths(i + 1).AddDays(i),
                   StockPrice = Math.Round(stockPrice11)
               });
           ChartPoints12.Add(new LineChartData
               {
                   Period = new DateTime(1960, 1, 1).AddMonths(i + 1).AddDays(i),
                   StockPrice = Math.Round(stockPrice12)
               });
       }
   }
   public class LineChartData
   {
       public DateTime Period { get; set; }
       public double StockPrice { get; set; }
   }
} 

Output

The following screenshot illustrates the output of the above code:

Live Sample

You can view a live example of this implementation here:

Live sample for display custom legend within chart area bounds and without overlapping axis

Conclusion:

We hope you found this guide helpful in learning how to Display a Custom Legend Within Chart Bounds in Blazor Charts. For more features, visit our [Blazor Charts feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our [Blazor Charts example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!