syncfusion-blazor-chart-wizard

@using Syncfusion.Blazor.ChartWizard
 
<SfChartWizard Width="100%" Height="500px">
    <ChartSettings DataSource="@SalesData"
                   CategoryFields="@CategoryList"
                   SeriesFields="@SeriesList"
                   SeriesType="ChartWizardSeriesType.Line">
    </ChartSettings>
</SfChartWizard>
 
@code {
    public class SalesInfo
    {
        public string Month { get; set; }
        public double Sales { get; set; }
    }
 
    private List<SalesInfo> SalesData = new()
    {
        new SalesInfo { Month = "Jan", Sales = 100 },
        new SalesInfo { Month = "Feb", Sales = 120 },
        new SalesInfo { Month = "Mar", Sales = 140 }
    };
 
    private readonly List<string> CategoryList = new() { "Month" };
    private readonly List<string> SeriesList = new() { "Sales" };
}

@using Syncfusion.Blazor.ChartWizard
 
<SfChartWizard Theme="Theme.Fluent2" Width="100%" Height="500px">
    <ChartSettings DataSource="@OlympicsData"
                   CategoryFields="@CategoryList"
                   SeriesFields="@SeriesList"
                   SeriesType="ChartWizardSeriesType.Bar">
    </ChartSettings>
</SfChartWizard>
 
@code {
    private readonly List<string> CategoryList = new() { "Country" };
    private readonly List<string> SeriesList = new() { "Gold", "Silver", "Bronze" };
 
    public class OlympicsDataModel
    {
        public string Country { get; set; }
        public int Gold { get; set; }
        public int Silver { get; set; }
        public int Bronze { get; set; }
    }
 
    private List<OlympicsDataModel> OlympicsData = new()
    {
        new OlympicsDataModel { Country = "USA",   Gold = 40, Silver = 44, Bronze = 42 },
        new OlympicsDataModel { Country = "China", Gold = 40, Silver = 27, Bronze = 24 },
        new OlympicsDataModel { Country = "Japan", Gold = 20, Silver = 12, Bronze = 13 }
    };
}

@using Syncfusion.Blazor.ChartWizard
 
<SfChartWizard Width="100%" Height="500px">
    <ChartSettings DataSource="@ReportData"
                   CategoryFields="@CategoryList"
                   SeriesFields="@SeriesList"
                   SeriesType="ChartWizardSeriesType.Column">
 
        <ChartExportSettings FileName="QuarterlyReport"
                             Width="1024"
                             Height="768"
                             Orientation="Syncfusion.Blazor.ChartWizard.PageOrientation.Landscape" />
    </ChartSettings>
</SfChartWizard>
 
@code {
    private readonly List<string> CategoryList = new() { "Quarter" };
    private readonly List<string> SeriesList = new() { "Revenue", "Profit" };
 
    public class ReportItem
    {
        public string Quarter { get; set; }
        public double Revenue { get; set; }
        public double Profit { get; set; }
    }
 
    private List<ReportItem> ReportData = new()
    {
        new ReportItem { Quarter = "Q1", Revenue = 120000, Profit = 45000 },
        new ReportItem { Quarter = "Q2", Revenue = 150000, Profit = 60000 },
        new ReportItem { Quarter = "Q3", Revenue = 170000, Profit = 75000 },
        new ReportItem { Quarter = "Q4", Revenue = 200000, Profit = 90000 }
    };
}

@using Syncfusion.Blazor.ChartWizard
 
<SfChartWizard Width="90%"
               Height="600px"
               PropertyPanelExpanded="false"
               Theme="Theme.Material3">
 
    <ChartSettings DataSource="@MyData"
                   CategoryFields="@CategoryFields"
                   SeriesFields="@SeriesFields"
                   SeriesType="ChartWizardSeriesType.Area">
    </ChartSettings>
 
</SfChartWizard>
 
@code {
    private readonly List<string> CategoryFields = new() { "CategoryName" };
    private readonly List<string> SeriesFields = new() { "Value1", "Value2" };
 
    public class MyItem
    {
        public string CategoryName { get; set; }
        public double Value1 { get; set; }
        public double Value2 { get; set; }
    }
 
    private List<MyItem> MyData = new()
    {
        new MyItem { CategoryName = "A", Value1 = 30, Value2 = 20 },
        new MyItem { CategoryName = "B", Value1 = 45, Value2 = 35 },
        new MyItem { CategoryName = "C", Value1 = 50, Value2 = 40 }
    };
}

@using Syncfusion.Blazor.ChartWizard
 
<SfChartWizard Width="100%"
               Height="600px"
               Theme="Theme.Bootstrap5">
 
    <ChartSettings DataSource="@QuarterlySales"
                   CategoryFields="@CategoryFields"
                   SeriesFields="@SeriesFields"
                   SeriesType="ChartWizardSeriesType.StackingColumn">
 
        <ChartExportSettings FileName="QuarterlyAnalysis"
                             Orientation="Syncfusion.Blazor.ChartWizard.PageOrientation.Landscape" />
    </ChartSettings>
 
</SfChartWizard>
 
@code {
    private readonly List<string> CategoryFields = new() { "Quarter", "Region" };
    private readonly List<string> SeriesFields = new() { "Revenue", "Profit", "Expenses" };
 
    public class QuarterlySale
    {
        public string Quarter { get; set; }
        public string Region { get; set; }
        public double Revenue { get; set; }
        public double Profit { get; set; }
        public double Expenses { get; set; }
    }
 
    private List<QuarterlySale> QuarterlySales = new()
    {
        new QuarterlySale { Quarter = "Q1", Region = "North", Revenue = 150000, Profit = 50000, Expenses = 30000 },
        new QuarterlySale { Quarter = "Q2", Region = "North", Revenue = 170000, Profit = 60000, Expenses = 35000 },
        new QuarterlySale { Quarter = "Q3", Region = "South", Revenue = 160000, Profit = 55000, Expenses = 32000 },
        new QuarterlySale { Quarter = "Q4", Region = "South", Revenue = 180000, Profit = 65000, Expenses = 38000 }
    };
}

@using Syncfusion.Blazor.ChartWizard
 
<SfChartWizard Theme="Theme.Material3"
               PropertyPanelExpanded="true"
               Width="100%"
               Height="500px">
 
    <ChartSettings DataSource="@OlympicsMedals"
                   CategoryFields="@CategoryFields"
                   SeriesFields="@SeriesFields"
                   SeriesType="ChartWizardSeriesType.Bar">
    </ChartSettings>
 
</SfChartWizard>
 
@code {
    private readonly List<string> CategoryFields = new() { "Country" };
    private readonly List<string> SeriesFields = new() { "Gold", "Silver", "Bronze" };
 
    public class OlympicsMedalInfo
    {
        public string Country { get; set; }
        public int Gold { get; set; }
        public int Silver { get; set; }
        public int Bronze { get; set; }
    }
 
    private List<OlympicsMedalInfo> OlympicsMedals = new()
    {
        new OlympicsMedalInfo { Country = "USA",   Gold = 40, Silver = 44, Bronze = 42 },
        new OlympicsMedalInfo { Country = "China", Gold = 40, Silver = 27, Bronze = 24 },
        new OlympicsMedalInfo { Country = "Japan", Gold = 20, Silver = 12, Bronze = 13 }
    };
}

@using Syncfusion.Blazor.ChartWizard
 
<SfChartWizard Width="90%"
               Height="500px">
 
    <ChartSettings DataSource="@MonthlySales"
                   CategoryFields="@CategoryFields"
                   SeriesFields="@SeriesFields"
                   SeriesType="ChartWizardSeriesType.Line">
    </ChartSettings>
 
</SfChartWizard>
 
@code {
    private readonly List<string> CategoryFields = new() { "Month" };
    private readonly List<string> SeriesFields = new() { "CurrentYear", "PreviousYear" };
 
    public class SalesRecord
    {
        public string Month { get; set; }
        public double CurrentYear { get; set; }
        public double PreviousYear { get; set; }
    }
 
    private List<SalesRecord> MonthlySales = new()
    {
        new SalesRecord { Month = "Jan", CurrentYear = 12000, PreviousYear = 10000 },
        new SalesRecord { Month = "Feb", CurrentYear = 13500, PreviousYear = 11000 },
        new SalesRecord { Month = "Mar", CurrentYear = 15000, PreviousYear = 12500 }
    };
}

@using Syncfusion.Blazor.ChartWizard
 
<SfChartWizard EnableRtl="false"
               Theme="Theme.Fluent2"
               Width="100%"
               Height="500px">
 
    <ChartSettings DataSource="@CityPopulation"
                   CategoryFields="@CategoryFields"
                   SeriesFields="@SeriesFields"
                   SeriesType="ChartWizardSeriesType.Column">
    </ChartSettings>
 
</SfChartWizard>
 
@code {
    private readonly List<string> CategoryFields = new() { "City", "Country" };
    private readonly List<string> SeriesFields = new() { "Population" };
 
    public class PopulationInfo
    {
        public string City { get; set; }
        public string Country { get; set; }
        public double Population { get; set; }
    }
 
    private List<PopulationInfo> CityPopulation = new()
    {
        new PopulationInfo { City = "Tokyo",       Country = "Japan",  Population = 37.4 },
        new PopulationInfo { City = "Delhi",       Country = "India",  Population = 31.0 },
        new PopulationInfo { City = "Shanghai",    Country = "China",  Population = 27.0 },
        new PopulationInfo { City = "São Paulo",   Country = "Brazil", Population = 22.0 }
    };
}

dotnet add package Syncfusion.Blazor.ChartWizard

@using Syncfusion.Blazor
@using Syncfusion.Blazor.ChartWizard

// Program.cs
builder.Services.AddSyncfusionBlazor();

<!-- App.razor or _Host.cshtml -->
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>