Blazorise Chart component

Simple yet flexible charting for designers & developers.

The chart extension is defined of several different chart components. Each of the chart type have it’s own dataset and option settings.

Supported charts types are:

  • Chart default chart components, should be used only for testing(see warning)
  • LineChart
  • BarChart
  • PieChart
  • PolarAreaChart
  • DoughnutChart
  • RadarChart

Installation

NuGet

Install chart extension from NuGet. 
Install-Package Blazorise.Charts

Imports

In your main _Imports.razor add: 
@using Blazorise.Charts

Static Files

Add ChartsJS and charts.js to your index.html or _Layout.cshtml / _Host.cshtml file, depending if you’re using a Blazor WebAssembly or Blazor Server side project. 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>

Example

You should always define TItem data type. 
<Button Color="Color.Primary" Clicked="@(async () => await HandleRedraw())">Redraw</Button>

<LineChart @ref="lineChart" TItem="double" />

@code{
    LineChart<double> lineChart;

    protected override async Task OnAfterRenderAsync( bool firstRender )
    {
        if ( firstRender )
        {
            await HandleRedraw();
        }
    }

    async Task HandleRedraw()
    {
        await lineChart.Clear();

        await lineChart.AddLabelsDatasetsAndUpdate( Labels, GetLineChartDataset() );
    }

    LineChartDataset<double> GetLineChartDataset()
    {
        return new LineChartDataset<double>
        {
            Label = "# of randoms",
            Data = RandomizeData(),
            BackgroundColor = backgroundColors,
            BorderColor = borderColors,
            Fill = true,
            PointRadius = 3,
            CubicInterpolationMode = "monotone",
        };
    }

    string[] Labels = { "Red", "Blue", "Yellow", "Green", "Purple", "Orange" };
    List<string> backgroundColors = new List<string> { ChartColor.FromRgba( 255, 99, 132, 0.2f ), ChartColor.FromRgba( 54, 162, 235, 0.2f ), ChartColor.FromRgba( 255, 206, 86, 0.2f ), ChartColor.FromRgba( 75, 192, 192, 0.2f ), ChartColor.FromRgba( 153, 102, 255, 0.2f ), ChartColor.FromRgba( 255, 159, 64, 0.2f ) };
    List<string> borderColors = new List<string> { ChartColor.FromRgba( 255, 99, 132, 1f ), ChartColor.FromRgba( 54, 162, 235, 1f ), ChartColor.FromRgba( 255, 206, 86, 1f ), ChartColor.FromRgba( 75, 192, 192, 1f ), ChartColor.FromRgba( 153, 102, 255, 1f ), ChartColor.FromRgba( 255, 159, 64, 1f ) };

    List<double> RandomizeData()
    {
        var r = new Random( DateTime.Now.Millisecond );

        return new List<double> { 
            r.Next( 3, 50 ) * r.NextDouble(),
            r.Next( 3, 50 ) * r.NextDouble(),
            r.Next( 3, 50 ) * r.NextDouble(),
            r.Next( 3, 50 ) * r.NextDouble(),
            r.Next( 3, 50 ) * r.NextDouble(),
            r.Next( 3, 50 ) * r.NextDouble() };
    }
}

Events

It is possible to use Clicked and Hovered events to interact with chart. The usage is pretty straightforward. The only thing to keep in mind is the Model field that needs to be casted to the right chart-model type. The available model types are:
  • LineChartModel
  • BarChartModel
  • DoughnutChartModel
  • PieChartModel
  • PolarChartModel
  • RadarChartModel
<Chart @ref="barChart" Type="ChartType.Bar" TItem="double" Clicked="@OnClicked" />

@code {
    Chart<double> barChart;

    protected override async Task OnAfterRenderAsync( bool firstRender )
    {
        if ( firstRender )
        {
            await HandleRedraw();
        }
    }

    async Task HandleRedraw()
    {
        await barChart.Clear();

        await barChart.AddLabelsDatasetsAndUpdate( Labels, GetBarChartDataset() );
    }

    private BarChartDataset<double> GetBarChartDataset()
    {
        return new()
            {
                Label = "# of randoms",
                Data = RandomizeData(),
                BackgroundColor = backgroundColors,
                BorderColor = borderColors,
                BorderWidth = 1
            };
    }

    string[] Labels = { "Red", "Blue", "Yellow", "Green", "Purple", "Orange" };
    List<string> backgroundColors = new List<string> { ChartColor.FromRgba( 255, 99, 132, 0.2f ), ChartColor.FromRgba( 54, 162, 235, 0.2f ), ChartColor.FromRgba( 255, 206, 86, 0.2f ), ChartColor.FromRgba( 75, 192, 192, 0.2f ), ChartColor.FromRgba( 153, 102, 255, 0.2f ), ChartColor.FromRgba( 255, 159, 64, 0.2f ) };
    List<string> borderColors = new List<string> { ChartColor.FromRgba( 255, 99, 132, 1f ), ChartColor.FromRgba( 54, 162, 235, 1f ), ChartColor.FromRgba( 255, 206, 86, 1f ), ChartColor.FromRgba( 75, 192, 192, 1f ), ChartColor.FromRgba( 153, 102, 255, 1f ), ChartColor.FromRgba( 255, 159, 64, 1f ) };

    List<double> RandomizeData()
    {
        var r = new Random( DateTime.Now.Millisecond );

        return new List<double> {
            r.Next( 3, 50 ) * r.NextDouble(),
            r.Next( 3, 50 ) * r.NextDouble(),
            r.Next( 3, 50 ) * r.NextDouble(),
            r.Next( 3, 50 ) * r.NextDouble(),
            r.Next( 3, 50 ) * r.NextDouble(),
            r.Next( 3, 50 ) * r.NextDouble() };
    }

    Task OnClicked( ChartMouseEventArgs e )
    {
        var model = e.Model as BarChartModel;

        Console.WriteLine( $"Handling event for {nameof( BarChartModel )}: x:{model.X} y:{model.Y}" );
        return Task.CompletedTask;
    }
}

Complex Data

We also support the usage complex-type as chart data. To represent the complex-type inside of the charts you need to define the Parsing options. 

<LineChart @ref="lineChart" TItem="WatcherEvent" Options="@lineChartOptions" />

@code {
    private LineChart<WatcherEvent> lineChart;

    LineChartOptions lineChartOptions = new()
    {
        Parsing = new ChartParsing
        {
            XAxisKey = "sector",
            YAxisKey = "count",
        }
    };

    private List<string> backgroundColors = new() { ChartColor.FromRgba( 255, 99, 132, 0.2f ), ChartColor.FromRgba( 54, 162, 235, 0.2f ), ChartColor.FromRgba( 255, 206, 86, 0.2f ), ChartColor.FromRgba( 75, 192, 192, 0.2f ), ChartColor.FromRgba( 153, 102, 255, 0.2f ), ChartColor.FromRgba( 255, 159, 64, 0.2f ) };
    private List<string> borderColors = new() { ChartColor.FromRgba( 255, 99, 132, 1f ), ChartColor.FromRgba( 54, 162, 235, 1f ), ChartColor.FromRgba( 255, 206, 86, 1f ), ChartColor.FromRgba( 75, 192, 192, 1f ), ChartColor.FromRgba( 153, 102, 255, 1f ), ChartColor.FromRgba( 255, 159, 64, 1f ) };

    private bool isAlreadyInitialised;

    public class WatcherEvent
    {
        public string Sector { get; set; }

        public int Count { get; set; }

        public DateTime Date { get; } = DateTime.Now;
    }

    protected override async Task OnAfterRenderAsync( bool firstRender )
    {
        if ( !isAlreadyInitialised )
        {
            isAlreadyInitialised = true;

            await lineChart.Clear();
            await lineChart.AddDataSet( GetLineChartDataset() );
        }
    }

    private LineChartDataset<WatcherEvent> GetLineChartDataset()
    {
        return new()
        {
            Label = "# of randoms",
            Data = new List<WatcherEvent>
            {
                new WatcherEvent { Sector = "A", Count = 1400 },
                new WatcherEvent { Sector = "B", Count = 900 },
                new WatcherEvent { Sector = "C", Count = 1800 },
                new WatcherEvent { Sector = "D", Count = 1300 },
            },
            BackgroundColor = backgroundColors[0], // line chart can only have one color
            BorderColor = borderColors[0],
            Fill = true,
            PointRadius = 3,
            BorderWidth = 1,
            PointBorderColor = Enumerable.Repeat( borderColors.First(), 6 ).ToList(),
            CubicInterpolationMode = "monotone",
        };
    }
}

Horizontal Bar Chart

By adjusting the BarChartOptions and changing the IndexAxis you can make the horizontal Bar Chart. 
<Button Color="Color.Primary" Clicked="@(async () => await HandleRedraw())">Redraw</Button>

<BarChart @ref="barChart" TItem="double" Options="@options" />

@code {
    BarChart<double> barChart;

    BarChartOptions options = new()
    {
        IndexAxis = "y",
        Elements = new()
        {
            Bar = new()
            {
                BorderWidth = 2,
            }
        },
        Responsive = true,
        Plugins = new()
        {
            Legend = new()
            {
                Position = "right"
            },
            Title = new()
            {
                Display = true,
                    Text = "Chart.js Horizontal Bar Chart"
            }
        }
    };

    protected override async Task OnAfterRenderAsync( bool firstRender )
    {
        if ( firstRender )
        {
            await HandleRedraw();
        }
    }

    async Task HandleRedraw()
    {
        await barChart.Clear();

        await barChart.AddLabelsDatasetsAndUpdate( Labels,
            GetBarChartDataset( "Dataset 1" ),
            GetBarChartDataset( "Dataset 2" ) );
    }

    BarChartDataset<double> GetBarChartDataset( string label )
    {
        return new BarChartDataset<double>
        {
            Label = label,
            Data = RandomizeData(),
            BackgroundColor = backgroundColors,
            BorderColor = borderColors,
        };
    }

    string[] Labels = { "Red", "Blue", "Yellow", "Green", "Purple", "Orange" };
    List<string> backgroundColors = new List<string> { ChartColor.FromRgba( 255, 99, 132, 0.2f ), ChartColor.FromRgba( 54, 162, 235, 0.2f ), ChartColor.FromRgba( 255, 206, 86, 0.2f ), ChartColor.FromRgba( 75, 192, 192, 0.2f ), ChartColor.FromRgba( 153, 102, 255, 0.2f ), ChartColor.FromRgba( 255, 159, 64, 0.2f ) };
    List<string> borderColors = new List<string> { ChartColor.FromRgba( 255, 99, 132, 1f ), ChartColor.FromRgba( 54, 162, 235, 1f ), ChartColor.FromRgba( 255, 206, 86, 1f ), ChartColor.FromRgba( 75, 192, 192, 1f ), ChartColor.FromRgba( 153, 102, 255, 1f ), ChartColor.FromRgba( 255, 159, 64, 1f ) };
    Random random = new Random( DateTime.Now.Millisecond );

    List<double> RandomizeData()
    {
        return new List<double> {
            random.Next( -50, 50 ) * random.NextDouble(),
            random.Next( -50, 50 ) * random.NextDouble(),
            random.Next( -50, 50 ) * random.NextDouble(),
            random.Next( -50, 50 ) * random.NextDouble(),
            random.Next( -50, 50 ) * random.NextDouble(),
            random.Next( -50, 50 ) * random.NextDouble() };
    }
}

API

Attributes

Name Description Type Default
Type Defines the chart type. ChartType Line
Data Defines the chart data. ChartData
Options Defines the chart options. ChartOptions
DataJsonString Defines the chart data that is serialized as JSON string. [WILL BE REMOVED] string null
OptionsJsonString Defines the chart options that is serialized as JSON string. [WILL BE REMOVED] string null
Clicked Raised when clicked on data point. EventCallback<ChartMouseEventArgs>
Hovered Raised when hovered over data point. EventCallback<ChartMouseEventArgs>
MouseOut Raised when mouse leaves the chart area. EventCallback<ChartMouseEventArgs>

ChartOptions Attributes

Name Description Type Default
Scales Scales
Legend Legend
Tooltips Tooltips
Animation Animation
Responsive Resizes the chart canvas when its container does. bool? true
MaintainAspectRatio Maintain the original canvas aspect ratio (width / height) when resizing. bool? true
ResponsiveAnimationDuration Duration in milliseconds it takes to animate to new size after a resize event. bool? true
AspectRatio Canvas aspect ratio (i.e. width / height, a value of 1 representing a square canvas). int 2

Scales Attributes

Name Description Type Default
XAxes List<Axis>
YAxes List<Axis>

Legend Attributes

Name Description Type Default
Display Is the legend shown. bool true
Reverse Legend will show datasets in reverse order. bool false
FullWidth Marks that this box should take the full width of the canvas. bool true

Tooltips Attributes

Name Description Type Default
Display Are on-canvas tooltips enabled. bool true

Axis Attributes

Name Description Type Default
Type string null
Display bool true
Ticks AxeTicks
GridLines GridLines
ScaleLabel ScaleLabel
Ticks AxeTicks
Stacked Only used for BarChart and seting this to true will stack the datasets. bool false
On this page