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

Sparkline Charts for Blazor using Fonts
https://github.com/Misfits-Rebels-Outcasts/Blazor-Sparkline

blazor sparkline webassembly

Last synced: 10 days ago
JSON representation

Sparkline Charts for Blazor using Fonts

• Host: GitHub
• URL: https://github.com/Misfits-Rebels-Outcasts/Blazor-Sparkline
• Owner: Misfits-Rebels-Outcasts
• License: mit
• Created: 2020-03-17T06:16:31.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2022-12-29T15:31:28.000Z (almost 2 years ago)
• Last Synced: 2024-10-12T19:43:50.948Z (27 days ago)
• Topics: blazor, sparkline, webassembly
• Language: C#
• Homepage: https://www.webassemblyman.com/blazor/blazorsparklines.html
• Size: 160 KB
• Stars: 27
• Watchers: 9
• Forks: 10
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-blazor - Blazor-Sparkline -  Sparkline Charts for Blazor using Fonts. (Libraries & Extensions / 2D/3D Rendering engines)

README

        
# Blazor-Sparkline

Sparkline Charts for Blazor using Fonts

Open Source Sparkline Charts for Blazor and WebAssembly. It uses C#, HTML and CSS with minimal Javascript dependencies. 





   


Sparklines are typically used to display summary information and they commonly appear in multiple rows of a HTML table. 

This component uses Open Type Fonts and does not require a SVG or Canvas element. The font is downloaded once and then used to display the Sparkline charts multiple times.

The current font uses dots to draw each segment of the Sparkline and is useful when you have many data points. The width of each segment can be specified by using the SegmentWidth parameter. A bigger SegmentWidth results in a longer Sparkline. It also means more data characters (dots) need to be generated to display the Sparkline using the font. Additional fonts will be added to support specific SegmentWidth instead of just a dot. This enables the the reduction of data characters generated.

#elegantlysimple

v0.2

[![MIT Licence](https://www.webassemblyman.com/images/mitlicense.png)](https://www.webassemblyman.com/MITLicense.txt)

### To use Sparkline

1. Create your Blazor project.

2. In YourProject.csproj, add

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

3. In index.html, add

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

4. Finally, in Pages->Index.razor, add

<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>

### To use Column Bars

1. Create your Blazor project.

2. In YourProject.csproj, add

<ProjectReference Include="../Blazor-Sparkline/ColumnBars/ColumnBars.csproj" />

3. In index.html, add

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

4. Finally, in Pages->Index.razor, add

<ColumnBars InputData="221,330,111,114,140,158,206,249,262,266,285,340,428,81,206,249,262,440,158,206,249,262,266,285,340,428" GenerateText="true" ></ColumnBars>

Similary

### To use Bullet Chart

<ProjectReference Include="../Blazor-Sparkline/BulletBars/BulletBars.csproj" />

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

<BulletBars InputData="26,40,95,100" Actual="49" Target="53"  GenerateText="true">
</BulletBars>

### To use MiniPie

<ProjectReference Include="../Blazor-Sparkline/MiniPie/MiniPie.csproj" />

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

<MiniPie InputData="26,40,95,100" GenerateText="true">
</MiniPie>

### To use Win Loss Draw

<ProjectReference Include="../Blazor-Sparkline/WinLoss/WinLoss.csproj" />

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

<WinLoss InputData="1,1,1,-1,1,1,1,0,1,-1,1,1,1,1,1,0,1,-1,1,1,1,1,0,0,0,1,1,1,0,1,1,-1,1,1,1,1" GenerateText="true">
</WinLoss>

Alternatively, check out our [Misfits-Rebels-Outcasts/Blazor-Dashboard](https://github.com/Misfits-Rebels-Outcasts/Blazor-Dashboard) project on how to use this Blazor Sparkline component.