Blazor Charts Deep Dive: Candlestick, Box Plot, Waterfall, and 30+ More Free Chart Types

When Radzen Blazor v11 shipped last month, the Spreadsheet took the spotlight. But v11 also brought the biggest charting upgrade in the history of the library: more than 30 new chart types, all free and MIT-licensed. This post is the tour we promised - what's there, how the charts work, and working examples you can paste into your app today.

And because this blog is itself a Blazor app, every chart in this post is the real component running live on this page. Hover the candles, drag to zoom, scrub the range navigator.

If you're new here: Radzen Blazor is a free, open-source library of over 145 native Blazor components. The charts are part of it.

Rendered in C#linkLink to this section

Before the gallery, one thing that makes these charts different: every chart is SVG created in C#. Axis layout, text measurement, geometry - all of it happens in .NET, so a complete, correct chart renders even under static server-side rendering. JavaScript interop only comes in to wire up mouse interactivity - tooltips, the crosshair, zoom and pan - and degrades gracefully when it isn't available.

Give the chart a fixed pixel size (width and height) and it renders entirely on the server. Leave it responsive, like the live charts on this page, and it measures its container once and draws. Either way the same RadzenChart markup works in Blazor Server, WebAssembly, and static SSR.

Financial ChartslinkLink to this section

v11 adds a full lineup for finance: candlestick, OHLC, and high-low.

A candlestick chart is a few lines of markup - bind your data and tell the series which properties hold the open, high, low, and close values. Hover a candle to see all four:

Here is everything it takes:

<RadzenChart>
    <RadzenCandlestickSeries Data="@stockData" CategoryProperty="Date"
        OpenProperty="Open" HighProperty="High" LowProperty="Low" CloseProperty="Close"
        Title="ACME Corp" BullFill="#26A69A" BearFill="#EF5350" />
    <RadzenCategoryAxis FormatString="{0:MM/dd}" />
    <RadzenValueAxis>
        <RadzenGridLines Visible="true" />
        <RadzenAxisTitle Text="Price (USD)" />
    </RadzenValueAxis>
</RadzenChart>

@code {
    class StockDataItem
    {
        public DateTime Date { get; set; }
        public double Open { get; set; }
        public double High { get; set; }
        public double Low { get; set; }
        public double Close { get; set; }
    }

    StockDataItem[] stockData = new StockDataItem[]
    {
        new StockDataItem { Date = new DateTime(2026, 1, 2), Open = 170, High = 176, Low = 169, Close = 174 },
        new StockDataItem { Date = new DateTime(2026, 1, 3), Open = 174, High = 177, Low = 172, Close = 173 },
        new StockDataItem { Date = new DateTime(2026, 1, 4), Open = 173, High = 174, Low = 168, Close = 169 },
        // ...one item per trading day
    };
}

Rising periods render with the BullFill color, falling ones with BearFill.

Add a Range NavigatorlinkLink to this section

Financial data gets long, and this is where the new range navigator comes in: a compact overview strip under the chart with draggable handles, so users scrub to the window they care about. It composes with zoom and pan - drag inside the chart to pan, scroll to zoom, and the navigator stays in sync because both bind to the same view range. Try it - this one has six months of data:

<RadzenChart AllowZoom="true" AllowPan="true" @bind-ViewStart="@start" @bind-ViewEnd="@end">
    <RadzenCandlestickSeries Data="@stockData" CategoryProperty="Date"
        OpenProperty="Open" HighProperty="High" LowProperty="Low" CloseProperty="Close"
        Title="ACME Corp" />
    <RadzenCategoryAxis FormatString="{0:MMM dd}" />
    <RadzenChartRangeNavigator Height="80" ShowHandleLabels="true"
        HandleLabelFormatString="{0:MMM dd, yyyy}">
        <RadzenRangeNavigatorLineSeries Data="@stockData"
            CategoryProperty="Date" ValueProperty="Close" />
    </RadzenChartRangeNavigator>
</RadzenChart>

@code {
    double start = 0;
    double end = 1;

    class StockDataItem
    {
        public DateTime Date { get; set; }
        public double Open { get; set; }
        public double High { get; set; }
        public double Low { get; set; }
        public double Close { get; set; }
    }

    StockDataItem[] stockData;

    protected override void OnInitialized()
    {
        // Six months of demo data - use your own in a real app.
        var random = new Random(42);
        var data = new List<StockDataItem>();
        var date = new DateTime(2026, 1, 2);
        var close = 170.0;

        while (data.Count < 126)
        {
            if (date.DayOfWeek != DayOfWeek.Saturday && date.DayOfWeek != DayOfWeek.Sunday)
            {
                var open = close;
                close = Math.Max(50, open + random.Next(-3, 4));
                var high = Math.Max(open, close) + random.Next(0, 3);
                var low = Math.Min(open, close) - random.Next(0, 3);

                data.Add(new StockDataItem { Date = date, Open = open, High = high, Low = low, Close = close });
            }

            date = date.AddDays(1);
        }

        stockData = data.ToArray();
    }
}

Business ChartslinkLink to this section

Waterfall charts show how a value builds up - the classic "revenue minus costs equals profit" walk. Mark the subtotal rows with a boolean property and the series does the rest, including the running totals:

<RadzenChart>
    <RadzenWaterfallSeries Data="@cashFlow" CategoryProperty="Label" ValueProperty="Amount"
        SummaryProperty="IsTotal" Title="Cash Flow"
        PositiveFill="#26A69A" NegativeFill="#EF5350" SummaryFill="#42A5F5" />
    <RadzenValueAxis>
        <RadzenGridLines Visible="true" />
        <RadzenAxisTitle Text="Amount ($K)" />
    </RadzenValueAxis>
</RadzenChart>

@code {
    class DataItem
    {
        public string Label { get; set; }
        public double Amount { get; set; }
        public bool IsTotal { get; set; }
    }

    DataItem[] cashFlow = new DataItem[]
    {
        new DataItem { Label = "Revenue", Amount = 420 },
        new DataItem { Label = "Services", Amount = 210 },
        new DataItem { Label = "COGS", Amount = -170 },
        new DataItem { Label = "Gross Profit", IsTotal = true },
        new DataItem { Label = "Salaries", Amount = -200 },
        new DataItem { Label = "Marketing", Amount = -80 },
        new DataItem { Label = "Net", IsTotal = true },
    };
}

There's a horizontal variant too. Alongside waterfall, v11 adds funnel and pyramid for pipelines and stage conversion, bullet for actual-vs-target KPIs, treemap for hierarchical proportions, and range series - range column, range bar, and range area - for anything with a min and a max per category.

Statistical ChartslinkLink to this section

For analytics, v11 brings box plot, histogram, pareto, heatmap, and contour - that last one a chart type you will rarely find in a UI library at all.

A box plot condenses a whole distribution into the five-number summary - whiskers, quartiles, and median - with an optional mean marker. Bind one property per statistic and hover a box to read them all:

<RadzenChart>
    <RadzenBoxPlotSeries Data="@temperatures" CategoryProperty="Month"
        LowerWhiskerProperty="Min" LowerQuartileProperty="Q1"
        MedianProperty="Median" UpperQuartileProperty="Q3"
        UpperWhiskerProperty="Max" MeanProperty="Mean"
        Title="Temperature" ShowMean="true" />
    <RadzenCategoryAxis>
        <RadzenAxisCrosshair Visible="true" Snap="true" />
    </RadzenCategoryAxis>
    <RadzenValueAxis>
        <RadzenGridLines Visible="true" />
        <RadzenAxisTitle Text="Temperature (°C)" />
    </RadzenValueAxis>
</RadzenChart>

@code {
    class TemperatureStats
    {
        public string Month { get; set; }
        public double Min { get; set; }
        public double Q1 { get; set; }
        public double Median { get; set; }
        public double Q3 { get; set; }
        public double Max { get; set; }
        public double Mean { get; set; }
    }

    TemperatureStats[] temperatures = new TemperatureStats[]
    {
        new TemperatureStats { Month = "Jan", Min = -5, Q1 = -1, Median = 2,  Q3 = 5,  Max = 10, Mean = 2 },
        new TemperatureStats { Month = "Feb", Min = -3, Q1 = 0,  Median = 3,  Q3 = 7,  Max = 12, Mean = 4 },
        new TemperatureStats { Month = "Mar", Min = 1,  Q1 = 5,  Median = 9,  Q3 = 13, Max = 18, Mean = 9 },
        new TemperatureStats { Month = "Apr", Min = 5,  Q1 = 9,  Median = 13, Q3 = 17, Max = 22, Mean = 13 },
        new TemperatureStats { Month = "May", Min = 10, Q1 = 14, Median = 18, Q3 = 22, Max = 28, Mean = 18 },
        new TemperatureStats { Month = "Jun", Min = 15, Q1 = 19, Median = 23, Q3 = 27, Max = 33, Mean = 23 },
        new TemperatureStats { Month = "Jul", Min = 18, Q1 = 22, Median = 26, Q3 = 30, Max = 36, Mean = 26 },
        new TemperatureStats { Month = "Aug", Min = 17, Q1 = 21, Median = 25, Q3 = 29, Max = 35, Mean = 25 },
        new TemperatureStats { Month = "Sep", Min = 12, Q1 = 16, Median = 20, Q3 = 24, Max = 30, Mean = 21 },
        new TemperatureStats { Month = "Oct", Min = 6,  Q1 = 10, Median = 14, Q3 = 18, Max = 23, Mean = 14 },
        new TemperatureStats { Month = "Nov", Min = 1,  Q1 = 4,  Median = 8,  Q3 = 12, Max = 17, Mean = 8 },
        new TemperatureStats { Month = "Dec", Min = -4, Q1 = 0,  Median = 3,  Q3 = 6,  Max = 11, Mean = 3 },
    };
}

More Chart FeatureslinkLink to this section

The series types are only half the story. Every chart in the library also gets:

• Zoom and pan with two-way bindable view ranges
• A crosshair, tooltips, and redesigned data labels that stay readable over any fill
• Trendlines - linear trend, moving average, polynomial of any degree - plus reference lines and bands
• Logarithmic, multiple, crossing, and inverted axes
• Drill-down via series click events, and synchronized charts that share hover and zoom state
• Annotations and line interpolation

And beyond the new series, the dataviz family includes gauges, sparklines, polar and radar layouts, and a Sankey diagram.

Try ThemlinkLink to this section

Every chart type has a live demo with full source - the fastest way to see what fits your data is to browse the gallery and click through.

All of it ships in the Radzen.Blazor NuGet package you already have. Update to v11, and the charts are there - free and MIT-licensed.

Explore all chart demos →