Search results

Vertical Chart in Blazor Chart component

08 Apr 2021 / 1 minute to read

You can draw a chart in vertical manner by changing orientation of the axis. All series types support this feature. You can use IsTransposed property in chart to render a chart in vertical manner.

vertical.razor
Copied to clipboard
@using Syncfusion.Blazor.Charts

<SfChart IsTransposed="true">
    <ChartSeriesCollection>
        <ChartSeries DataSource="@SalesReports" XName="X" YName="Y" Type="ChartSeriesType.Spline">
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

@code{
    public class ChartData
    {
        public double X { get; set; }
        public double Y { get; set; }
    }

    public List<ChartData> SalesReports = new List<ChartData>
{
        new ChartData{ X= 2005, Y= 28 },
        new ChartData{ X= 2006, Y= 25 },
        new ChartData{ X= 2007, Y= 26 },
        new ChartData{ X= 2008, Y= 27 },
        new ChartData{ X= 2009, Y= 32 },
        new ChartData{ X= 2010, Y= 35 },
        new ChartData{ X= 2011, Y= 30 }
    };
}

Pareto chart

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.

See Also