Added in v2.2

Blazorise SVG Chart component

Full C# and Blazor charting, rendered with native SVG.

The SVG chart extension renders charts directly from C# data, options, callbacks, and child components. It supports declarative data binding through child components and explicit data models for imperative scenarios.

Supported chart types are:

SvgColumnChart
SvgBarChart
SvgLineChart
SvgAreaChart
SvgPieChart
SvgDoughnutChart
SvgPolarAreaChart
SvgRadarChart
SvgScatterChart
SvgBubbleChart

Built-in features

SVG charts also include built-in chart plugins and interaction features that can be configured from C# and Blazor. Use plugins to add custom SVG rendering, or use the built-in pages for animation, annotations, data labels, streaming, trendlines, and zoom and pan.

To use the SVG chart components, install the Blazorise.Charts.Svg package first.

Installation

NuGet

Install SVG chart extension from NuGet.

Install-Package Blazorise.Charts.Svg

Imports

In your main _Imports.razor add:

@using Blazorise.Charts.Svg

Examples

Column chart

Use a column chart to compare category values vertically.

<SvgColumnChart TItem="MonthlyRevenue"
                Items="@revenue"
                Options="@options">
    <SvgChartTitle Title='@("Monthly revenue")' Subtitle='@("Column series with grouped values")' />
    <SvgChartLegend Position="SvgChartLegendPosition.Bottom" />
    <SvgChartTooltip Enabled />
    <SvgChartCategoryAxis Value="@( item => item.Month )" />
    <SvgChartValueAxis BeginAtZero TickCount="6" />

    <SvgColumnSeries Name="Revenue" Value="@( item => item.Revenue )" Color="Color.Primary" BorderRadius="4" />
    <SvgColumnSeries Name="Expenses" Value="@( item => item.Expenses )" Color="Color.Info" BorderRadius="4" />
</SvgColumnChart>

@code {
    private readonly SvgChartOptions options = new()
    {
        Height = 360,
        Legend = new() { Position = SvgChartLegendPosition.Bottom },
    };

    private readonly List<MonthlyRevenue> revenue =
    [
        new() { Month = "Jan", Revenue = 68, Expenses = 42 },
        new() { Month = "Feb", Revenue = 74, Expenses = 46 },
        new() { Month = "Mar", Revenue = 91, Expenses = 52 },
        new() { Month = "Apr", Revenue = 86, Expenses = 49 },
        new() { Month = "May", Revenue = 103, Expenses = 61 },
    ];

    private sealed class MonthlyRevenue
    {
        public string Month { get; set; }

        public double Revenue { get; set; }

        public double Expenses { get; set; }
    }
}

Bar chart

Use a bar chart to compare category values horizontally.

<SvgBarChart TItem="RegionalRevenue"
             Items="@revenue"
             Options="@options">
    <SvgChartTitle Title='@("Regional revenue")' Subtitle='@("Horizontal grouped bars")' />
    <SvgChartLegend Position="SvgChartLegendPosition.Bottom" />
    <SvgChartTooltip Enabled />
    <SvgChartCategoryAxis Value="@( item => item.Region )" />
    <SvgChartValueAxis BeginAtZero TickCount="6" />

    <SvgBarSeries Name="Online" Value="@( item => item.Online )" Color="Color.Primary" BorderRadius="4" />
    <SvgBarSeries Name="Retail" Value="@( item => item.Retail )" Color="Color.Success" BorderRadius="4" />
</SvgBarChart>

@code {
    private readonly SvgChartOptions options = new()
    {
        Height = 360,
        Legend = new() { Position = SvgChartLegendPosition.Bottom },
    };

    private readonly List<RegionalRevenue> revenue =
    [
        new() { Region = "North", Online = 72, Retail = 54 },
        new() { Region = "South", Online = 84, Retail = 66 },
        new() { Region = "East", Online = 93, Retail = 71 },
        new() { Region = "West", Online = 78, Retail = 64 },
    ];

    private sealed class RegionalRevenue
    {
        public string Region { get; set; }

        public double Online { get; set; }

        public double Retail { get; set; }
    }
}

Line chart

Use a line chart to show a trend across ordered categories.

<SvgLineChart TItem="MonthlyVisitors"
              Items="@visitors"
              Options="@options">
    <SvgChartTitle Title='@("Visitor trend")' Subtitle='@("Line series with markers")' />
    <SvgChartLegend Position="SvgChartLegendPosition.Bottom" />
    <SvgChartTooltip Enabled />
    <SvgChartCategoryAxis Value="@( item => item.Month )" />
    <SvgChartValueAxis BeginAtZero TickCount="6" />

    <SvgLineSeries Name="Current year" Value="@( item => item.Current )" Color="Color.Primary" StrokeWidth="3" MarkerRadius="4" />
    <SvgLineSeries Name="Previous year" Value="@( item => item.Previous )" Color="Color.Warning" StrokeWidth="3" MarkerRadius="4" />
</SvgLineChart>

@code {
    private readonly SvgChartOptions options = new()
    {
        Height = 360,
        Legend = new() { Position = SvgChartLegendPosition.Bottom },
    };

    private readonly List<MonthlyVisitors> visitors =
    [
        new() { Month = "Jan", Current = 48, Previous = 42 },
        new() { Month = "Feb", Current = 61, Previous = 52 },
        new() { Month = "Mar", Current = 73, Previous = 64 },
        new() { Month = "Apr", Current = 68, Previous = 70 },
        new() { Month = "May", Current = 82, Previous = 76 },
    ];

    private sealed class MonthlyVisitors
    {
        public string Month { get; set; }

        public double Current { get; set; }

        public double Previous { get; set; }
    }
}

Area chart

Use an area chart when the filled region helps show magnitude over time.

<SvgAreaChart TItem="MonthlyThroughput"
              Items="@throughput"
              Options="@options">
    <SvgChartTitle Title='@("Throughput")' Subtitle='@("Area series with transparent fills")' />
    <SvgChartLegend Position="SvgChartLegendPosition.Bottom" />
    <SvgChartTooltip Enabled />
    <SvgChartCategoryAxis Value="@( item => item.Month )" />
    <SvgChartValueAxis BeginAtZero TickCount="6" />

    <SvgAreaSeries Name="Reads" Value="@( item => item.Reads )" Color="Color.Primary" StrokeWidth="3" FillOpacity="0.18" />
    <SvgAreaSeries Name="Writes" Value="@( item => item.Writes )" Color="Color.Success" StrokeWidth="3" FillOpacity="0.18" />
</SvgAreaChart>

@code {
    private readonly SvgChartOptions options = new()
    {
        Height = 360,
        Legend = new() { Position = SvgChartLegendPosition.Bottom },
    };

    private readonly List<MonthlyThroughput> throughput =
    [
        new() { Month = "Jan", Reads = 96, Writes = 63 },
        new() { Month = "Feb", Reads = 128, Writes = 41 },
        new() { Month = "Mar", Reads = 120, Writes = 80 },
        new() { Month = "Apr", Reads = 133, Writes = 88 },
        new() { Month = "May", Reads = 124, Writes = 56 },
    ];

    private sealed class MonthlyThroughput
    {
        public string Month { get; set; }

        public double Reads { get; set; }

        public double Writes { get; set; }
    }
}

Custom colors

Use custom color values when series should follow a brand palette or CSS variable.

<SvgAreaChart TItem="ProductRevenue"
              Items="@revenue"
              Options="@options">
    <SvgChartTitle Title='@("Revenue by channel")' Subtitle='@("Series using custom CSS color values")' />
    <SvgChartLegend Position="SvgChartLegendPosition.Bottom" />
    <SvgChartTooltip Enabled />
    <SvgChartCategoryAxis Value="@( item => item.Month )" />
    <SvgChartValueAxis BeginAtZero TickCount="6" />

    <SvgAreaSeries Name="Direct" Value="@( item => item.Direct )" Color="@directColor" StrokeWidth="3" FillOpacity="0.2" />
    <SvgAreaSeries Name="Partners" Value="@( item => item.Partners )" Color="@partnersColor" StrokeWidth="3" FillOpacity="0.18" />
    <SvgAreaSeries Name="Marketplace" Value="@( item => item.Marketplace )" Color="@marketplaceColor" StrokeWidth="3" FillOpacity="0.16" />
</SvgAreaChart>

@code {
    private readonly Color directColor = "#7c3aed";

    private readonly Color partnersColor = "rgb(14, 165, 233)";

    private readonly Color marketplaceColor = "var(--b-theme-success, #16a34a)";

    private readonly SvgChartOptions options = new()
    {
        Height = 360,
        Legend = new() { Position = SvgChartLegendPosition.Bottom },
        XAxis = new()
        {
            GridLines = new() { Visible = true },
        },
    };

    private readonly List<ProductRevenue> revenue =
    [
        new() { Month = "Jan", Direct = 42, Partners = 36, Marketplace = 24 },
        new() { Month = "Feb", Direct = 54, Partners = 42, Marketplace = 30 },
        new() { Month = "Mar", Direct = 63, Partners = 51, Marketplace = 36 },
        new() { Month = "Apr", Direct = 58, Partners = 57, Marketplace = 42 },
        new() { Month = "May", Direct = 72, Partners = 64, Marketplace = 50 },
        new() { Month = "Jun", Direct = 81, Partners = 69, Marketplace = 56 },
    ];

    private sealed class ProductRevenue
    {
        public string Month { get; set; }

        public double Direct { get; set; }

        public double Partners { get; set; }

        public double Marketplace { get; set; }
    }
}

Mixed chart

Use the base SVG chart component when multiple series types should share one plot area.

<SvgChart TItem="RevenueGrowth"
          Items="@revenue"
          Options="@options">
    <SvgChartTitle Title='@("Revenue and growth")' Subtitle='@("Column and line series with separate value axes")' />
    <SvgChartLegend Position="SvgChartLegendPosition.Bottom" />
    <SvgChartTooltip Enabled />
    <SvgChartCategoryAxis Id="months" Value="@( item => item.Month )" />
    <SvgChartValueAxis Id="revenue" Position="SvgChartAxisPosition.Left" BeginAtZero TickCount="6" Title="Revenue" />
    <SvgChartValueAxis Id="growth" Position="SvgChartAxisPosition.Right" Min="-5" Max="25" TickCount="7" Title="Growth %" />

    <SvgColumnSeries Name="Revenue"
                     CategoryAxisId="months"
                     ValueAxisId="revenue"
                     Value="@( item => item.Revenue )"
                     Color="Color.Primary"
                     BorderRadius="4" />
    <SvgLineSeries Name="Growth %"
                   CategoryAxisId="months"
                   ValueAxisId="growth"
                   Value="@( item => item.Growth )"
                   Color="Color.Danger"
                   StrokeWidth="3"
                   MarkerRadius="4"
                   Order="20" />
</SvgChart>

@code {
    private readonly SvgChartOptions options = new()
    {
        Height = 360,
        Legend = new() { Position = SvgChartLegendPosition.Bottom },
    };

    private readonly List<RevenueGrowth> revenue =
    [
        new() { Month = "Jan", Revenue = 68, Growth = 8.4 },
        new() { Month = "Feb", Revenue = 74, Growth = 11.2 },
        new() { Month = "Mar", Revenue = 91, Growth = 16.7 },
        new() { Month = "Apr", Revenue = 86, Growth = 13.9 },
        new() { Month = "May", Revenue = 103, Growth = 20.4 },
    ];

    private sealed class RevenueGrowth
    {
        public string Month { get; set; }

        public double Revenue { get; set; }

        public double Growth { get; set; }
    }
}

Stacking, interaction, and time labels

Combine stacked series, grouped tooltip interaction, axis tick callbacks, and time-formatted category labels.

SvgChartTimeAxis uses ordinal spacing by default. Set Scale to SvgChartTimeScale.Continuous on line, area, scatter, and bubble charts when irregular time values should be spaced by elapsed time.

<SvgColumnChart TItem="MonthlyRevenue"
                Items="@revenue"
                Options="@options">
    <SvgChartTitle Title='@("Stacked revenue")' Subtitle='@("Index tooltip, stacked values, and formatted axis ticks")' />
    <SvgChartLegend Position="SvgChartLegendPosition.Bottom" />
    <SvgChartTooltip Enabled InteractionMode="SvgChartInteractionMode.Index" Width="220" />
    <SvgChartTimeAxis TimeValue="@( item => (DateTime?)item.Month )" Unit="SvgChartTimeUnit.Month" />
    <SvgChartValueAxis BeginAtZero Stacked TickCount="6" TickFormatter="@FormatCurrencyTick" />

    <SvgColumnSeries Name="Product" Stack="revenue" Value="@( item => item.Product )" Color="Color.Primary" BorderRadius="4" />
    <SvgColumnSeries Name="Services" Stack="revenue" Value="@( item => item.Services )" Color="Color.Info" BorderRadius="4" />
    <SvgColumnSeries Name="Support" Stack="revenue" Value="@( item => item.Support )" Color="Color.Success" BorderRadius="4" />
</SvgColumnChart>

@code {
    private readonly SvgChartOptions options = new()
    {
        Height = 360,
        Legend = new() { Position = SvgChartLegendPosition.Bottom },
        Tooltip = new() { InteractionMode = SvgChartInteractionMode.Index, Width = 220 },
        YAxis = new() { BeginAtZero = true, Stacked = true, TickCount = 6 },
    };

    private readonly List<MonthlyRevenue> revenue =
    [
        new() { Month = new DateTime( 2026, 1, 1 ), Product = 42, Services = 24, Support = 12 },
        new() { Month = new DateTime( 2026, 2, 1 ), Product = 48, Services = 28, Support = 14 },
        new() { Month = new DateTime( 2026, 3, 1 ), Product = 55, Services = 32, Support = 18 },
        new() { Month = new DateTime( 2026, 4, 1 ), Product = 51, Services = 35, Support = 20 },
    ];

    private static string FormatCurrencyTick( SvgChartAxisTickContext context )
    {
        return context.Value is IFormattable value ? $"${value.ToString( "0", null )}" : context.Value?.ToString();
    }

    private sealed class MonthlyRevenue
    {
        public DateTime Month { get; set; }

        public double Product { get; set; }

        public double Services { get; set; }

        public double Support { get; set; }
    }
}

Continuous time axis

Use continuous time scaling when sample spacing should match the actual timestamp distance.

<SvgLineChart TItem="LatencySample"
              Items="@samples"
              Options="@options">
    <SvgChartTitle Title='@("Service latency")' Subtitle='@("Irregular samples spaced by elapsed time")' />
    <SvgChartLegend Position="SvgChartLegendPosition.Bottom" />
    <SvgChartTooltip Enabled InteractionMode="SvgChartInteractionMode.Index" Width="220" />
    <SvgChartTimeAxis TimeValue="@( item => item.Timestamp )" Scale="SvgChartTimeScale.Continuous" Unit="SvgChartTimeUnit.Minute" />
    <SvgChartValueAxis BeginAtZero TickCount="6" />

    <SvgLineSeries Name="API" Value="@( item => item.Api )" Color="Color.Primary" StrokeWidth="3" MarkerRadius="4" />
    <SvgLineSeries Name="Queue" Value="@( item => item.Queue )" Color="Color.Warning" StrokeWidth="3" MarkerRadius="4" />
</SvgLineChart>

@code {
    private readonly SvgChartOptions options = new()
    {
        Height = 360,
        Legend = new() { Position = SvgChartLegendPosition.Bottom },
        XAxis = new() { TickCount = 5, GridLines = new() { Visible = true } },
    };

    private readonly List<LatencySample> samples =
    [
        new() { Timestamp = new DateTime( 2026, 5, 23, 9, 0, 0 ), Api = 44, Queue = 29 },
        new() { Timestamp = new DateTime( 2026, 5, 23, 9, 4, 0 ), Api = 52, Queue = 33 },
        new() { Timestamp = new DateTime( 2026, 5, 23, 9, 17, 0 ), Api = 47, Queue = 35 },
        new() { Timestamp = new DateTime( 2026, 5, 23, 9, 28, 0 ), Api = 61, Queue = 40 },
        new() { Timestamp = new DateTime( 2026, 5, 23, 9, 49, 0 ), Api = 56, Queue = 38 },
        new() { Timestamp = new DateTime( 2026, 5, 23, 10, 6, 0 ), Api = 68, Queue = 45 },
        new() { Timestamp = new DateTime( 2026, 5, 23, 10, 30, 0 ), Api = 63, Queue = 42 },
    ];

    private sealed class LatencySample
    {
        public DateTime Timestamp { get; set; }

        public double Api { get; set; }

        public double Queue { get; set; }
    }
}

Pie chart

Use a pie chart to show how values contribute to a whole.

<SvgPieChart TItem="object"
             Data="@data"
             Options="@options">
    <SvgChartTitle Title='@("Market share")' Subtitle='@("Category legend toggles individual slices")' />
    <SvgChartTooltip Enabled />
</SvgPieChart>

@code {
    private readonly SvgChartOptions options = new()
    {
        Height = 320,
        Legend = new() { Position = SvgChartLegendPosition.Bottom },
    };

    private readonly SvgChartData<double?> data = new()
    {
        Labels = ["Desktop", "Mobile", "Tablet", "Other"],
        Series =
        [
            new()
            {
                Name = "Share",
                Values = [45, 32, 16, 7],
            },
        ]
    };
}

Doughnut chart

Use a doughnut chart as a radial share chart with a center opening.

<SvgDoughnutChart TItem="object"
                  Data="@data"
                  Options="@options">
    <SvgChartTitle Title='@("Traffic sources")' Subtitle='@("Doughnut chart with category legend")' />
    <SvgChartTooltip Enabled />
</SvgDoughnutChart>

@code {
    private readonly SvgChartOptions options = new()
    {
        Height = 320,
        Legend = new() { Position = SvgChartLegendPosition.Bottom },
    };

    private readonly SvgChartData<double?> data = new()
    {
        Labels = ["Search", "Direct", "Social", "Referral"],
        Series =
        [
            new()
            {
                Name = "Sessions",
                Values = [38, 27, 21, 14],
            },
        ]
    };
}

Polar area chart

Use a polar area chart to compare values by radial length.

<SvgPolarAreaChart TItem="object"
                   Data="@data"
                   Options="@options">
    <SvgChartTitle Title='@("Channel mix")' Subtitle='@("Equal-angle radial values")' />
    <SvgChartTooltip Enabled />
</SvgPolarAreaChart>

@code {
    private readonly SvgChartOptions options = new()
    {
        Height = 320,
        Legend = new() { Position = SvgChartLegendPosition.Bottom },
    };

    private readonly SvgChartData<double?> data = new()
    {
        Labels = ["Email", "Ads", "Organic", "Partner"],
        Series =
        [
            new()
            {
                Name = "Leads",
                Values = [28, 42, 35, 18],
            },
        ]
    };
}

Radar chart

Use a radar chart to compare multiple metrics across the same dimensions.

<SvgRadarChart TItem="object"
               Data="@data"
               Options="@options">
    <SvgChartTitle Title='@("Product fit")' Subtitle='@("Multiple series across shared dimensions")' />
    <SvgChartLegend Position="SvgChartLegendPosition.Bottom" />
    <SvgChartTooltip Enabled />
</SvgRadarChart>

@code {
    private readonly SvgChartOptions options = new()
    {
        Height = 360,
        Legend = new() { Position = SvgChartLegendPosition.Bottom },
        YAxis = new() { BeginAtZero = true, Max = 100 },
    };

    private readonly SvgChartData<double?> data = new()
    {
        Labels = ["Quality", "Speed", "Cost", "Support", "Adoption"],
        Series =
        [
            new()
            {
                Name = "Current",
                Color = Color.Primary,
                Values = [82, 76, 58, 88, 72],
            },
            new()
            {
                Name = "Target",
                Color = Color.Success,
                Values = [92, 86, 70, 94, 84],
            },
        ]
    };
}

Scatter chart

Use a scatter chart to plot independent X and Y values.

<SvgScatterChart TItem="StorePerformance"
                 Items="@stores"
                 Options="@options">
    <SvgChartTitle Title='@("Store performance")' Subtitle='@("Independent X/Y values")' />
    <SvgChartTooltip Enabled />
    <SvgChartValueAxis BeginAtZero TickCount="6" />

    <SvgScatterSeries Name="Stores" XValue="@( item => item.Sales )" YValue="@( item => item.Margin )" Color="Color.Primary" MarkerRadius="5" />
</SvgScatterChart>

@code {
    private readonly SvgChartOptions options = new()
    {
        Height = 360,
        YAxis = new() { BeginAtZero = true, TickCount = 6 },
    };

    private readonly List<StorePerformance> stores =
    [
        new() { Sales = 8, Margin = 42 },
        new() { Sales = 16, Margin = 64 },
        new() { Sales = 22, Margin = 58 },
        new() { Sales = 29, Margin = 91 },
        new() { Sales = 34, Margin = 76 },
        new() { Sales = 42, Margin = 112 },
    ];

    private sealed class StorePerformance
    {
        public double Sales { get; set; }

        public double Margin { get; set; }
    }
}

Bubble chart

Use a bubble chart to plot X/Y values with an additional radius value.

<SvgBubbleChart TItem="StoreVolume"
                Items="@stores"
                Options="@options">
    <SvgChartTitle Title='@("Store volume")' Subtitle='@("X/Y values with radius from item selectors")' />
    <SvgChartTooltip Enabled />
    <SvgChartValueAxis BeginAtZero TickCount="6" />

    <SvgBubbleSeries Name="Stores" XValue="@( item => item.Sales )" YValue="@( item => item.Margin )" RadiusValue="@( item => item.Orders )" Color="Color.Info" />
</SvgBubbleChart>

@code {
    private readonly SvgChartOptions options = new()
    {
        Height = 360,
        YAxis = new() { BeginAtZero = true, TickCount = 6 },
    };

    private readonly List<StoreVolume> stores =
    [
        new() { Sales = 8, Margin = 42, Orders = 5 },
        new() { Sales = 16, Margin = 64, Orders = 9 },
        new() { Sales = 22, Margin = 58, Orders = 7 },
        new() { Sales = 29, Margin = 91, Orders = 12 },
        new() { Sales = 34, Margin = 76, Orders = 10 },
        new() { Sales = 42, Margin = 112, Orders = 14 },
    ];

    private sealed class StoreVolume
    {
        public double Sales { get; set; }

        public double Margin { get; set; }

        public double Orders { get; set; }
    }
}

Accessibility

SVG charts render the root SVG with an accessible role and label by default. Use Role, AriaLabel, AccessibilityTitle, AccessibilityDescription, and TabIndex when a chart needs custom assistive text or keyboard focus.