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

Chart

Name Description TypeDefault
Type Defines the chart type. ChartTypeLine
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] stringnull
OptionsJsonString Defines the chart options that is serialized as JSON string. [WILL BE REMOVED] stringnull
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

Name Description TypeDefault
Scales Configuration for chart scales. ChartScalesnull
Animation Configuration for chart animation. ChartAnimationnull
Plugins Configuration for chart plugins. ChartPluginsnull
Interaction Configuration for chart interactions. ChartInteractionnull
Parsing Configuration for chart parsing. ChartParsingnull
Elements Configuration for chart elements. ChartElementsnull
Layout Configuration for chart layout. ChartLayoutnull
IndexAxis Index axis for the chart. stringnull
Responsive Resizes the chart canvas when its container does. bool?null
MaintainAspectRatio Maintain the original canvas aspect ratio (width / height) when resizing. bool?null
AspectRatio Canvas aspect ratio (i.e. width / height, a value of 1 representing a square canvas). Note that this option is ignored if the height is explicitly defined either as attribute or via the style. double?null
ResizeDelay Delay the resize update by given amount of milliseconds. This can ease the resize process by debouncing update of the elements. int?null
Locale A string with a BCP 47 language tag, leveraging on . stringnull

ChartScales

Name Description TypeDefault
X Configuration for the x-axis. ChartAxisnull
Y Configuration for the y-axis. ChartAxisnull

Animation

Name Description TypeDefault
Duration The number of milliseconds an animation takes. int?null
Easing Easing function to use. more... stringnull
Delay Delay before starting the animations. int?null
Loop If set to true, the animations loop endlessly. bool?null

ChartPlugins

Name Description TypeDefault
Legend Configuration for the chart legend. ChartLegendnull
Tooltips Configuration for the chart tooltips. ChartTooltipsnull
Title Configuration for the chart title. ChartTitlenull
Subtitle Configuration for the chart subtitle. ChartSubtitlenull
Decimation Configuration for chart data decimation. ChartDecimationnull

ChartInteraction

Name Description TypeDefault
Mode Sets which elements appear in the interaction. stringnull
Intersect If true, the interaction mode only applies when the mouse position intersects an item on the chart. bool?null
Axis Can be set to 'x', 'y', or 'xy' to define which directions are used in calculating distances. Defaults to 'x' for 'index' mode and 'xy' in dataset and 'nearest' modes. stringnull

ChartParsing

Name Description TypeDefault
XAxisKey Key for the x-axis values in the data. stringnull
YAxisKey Key for the y-axis values in the data. stringnull

ChartLayout

Name Description TypeDefault
AutoPadding Apply automatic padding so visible elements are completely drawn. bool?null
Padding The padding to add inside the chart. ChartPaddingnull

ChartElements

Name Description TypeDefault
Point Point elements are used to represent the points in a line, radar or bubble chart. ChartPointElementsnull
Line Line elements are used to represent the line in a line chart. ChartLineElementsnull
Bar Bar elements are used to represent the bars in a bar chart. ChartBarElementsnull
Arc Arcs are used in the polar area, doughnut and pie charts. ChartArcElementsnull

ChartLegend

Name Description TypeDefault
Display Is the legend shown. bool?null
Position Position of the legend. stringnull
Align Alignment of the legend. stringnull
MaxHeight Maximum height of the legend, in pixels. int?null
MaxWidth Maximum width of the legend, in pixels. int?null
FullSize Marks that this box should take the full width/height of the canvas (moving other boxes). This is unlikely to need to be changed in day-to-day use. bool?null
Reverse Legend will show datasets in reverse order. bool?null
Labels Options to change legend labels. ChartLegendLabelnull
Rtl true for rendering the legends from right to left. bool?null
TextDirection This will force the text direction 'rtl' or 'ltr' on the canvas for rendering the legend, regardless of the css specified on the canvas. stringnull
Title Options to change legend title. ChartLegendTitlenull

ChartTooltips

Name Description TypeDefault
Enabled Are on-canvas tooltips enabled. bool?null
Mode Sets which elements appear in the tooltip. stringnull
Intersect If true, the tooltip mode applies only when the mouse position intersects with an element. If false, the mode will be applied at all times. bool?null
Position The mode for positioning the tooltip. stringnull
BackgroundColor Background color of the tooltip. IndexableOption<object>null
TitleColor Color of title text. IndexableOption<object>null
TitleFont See Fonts. ChartFontnew ChartFont { Weight = "bold" }
TitleAlign Horizontal alignment of the title text lines. stringnull
TitleSpacing Spacing to add to top and bottom of each title line. int?null
TitleMarginBottom Margin to add on bottom of title section. int?null
BodyColor Color of body text. IndexableOption<object>null
BodyFont See Fonts. ChartFontnull
BodyAlign Horizontal alignment of the body text lines. stringnull
BodySpacing Spacing to add to top and bottom of each tooltip item. int?null
FooterColor Color of footer text. IndexableOption<object>null
FooterFont See Fonts. ChartFontnull
FooterAlign Horizontal alignment of the footer text lines. stringnull
FooterSpacing Spacing to add to top and bottom of each footer line. int?null
FooterMarginTop Margin to add before drawing the footer. int?null
Padding Padding inside the tooltip. objectnull
CaretPadding Extra distance to move the end of the tooltip arrow away from the tooltip point. objectnull
CaretSize Size, in px, of the tooltip arrow. int?null
CornerRadius Radius of tooltip corner curves. int?null
MultiKeyBackground Color to draw behind the colored boxes when multiple items are in the tooltip. IndexableOption<object>null
DisplayColors If true, color boxes are shown in the tooltip. bool?null
BoxWidth Width of the color box if displayColors is true. int?null
BoxHeight Height of the color box if displayColors is true. int?null
BoxPadding Padding between the color box and the text. int?null
UsePointStyle Use the corresponding point style (from dataset options) instead of color boxes, ex: star, triangle etc. (size is based on the minimum value between boxWidth and boxHeight). bool?null
BorderColor Color of the border. IndexableOption<object>null
BorderWidth Size of the border. int?null
Rtl true for rendering the tooltip from right to left. bool?null
TextDirection This will force the text direction 'rtl' or 'ltr on the canvas for rendering the tooltips, regardless of the css specified on the canvas. stringnull
XAlign Position of the tooltip caret in the X direction.
  • "left" (default)
  • "center"
  • "right"
 stringnull
YAlign Position of the tooltip caret in the Y direction.
  • "left" (default)
  • "center"
  • "right"
 stringnull

ChartAxis

Name Description TypeDefault
Type Type of scale being employed. Custom scales can be created and registered with a string key. This allows changing the type of an axis for a chart. stringnull
AlignToPixels Align pixel values to device pixels. bool?null
Display Controls the axis global visibility (visible when true, hidden when false). When display: "auto", the axis is visible only if at least one associated dataset is visible. booltrue
Grid Grid line configuration. more.... ChartAxisGridLine
Min User defined minimum number for the scale, overrides minimum value from data. more... double?
Max User defined maximum number for the scale, overrides maximum value from data. more... double?
Reverse Reverse the scale. bool?
Stacked Should the data be stacked. bool?
SuggestedMin Adjustment used when calculating the minimum data value. more... double?
SuggestedMax Adjustment used when calculating the maximum data value. more... double?
Ticks Tick configuration. ChartAxisTicks
Time Time configuration. ChartAxisTime
Weight The weight used to sort the axis. Higher weights are further away from the chart area. double?
Title Defines options for the scale title. Note that this only applies to cartesian axes. ChartScaleTitle
BeginAtZero If true, scale will include 0 if it is not already included. bool?
Grace Percentage (string ending with %) or amount (number) for added room in the scale range above and below data. object

ChartAxisTicks

Name Description TypeDefault
BackdropColor Color of label backdrops. IndexableOption<object>null
BackdropPadding Padding of label backdrop. See more... objectnull
Callback

Defines the Expression which will be converted to JavaScript as a string representation of the tick value as it should be displayed on the chart.

Eg. Callback = ( value, index, values ) => value / 1000 + "K"

 Expression<Func<double, int, double[], string>>null
Display If true, show tick marks. bool?null
Color Color of ticks. IndexableOption<object>null
Font Font color for tick labels. ChartFontnull
Major Major ticks configuration. Omitted options are inherited from options above. ChartAxisMajorTicknull
Padding Sets the offset of the tick labels from the axis. double?null
ShowLabelBackdrop If true, draw a background behind the tick labels. bool?null
TextStrokeColor The color of the stroke around the text. IndexableOption<object>null
TextStrokeWidth Stroke width around the text. double?null
Z z-index of tick layer. Useful when ticks are drawn on chart area. Values <= 0 are drawn under datasets, > 0 on top. double?null
Count The number of ticks to generate. If specified, this overrides the automatic generation. int?null
Format The number format options used by the default label formatter. objectnull
Precision If defined and StepSize is not specified, the step size will be rounded to this many decimal places. double?null
StepSize User-defined fixed step size for the scale. double?null
On this page