How to Add Secondary X and Y Axes in Syncfusion Blazor Charts?

This article explains how to create and configure new secondary X and Y axes in Syncfusion Blazor Charts.

Adding secondary axes

In Syncfusion Blazor Charts, you can add additional (secondary) X and Y axes using the ChartAxis component. Follow these steps:

• Secondary X-Axis: Set OpposedPosition=“true” and assign a unique Name.
• Secondary Y-Axis: Set IsInversed=“true” and OpposedPosition=“true”, and assign a unique Name.
• Use the XAxisName and YAxisName properties in ChartSeries to bind the series to the corresponding axes.

Example

The following code demonstrates how to add secondary X and Y axes and bind them to a chart series.

@using Syncfusion.Blazor.Charts

<SfChart>
   <ChartPrimaryXAxis EdgeLabelPlacement="EdgeLabelPlacement.Shift" />
   <ChartPrimaryYAxis Maximum=600 Title="Production (Billion as kWh)" LabelFormat="{value}B" />
   <ChartAxes>
       <ChartAxis OpposedPosition="true" Name="xAxis" />
       <ChartAxis Maximum=600 IsInversed="true" OpposedPosition="true" Name="yAxis" />
   </ChartAxes>
   <ChartSeriesCollection>
       <ChartSeries DataSource="@ChartPoints" XName="Period"
                    YName="RenewableResourcesProduction" Opacity="0.6" Type="Syncfusion.Blazor.Charts.ChartSeriesType.StepArea">
           <ChartSeriesBorder Width="2"></ChartSeriesBorder>
       </ChartSeries>
       <ChartSeries XAxisName="xAxis" YAxisName="yAxis" DataSource="@ChartPoints" XName="Period" Width="2"
                    YName="NonRenewableResourcesProduction" Opacity="0.6" Type="Syncfusion.Blazor.Charts.ChartSeriesType.StepArea">
           <ChartSeriesBorder Width="2"></ChartSeriesBorder>
       </ChartSeries>
   </ChartSeriesCollection>
</SfChart>

@code {

   public List<StepAreaChartData> ChartPoints = new List<StepAreaChartData>
   {
       new StepAreaChartData { Period = 2000, RenewableResourcesProduction = 216, NonRenewableResourcesProduction = 180 },
       new StepAreaChartData { Period = 2001, RenewableResourcesProduction = 290, NonRenewableResourcesProduction = 240 },
       new StepAreaChartData { Period = 2002, RenewableResourcesProduction = 270, NonRenewableResourcesProduction = 170 },
       new StepAreaChartData { Period = 2003, RenewableResourcesProduction = 300, NonRenewableResourcesProduction = 200 },
       new StepAreaChartData { Period = 2004, RenewableResourcesProduction = 249, NonRenewableResourcesProduction = 229 },
       new StepAreaChartData { Period = 2005, RenewableResourcesProduction = 270, NonRenewableResourcesProduction = 210 },
       new StepAreaChartData { Period = 2006, RenewableResourcesProduction = 237, NonRenewableResourcesProduction = 237 },
       new StepAreaChartData { Period = 2007, RenewableResourcesProduction = 258, NonRenewableResourcesProduction = 258 },
       new StepAreaChartData { Period = 2008, RenewableResourcesProduction = 300, NonRenewableResourcesProduction = 270 },
       new StepAreaChartData { Period = 2009, RenewableResourcesProduction = 273, NonRenewableResourcesProduction = 173 },
       new StepAreaChartData { Period = 2010, RenewableResourcesProduction = 320, NonRenewableResourcesProduction = 220 },
       new StepAreaChartData { Period = 2011, RenewableResourcesProduction = 320, NonRenewableResourcesProduction = 220 }
   };

   public class StepAreaChartData
   {
       public double Period { get; set; }
       public double RenewableResourcesProduction { get; set; }
       public double NonRenewableResourcesProduction { get; set; }
   }
} 

Output

The following screenshot shows the chart with the configured secondary X and Y axes:

Live Demo

Live Sample: Add secondary X and Y Axes in Blazor Charts

Conclusion:

We hope you found this guide helpful in learning How to add secondary X and Y Axes in Syncfusion 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!