Skip to content

RazorKit.ChartJs

RazorKit.ChartJs is a powerful library that simplifies the integration of the Chart.js library into Razor views. With a fluent builder style, developers can effortlessly create highly functional and customizable charts.

Features

  • Fluent API: Create charts using an intuitive builder pattern.
  • Customization: Easily configure datasets, options, and advanced features.
  • Integration: Designed to work seamlessly with Chart.js.

Setup

Install the NuGet package:

dotnet add package RazorKit.ChartJs
Or via the NuGet Package Manager:
PM> Install-Package RazorKit.ChartJs

Add needed script and style links to layout: Reference:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Usage

It is easy to implement with html helper:

cshtml
@using RazorKit

@(Html.Chart("canvasId")
    .Data(d => d
        .Labels("January", "February", "March", "April", "May", "June", "July")
        .Datasets(ds => ds
            .Line()
            .Label("Line Chart")
            .Data(65, 59, 80, 81, 56, 55, 40)
        )
    )
    .Render()
)