Blazor Sparklines

Man(ual) page for WebAssembly

Home
Blazor

Blazor Sparklines

Sparklines are used in data intense dashboard to display summary information or trends. They commonly appear in a table or as part of a text paragraph. This unique project uses True Type Sparkline Fonts to render many disfferent types of sparklines and does not require a SVG or Canvas element. The sparkline font is downloaded once and used to display the Sparkline charts in a table or text paragraph multiple times.

Type of Sparkline Charts

Sparklines
Column Bars
Bullet Bars
Win Lose Draw
Mini Pie
Bar Graphs

Source Code

GitHub - Blazor Sparklines

How to build and use the sparklines?

Using the dotnet CLI, create a new Blazor project

dotnet new blazorwasm -o BlazorProject

Clone the Blazor Sparklines Library

git clone https://github.com/Misfits-Rebels-Outcasts/Blazor-Sparkline.git

Add a reference from the BlazorProject to the specific Blazor Sparklines Library. Go to the BlazorProject folder, edit the BlazorProject.csproj and add in the following:



<Project...> 
.
.
.
<ItemGroup>
    <ProjectReference Include="../Blazor-Sparkline/Sparklines/Sparklines.csproj" />

</ItemGroup>
</Project>

If you are using other sparkline charts such as the Column Bars, change the above to "../Blazor-Sparkline/ColumnBars/ColumnBars.csproj".

Edit Index.razor in the Pages folder of the BlazorProject


@using WebAssemblyMan

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<Sparkline InputData="60,0,16,25,48,45,1,0,6,37,78,79,90,90,91,99,80,0,40,0,0,56" 
              GenerateText="true" SegmentWidth="30">
</Sparkline>

<SurveyPrompt Title="How is Blazor working for you?" />

@using enables us to use the Blazor Sparklines library within our project. <Sparkline> is the tag where we declare our use of the sparkline component. If you are using other charts such as the Column Bars, change the above to "<ColumnBars InputData="50,30,20" ...><ColumnBars>".

Edit index.html to include the Sparkline Stylesheet.


<!DOCTYPE html>
<html>

<head>
    .
    .
    .
    <link href="_content/Sparklines/styles.css" rel="stylesheet" />
<head>

<body>
.
.
.
</body>

</html>

If you are using other sparklines such as the Column Bars, change the above to "<link href="_content/ColumnBars/styles.css" rel="stylesheet" />".

Run the BlazorProject

dotnet run

You should see a web page with the Sparkline Chart.