Charts — Blazify

Bar — multiple series

Each BzChartSeries takes a label and an array of numbers. Add several to compare them side by side.

Quarterly sales

2024 2023

razor

@using BzCore.Components.Chart
@using BzCore.Enums

<BzChart Type="BzChartType.Bar"
         Title="فروش فصلی"
         Labels="_quarters"
         Series="_series"
         ShowValues="true" />

@code {
    private readonly List<string> _quarters = new() { "Q1", "Q2", "Q3", "Q4" };

    // BzChartSeries(label, values, color?)
    private List<BzChartSeries> _series = new()
    {
        new("2024", new double[] { 120, 200, 150, 280 }),
        new("2023", new double[] { 90, 160, 130, 210 }),
    };
}

Line and area

These two differ only in Type — the rest of the code is identical.

Visits trend

Visits

Revenue

razor

@using BzCore.Components.Chart
@using BzCore.Enums

@* Only Type differs between these two. *@
<BzChart Type="BzChartType.Line" Title="روند بازدید" Labels="_months" Series="_line" />
<BzChart Type="BzChartType.Area" Title="درآمد"      Labels="_months" Series="_area" />

@code {
    private readonly List<string> _months = new() { "1", "2", "3", "4", "5", "6" };

    private List<BzChartSeries> _line = new() { new("Visits",  new double[] { 8, 14, 11, 20, 17, 25 }) };
    private List<BzChartSeries> _area = new() { new("Revenue", new double[] { 12, 19, 15, 28, 24, 33 }) };
}

Pie and donut

For share charts, pass a single series and use Labels for the slice names. Again, only Type changes.

Market share

A B C D

Traffic

A B C D

razor

@using BzCore.Components.Chart
@using BzCore.Enums

@* Share charts take one series; Labels names each slice. *@
<BzChart Type="BzChartType.Pie"   Title="سهم بازار" Labels="_shares" Series="_data" ShowValues="true" />
<BzChart Type="BzChartType.Donut" Title="ترافیک"    Labels="_shares" Series="_data" ShowValues="true" />

@code {
    private readonly List<string> _shares = new() { "A", "B", "C", "D" };
    private List<BzChartSeries> _data = new() { new("", new double[] { 62, 18, 12, 8 }) };
}

Sparkline

A tiny, chrome-free chart, meant to sit inside a card or a table row.

Parameter	Description
`Type`	`Bar` / `Line` / `Area` / `Pie` / `Donut` / `Sparkline`
`Series`	`List<BzChartSeries>` — label, numbers and an optional colour
`Labels`	X-axis labels, or slice names
`Title`	A title above the chart
`ShowValues`	Print values on the chart
`ShowLegend`	Show the colour legend
`Height`	The chart height

razor

@using BzCore.Components.Chart
@using BzCore.Components.Button
@using BzCore.Enums

<BzChart Type="BzChartType.Sparkline" Height="60px" ShowLegend="false" Series="_spark" />

<BzButton Size="BzSize.Small" Text="دیتا تصادفی" OnClick="Randomize" />

@code {
    private readonly Random _rng = new();

    private List<BzChartSeries> _spark = new()
    {
        new("", new double[] { 5, 8, 6, 10, 7, 12, 9, 14 })
    };

    private void Randomize()
    {
        _spark = new()
        {
            new("", Enumerable.Range(0, 10).Select(_ => (double)_rng.Next(3, 20)).ToList())
        };
    }
}