ChartsKit.Blazor 1.0.8

.NET 9.0 This package targets .NET 9.0. The package is compatible with this framework or higher. 
dotnet add package ChartsKit.Blazor --version 1.0.8
                    


                    

                
NuGet\Install-Package ChartsKit.Blazor -Version 1.0.8
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package. 
<PackageReference Include="ChartsKit.Blazor" Version="1.0.8" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
<PackageVersion Include="ChartsKit.Blazor" Version="1.0.8" />
                    


                            Directory.Packages.props
                        

                    

                
<PackageReference Include="ChartsKit.Blazor" />
                    


                            Project file
For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package. 
paket add ChartsKit.Blazor --version 1.0.8
                    


                    

                
#r "nuget: ChartsKit.Blazor, 1.0.8"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package. 
#:package ChartsKit.Blazor@1.0.8
#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package. 
#addin nuget:?package=ChartsKit.Blazor&version=1.0.8
                    


                            Install as a Cake Addin
                        

                    

                
#tool nuget:?package=ChartsKit.Blazor&version=1.0.8
                    


                            Install as a Cake Tool

ChartsKit.Blazor

Version: 1.0.8
Author: Shimon Hirari

ChartsKit is a powerful and straightforward .NET 9 charting library for Blazor applications. It acts as a lightweight C# wrapper for the popular ECharts library, allowing developers to create a vast array of beautiful, interactive charts using simple C# models and builders.

The core design philosophy is to provide strongly-typed helpers that generate the required chart options, while giving you the flexibility to customize the output. This approach combines the safety of C# with the full power of the underlying ECharts library.

Features

  • Comprehensive Chart Collection: Over 20 chart types supported, including Bar, Line, Pie, Scatter, Gauge, Funnel, Radar, BoxPlot, Treemap, Candlestick, Heatmap, Sankey, Tree, Sunburst, and more.
  • Simple C# Wrapper API: Generate complex chart configurations with simple C# method calls, minimizing the need to write raw JSON.
  • Flexible & Extensible: Because the builders return a standard object, you can easily modify the chart options before rendering to include any custom configuration ECharts supports.
  • Theming Support: Easily switch between "light" and "dark" modes, or register your own custom ECharts themes.
  • Image Export: Export any chart to a PNG or SVG data URL with a single asynchronous method call.
  • Strongly-Typed Models: Reduce runtime errors with a clear set of C# record types for all chart data, enabling compile-time safety and IntelliSense.
  • Offline First: All required JavaScript assets are bundled with the library, requiring no external CDN links for core functionality.

Installation and Setup

1. Install NuGet Package

dotnet add package ChartsKit.Blazor

2. Register Services
In your Program.cs, register the ThemeState service.

// In Program.cs
builder.Services.AddScoped<ChartsKit.Core.Theming.ThemeState>();

3. Include JavaScript Assets
Add the following <script> tags at the end of the <body> section in your _Layout.cshtml or App.razor. Include the map scripts if you plan to use map charts.


<script src="_content/ChartsKit.Blazor/js/echarts.min.js"></script>
<script src="_content/ChartsKit.Blazor/js/interop.js"></script>


<script src="_content/ChartsKit.Blazor/js/world.js"></script>
<script src="_content/ChartsKit.Blazor/js/africa.js"></script>
<script src="_content/ChartsKit.Blazor/js/asia.js"></script>
<script src="_content/ChartsKit.Blazor/js/europe.js"></script>
<script src="_content/ChartsKit.Blazor/js/north-america.js"></script>
<script src="_content/ChartsKit.Blazor/js/oceania.js"></script>
<script src="_content/ChartsKit.Blazor/js/south-america.js"></script>

Quick Start: Your First Chart
The ChartView component is the heart of the library. Simply pass it an Options object generated by one of the builders.

@page "/my-first-chart"
@rendermode InteractiveServer

@using ChartsKit.Blazor
@using ChartsKit.Core.Builders
@using ChartsKit.Core.Models

<h3>My First Bar Chart</h3>

<div style="height: 400px; width: 100%;">
    <ChartView Options="@_chartOptions" />
</div>

@code {
    private object? _chartOptions;

    protected override void OnInitialized()
    {
        var barChartBuilder = new BarChartBuilder();

        var myData = new CategoryData[]
        {
            new("Apples", 50),
            new("Oranges", 75),
            new("Bananas", 120)
        };

        _chartOptions = barChartBuilder.Build(myData, seriesName: "Fruit Sales");
    }
}

Chart Reference and Examples
Here is a reference for all available charts, their required data models, and a basic usage example.

Area / Line / Bar / Horizontal Bar

Builder: AreaChartBuilder, LineChartBuilder, BarChartBuilder, HorizontalBarBuilder

Data Model: IEnumerable<CategoryData>

Example: ```csharp
var myData = new CategoryData[]
{
new("Mon", 120),
new("Tue", 200),
new("Wed", 150)
};
_chartOptions = new BarChartBuilder().Build(myData, seriesName: "Daily Sales");


**BoxPlot**
- **Builder:** `BoxPlotChartBuilder`
- **Data Model:** `IEnumerable<BoxPlotData>`
- **Example:** ```csharp
var myData = new BoxPlotData[]
{
    new("A", new double[] { 655, 850, 940, 980, 1070 }),
    new("B", new double[] { 760, 800, 845, 885, 960 })
};
_chartOptions = new BoxPlotChartBuilder().Build(myData);

Calendar Heatmap

Builder: CalendarHeatBuilder

Data Model: CalendarHeatData

Example: ```csharp
var myData = new CalendarHeatData(
Year: "2025",
DataPoints: new List<object[]>
{
new object[] { "2025-01-22", 125 },
new object[] { "2025-03-15", 450 },
new object[] { "2025-07-01", 980 }
}
);
_chartOptions = new CalendarHeatBuilder().Build(myData);


**Candlestick**
- **Builder:** `CandlestickChartBuilder`
- **Data Model:** `IEnumerable<CandlestickData>`
- **Example:** ```csharp
var myData = new CandlestickData[]
{
    // Format: Date, [Open, Close, Low, High]
    new("2025-01-01", new double[] { 20, 34, 10, 38 }),
    new("2025-01-02", new double[] { 34, 35, 30, 40 }),
    new("2025-01-03", new double[] { 35, 45, 32, 48 })
};
_chartOptions = new CandlestickChartBuilder().Build(myData);

Funnel

Builder: FunnelChartBuilder

Data Model: IEnumerable<FunnelData>

Example: ```csharp
var myData = new FunnelData[]
{
new("Impressions", 100),
new("Clicks", 80),
new("Orders", 20)
};
_chartOptions = new FunnelChartBuilder().Build(myData);


**Gantt (Simulated)**
- **Builder:** `GanttChartBuilder`
- **Data Model:** `IEnumerable<GanttTask>`
- **Example:** ```csharp
var myData = new GanttTask[]
{
    new("Task 1", 1, 5), // TaskName, StartDay, EndDay
    new("Task 2", 3, 8),
    new("Task 3", 6, 12)
};
_chartOptions = new GanttChartBuilder().Build(myData);

Gauge

Builder: GaugeChartBuilder

Data Model: GaugeData

Example: ```csharp
var myData = new GaugeData("Completion", 75.5);
_chartOptions = new GaugeChartBuilder().Build(myData);


**Heatmap**
- **Builder:** `HeatmapChartBuilder`
- **Data Model:** `HeatmapData`
- **Example:** ```csharp
var myData = new HeatmapData(
    XAxisLabels: new[] { "12a", "1a", "2a" },
    YAxisLabels: new[] { "Mon", "Tue", "Wed" },
    DataPoints: new List<object>
    {
        new object[] { 0, 0, 5 }, // [x-index, y-index, value]
        new object[] { 1, 1, 8 },
        new object[] { 2, 2, 3 }
    }
);
_chartOptions = new HeatmapChartBuilder().Build(myData);

Map

Builder: MapChartBuilder

Data Model: IEnumerable<MapData>

Example: ```csharp
var myData = new MapData[]
{
new("Brazil", 100),
new("United States", 200),
new("China", 150)
};
_chartOptions = new MapChartBuilder().Build(myData, "Sales", "world");


**Multi-Line**
- **Builder:** `MultiLineChartBuilder`
- **Data Model:** `MultiLineData`
- **Example:** ```csharp
var myData = new MultiLineData(
    Categories: new[] { "Jan", "Feb", "Mar" },
    Series: new List<NamedSeries>
    {
        new("Product A", new List<CategoryData> { new("Jan", 120), new("Feb", 132), new("Mar", 101) }),
        new("Product B", new List<CategoryData> { new("Jan", 220), new("Feb", 182), new("Mar", 191) })
    }
);
_chartOptions = new MultiLineChartBuilder().Build(myData);

Parallel

Builder: ParallelChartBuilder

Data Model: ParallelData

Example: ```csharp
var myData = new ParallelData(
Schema: new List<ParallelAxis>
{
new() { Dim = 0, Name = "Price" },
new() { Dim = 1, Name = "Sales" },
new() { Dim = 2, Name = "Rating" }
},
Data: new List<object>
{
new object[] { 12.99, 100, 4.5 },
new object[] { 25.50, 80, 4.8 },
new object[] { 19.99, 120, 4.2 }
}
);
_chartOptions = new ParallelChartBuilder().Build(myData);


**Pie / Doughnut**
- **Builder:** `PieChartBuilder`
- **Data Model:** `IEnumerable<PieData>`
- **Example:** ```csharp
var myData = new PieData[]
{
    new("Direct", 335),
    new("Email", 310),
    new("Ad", 234)
};
// For a Doughnut chart, set isDoughnut: true
_chartOptions = new PieChartBuilder().Build(myData, isDoughnut: false);

Radar

Builder: RadarChartBuilder

Data Models: List<RadarIndicator>, List<RadarSeriesData>

Example: ```csharp
var indicators = new List<RadarIndicator>
{
new("Sales", 6500), new("Admin", 16000), new("Tech", 30000)
};
var seriesData = new List<RadarSeriesData>
{
new("Budget", new List<double> { 4200, 3000, 20000 }),
new("Spending", new List<double> { 5000, 14000, 28000 })
};
_chartOptions = new RadarChartBuilder().Build(indicators, seriesData);


**Sankey**
- **Builder:** `SankeyChartBuilder`
- **Data Model:** `SankeyData`
- **Example:** ```csharp
var myData = new SankeyData(
    Nodes: new List<SankeyNode> { new("Source A"), new("Source B"), new("Target C") },
    Links: new List<SankeyLink> { new("Source A", "Target C", 5), new("Source B", "Target C", 3) }
);
_chartOptions = new SankeyChartBuilder().Build(myData);

Scatter

Builder: ScatterChartBuilder

Data Model: IEnumerable<ScatterData>

Example: ```csharp
var myData = new ScatterData[]
{
new(10, 8.04), new(8, 6.95), new(13, 7.58)
};
_chartOptions = new ScatterChartBuilder().Build(myData, "Data Points");


**Sunburst**
- **Builder:** `SunburstChartBuilder`
- **Data Model:** `List<SunburstNode>`
- **Example:** ```csharp
var myData = new List<SunburstNode>
{
    new() { Name = "A", Children = new List<SunburstNode> {
        new() { Name = "A1", Value = 5 },
        new() { Name = "A2", Value = 3 }
    }},
    new() { Name = "B", Value = 4 }
};
_chartOptions = new SunburstChartBuilder().Build(myData);

Tree

Builder: TreeChartBuilder

Data Model: List<TreeNode>

Example: ```csharp
var myData = new List<TreeNode>
{
new() { Name = "A", Children = new List<TreeNode> {
new() { Name = "B" },
new() { Name = "C", Children = new List<TreeNode> { new() { Name = "C1" } }}
}}
};
_chartOptions = new TreeChartBuilder().Build(myData);


**Treemap**
- **Builder:** `TreemapChartBuilder`
- **Data Model:** `List<TreemapNode>`
- **Example:** ```csharp
var myData = new List<TreemapNode>
{
    new() { Name = "Laptops", Value = 10 },
    new() { Name = "Phones", Value = 8 },
    new() { Name = "Accessories", Value = 6 }
};
_chartOptions = new TreemapChartBuilder().Build(myData);
Product Compatible and additional computed target framework versions.
.NET net9.0 is compatible.  net9.0-android was computed.  net9.0-browser was computed.  net9.0-ios was computed.  net9.0-maccatalyst was computed.  net9.0-macos was computed.  net9.0-tvos was computed.  net9.0-windows was computed.  net10.0 was computed.  net10.0-android was computed.  net10.0-browser was computed.  net10.0-ios was computed.  net10.0-maccatalyst was computed.  net10.0-macos was computed.  net10.0-tvos was computed.  net10.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last Updated
1.0.8 161 7/2/2025
1.0.7 144 7/1/2025
1.0.6 150 7/1/2025
1.0.5 155 7/1/2025
1.0.4 149 7/1/2025
1.0.3 144 6/30/2025
1.0.2 147 6/30/2025
1.0.1 146 6/30/2025
1.0.0 147 6/30/2025