How to prevent axis label overlap with panes in Blazor Charts?

This article explains how to display axis labels without any overlap when multiple panes are used in Blazor Charts.

Preventing axis labels overlap with multiple panes

Blazor Charts provides an option to display axis labels without any overlap using PlotOffset property of axis.

The PlotOffset property defines padding around the plot area top and bottom for the vertical axis, and left and right for the horizontal axis. Adjusting the PlotOffset allows you to control the spacing around the chart’s plot area.

When Multiple Panes are rendered for chart with OpposedPosition true, the last label of first pane overlaps the first label of second pane. This can be prevented by specifying PlotOffsetRight for ChartPrimaryYAxis which adds spacing padding on the right side of plot area in pixels.

Code Snippet

@using Syncfusion.Blazor.Charts

<SfChart IsTransposed="true" Title="Weather condition JPN vs DEU">
   <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />
   <ChartPrimaryYAxis OpposedPosition="true" PlotOffsetRight="30" Title="YAxis0" />  
   <ChartColumns>
       <ChartColumn Width="50%" />
       <ChartColumn Width="50%" />
   </ChartColumns>
   <ChartAxes>
       <ChartAxis Interval="2" OpposedPosition="true" ColumnIndex="1" Name="XAxis" ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />
       <ChartAxis Name="YAxis" Title="YAxis1" ColumnIndex="1" OpposedPosition="true" />
   </ChartAxes>
   <ChartSeriesCollection>
       <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" Type="Syncfusion.Blazor.Charts.ChartSeriesType.Spline" />
       <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y1" Type="Syncfusion.Blazor.Charts.ChartSeriesType.Spline" YAxisName="YAxis" XAxisName="XAxis" />
   </ChartSeriesCollection>
</SfChart>
@code {
   public class ChartData
   {
       public string X { get; set; }
       public double Y { get; set; }
       public double Y1 { get; set; }
   }
   public List<ChartData> WeatherReports = new List<ChartData>
   {
       new ChartData{ X= "Jan", Y= 15, Y1= 33 },
       new ChartData{ X= "Feb", Y= 20, Y1= 31 },
       new ChartData{ X= "Mar", Y= 35, Y1= 30 },
       new ChartData{ X= "Apr", Y= 40, Y1= 28 },
       new ChartData{ X= "May", Y= 80, Y1= 29 },
       new ChartData{ X= "Jun", Y= 70, Y1= 30 },
       new ChartData{ X= "Jul", Y= 65, Y1= 33 },
       new ChartData{ X= "Aug", Y= 55, Y1= 32 },
       new ChartData{ X= "Sep", Y= 50, Y1= 34 },
       new ChartData{ X= "Oct", Y= 30, Y1= 32 },
       new ChartData{ X= "Nov", Y= 35, Y1= 32 },
       new ChartData{ X= "Dec", Y= 35, Y1= 31 }
   };
} 

Output

The following screenshot illustrates the output of the code snippet.

Sample

Live Sample to Prevent Axislabel in Multiple Panes

Conclusion

I hope you enjoyed learning about how to prevent axis label overlap with panes in Blazor Charts.

You can refer to our Blazor Chart’s feature tour page to learn about its other groundbreaking feature representations. You can also explore our Blazor Chart Documentation to understand how to present and manipulate data.

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

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