How to display a custom legend within chart bounds without overlapping axes in Blazor Charts?

11 mins read

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; }
   }
}