To me, Blazor is the coolest thing web development has seen in a while. It allows developers
to rapidly build component-based Web Applications using ASP.NET Core tooling and C#.
This made me wonder: can I build SVG files using Razor syntax and is that a good idea?
The answers are yes, absolutely and yes, definitely! I will briefly explain below but definitely check out
the code on GitHub and the result.
Using the LineChart.razor component
Using the LineChart component in a razor file is easy. From
<LineChart Values="@Values" Min="@Min" Max="@Max"/>
The Min and Max parameters define the boundaries of the Y axis
and Values is a
List<double> of data points. The component
renders an SVG file in-line.
The index file contains some code to generate random values and
modify them continuously when the ‘animate’ checkbox is ticked.
Building SVG in Razor
SVG is a vector graphics format that is based on XML. This lead
me to the idea to build SVG files with Razor syntax. The result is
which I suggest you view on GitHub.
Even if you don’t know SVG, the following Razor snippet should look familiar and is used to render the
circles for the data points.
@foreach (var (x, y) in Values.Select((value, index) => (index, value)))
<circle cx=@(Xpos(x)) cy=@(Ypos(y)) r="4" fill=@(x == _selectedPoint ? "lightblue" : "black")/>
@* Render a transparent circle with a larger radius to provide a proper hitbox *@
<circle cx=@(Xpos(x)) cy=@(Ypos(y)) r="20" fill="transparent" @onclick=@(_ => _selectedPoint = x)/>
Ypos methods convert the point data to coordinates in the SVG graphic. Note that
two circles are drawn: on line 3 we draw the actual black circle and on line 5 a slightly bigger, transparent
circle, to which we attach a Blazor
onclick event. That’s right! Blazor events work for SVG just
handle SVG. The generated HTML looks as follows:
<circle cx="50" cy="18.884763656402555" r="4" fill="black" b-dca6o0hlbn=""></circle>
<circle cx="50" cy="18.884763656402555" r="20" fill="transparent" b-dca6o0hlbn=""></circle>
Charts with seriously little code
Blazor handles a lot of the heavy lifting for us as developers. The chart will automatically redraw
when the values are changed, including the label of the currently selected data point. The entire
but I see no reason not to go full native Blazor.
The LineChart component was extracted from another project of mine, P1Dash
a simple web interface to monitor the power consumption or production for Dutch Smart Meters. That
component has some additional features so definitely check it out if you want to see more!