Charts control - mkArtak/LittleBlazors GitHub Wiki

The LittleBlazors.Components.Charts library is a wrapper around the Google Charts library, to make it simple for Blazor developers to use charts in their Blazor apps. At the moment, only the Pie Chart and Line Chart are supported, which you can use as follows in your applications/components:

Line Chart usage sample

@using LittleBlazors.Components.Charts.Model.LineChartModel;

@{
    var data = new LinearChartData() { Title = "Sample chart" }
           .SetBaseLine("x", new double[] { 12, 13, 14, 15, 73 })
           .AddLine("y", new double[] { 34, 35, 1, 34, 63 })
           .AddLine("count", new double[] { 43, 23, 45, 1, 93 });
}

<h1>LineChart sample</h1>

<LittleBlazors.Components.Charts.LineChart Data="data" />

This will result in the following chart: Line chart sample

You can experiment with the Line-Chart more using the LittleBlazors.TestHost project, which has a page which essentially simulates this:

Pie Chart usage sample

@{
    var data1 = new Dictionary<string, double>() { { "hi", 1.0 }, { "bye", 23 } };
}

<LittleBlazors.Components.Charts.PieChart Data="data1" />

And you'll get the following chart for this one: Pie Chart

⚠️ **GitHub.com Fallback** ⚠️