Multiple Panes in Blazor Chart component

28 Jul 2021 / 2 minutes to read

Chart area can be divided into multiple panes using Rows and Columns.

Rows

To split the chart area vertically into number of rows, use Rows property of the chart.

You can allocate space for each row by using the Height property. The value can be either in percentage or in pixel.
To associate a vertical axis to a particular row, specify its index to RowIndex property of the axis.
To customize each row bottom line, use Border property.

row.razor

@using Syncfusion.Blazor.Charts

<SfChart Title="Weather condition JPN vs DEU">
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"/>    

    <ChartPrimaryYAxis Title="Temperature (Fahrenheit)" LabelFormat="{value}°F" Minimum="0" Maximum="90" Interval="20"/>    

    <ChartRows>
        <ChartRow Height="50%"/>
        <ChartRow Height="50%"/>
    </ChartRows>

    <ChartAxes>
        <ChartAxis Minimum="24" Maximum="36" Interval="2" OpposedPosition="true" RowIndex="1" Name="YAxis" LabelFormat="{value}°C"/>        
    </ChartAxes>

    <ChartSeriesCollection>

        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" Type="ChartSeriesType.Column"/>
        
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y1" YAxisName="YAxis"/>
        
    </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 }
   };
}

Rows

For spanning the vertical axis along multiple row, you can use Span property of the axis.

row-span.razor

@using Syncfusion.Blazor.Charts

<SfChart Title="Weather condition JPN vs DEU">
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"/>    

    <ChartPrimaryYAxis Span="2" Title="Temperature (Fahrenheit)" LabelFormat="{value}°F" Minimum="0" Maximum="90" Interval="20"/>    

    <ChartRows>
        <ChartRow Height="50%"/>
        <ChartRow Height="50%"/>
    </ChartRows>

    <ChartAxes>
        <ChartAxis Minimum="24" Maximum="36" Interval="2" OpposedPosition="true" RowIndex="1" Name="YAxis" LabelFormat="{value}°C"/>        
    </ChartAxes>

    <ChartSeriesCollection>

        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" Type="ChartSeriesType.Column"/>
        
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y1" YAxisName="YAxis"/>
        
    </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 }
   };
}

Rows

Columns

To split the chart area horizontally into number of columns, use Columns property of the chart.

You can allocate space for each column by using the Width property. The given width can be either in percentage or in pixel.
To associate a horizontal axis to a particular column, specify its index to ColumnIndex property of the axis.
To customize each column bottom line, use Border property.

column.razor

@using Syncfusion.Blazor.Charts

<SfChart Title="Weather condition JPN vs DEU">

    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"/>    

    <ChartPrimaryYAxis Title="Temperature (Fahrenheit)" LabelFormat="{value}°F" Minimum="0" Maximum="90" Interval="20"/>
    
    <ChartColumns>
        <ChartColumn Width="50%"/>        
        <ChartColumn Width="50%"/>        
    </ChartColumns>

    <ChartAxes>
        <ChartAxis Interval="2" OpposedPosition="true" ColumnIndex="1" Name="XAxis" ValueType="Syncfusion.Blazor.Charts.ValueType.Category"/>
       
    </ChartAxes>

    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" Type="ChartSeriesType.Column"/>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y1" 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 }
   };
}

Columns

For spanning the horizontal axis along multiple column, you can use Span property of an axis.

column-span.razor

@using Syncfusion.Blazor.Charts

<SfChart Title="Weather condition JPN vs DEU">

    <ChartPrimaryXAxis Span="2" ValueType="Syncfusion.Blazor.Charts.ValueType.Category"/>    

    <ChartPrimaryYAxis Title="Temperature (Fahrenheit)" LabelFormat="{value}°F" Minimum="0" Maximum="90" Interval="20"/>
    
    <ChartColumns>
        <ChartColumn Width="50%"/>        
        <ChartColumn Width="50%"/>        
    </ChartColumns>

    <ChartAxes>
        <ChartAxis Interval="2" OpposedPosition="true" ColumnIndex="1" Name="XAxis" ValueType="Syncfusion.Blazor.Charts.ValueType.Category"/>
       
    </ChartAxes>

    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" Type="ChartSeriesType.Column"/>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y1" 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 }
   };
}

Columns

Note: You can refer to our Blazor Charts feature tour page for its groundbreaking feature representations. You can also explore our Blazor Chart example to knows various chart types and how to represent time-dependent data, showing trends in data at equal intervals.

Multiple Panes in Blazor Chart component

Rows

Columns

See Also