Data Visualization in Blazor

In this lesson, you will learn how to render dynamic, interactive data visualizations by mapping C# data structures directly to SVG elements within your Blazor components.

From Data to Pixels

While many developers reach for third-party JavaScript libraries, Blazor’s rendering engine allows you to build lightweight, performant visualizations using native SVG (Scalable Vector Graphics). Because SVG is just XML-based markup, you can use standard Razor syntax to transform your C# objects into visual shapes.

The core pattern involves calculating your visual coordinates (the "viewbox") based on your data set, then using a @foreach loop to inject those values into SVG tags like <rect>, <circle>, or <path>.

Implementation Example

Imagine we want to render a simple bar chart from a list of DataPoint objects. Instead of calling a JS function, we map our data directly in the Razor markup:

<svg width="400" height="200">
    @foreach (var item in DataPoints)
    {
        <rect x="@(GetX(item))" 
              y="@(200 - item.Value)" 
              width="30" 
              height="@item.Value" 
              fill="steelblue"
              @onclick="() => HandleClick(item)" />
    }
</svg>

@code {
    [Parameter] public List<DataPoint> DataPoints { get; set; }
    
    // Logic to calculate layout based on data structure
    private int GetX(DataPoint p) => DataPoints.IndexOf(p) * 40;
    
    private void HandleClick(DataPoint p) => Console.WriteLine($"Selected: {p.Value}");
}

Why This Matters

By rendering directly from C#, you keep your visualization logic in the same language as your business logic. Because Blazor uses a diffing algorithm, if your DataPoints collection changes (perhaps via a WebSocket update from your server), Blazor automatically updates only the specific SVG elements that changed. This gives you high-performance, reactive visualizations without the overhead of maintaining a bridge to an external graphing library.

For more complex scenarios—such as high-frequency updates—you might pivot to the HTML5 <canvas> element. In that case, you would use IJSRuntime to pass your C# data as a structured array, allowing the browser to handle the raster-based drawing operations while you maintain the underlying state in C#.

Key Takeaway: By binding SVG attributes directly to your C# data properties using Razor syntax, you create efficient, interactive visualizations that leverage Blazor’s reactive rendering engine.