Chart

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
  • HorizontalBarChart
  • 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 _Host.cshtml file, depending if you’re using a Blazor WebAssembly or Blazor Server side project.
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>

Example

You should always define TItem data type.
<Button 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 = 2,
            BorderDash = new List<int> { }
        };
    }

    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;

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

        Console.WriteLine( $"{model.X}-{model.Y}" );
    }
}

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