Blazorise Chart component

Flexible Chart.js-based charting for Blazor applications.

See Charts specifications for behavior details and edge cases.

📊 The Community License has a limitation of 10 points per chart. Unlock full access to all features with our premium plans.

The chart extension includes several chart components. Each chart type has its own dataset and option settings.

Supported chart types are:

Chart default chart component (testing only; see warning)
LineChart
BarChart
PieChart
PolarAreaChart
DoughnutChart
RadarChart

To use the chart components, install the Blazorise.Charts package first.

Installation

NuGet

Install chart extension from NuGet.

dotnet add package Blazorise.Charts

Imports

In your main _Imports.razor add:

@using Blazorise.Charts

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",
        };
    }

    private static string[] Labels = { "A", "B", "C", "D", "E", "F" };

    private static List<string> BackgroundColors = new()
    {
        ChartColor.FromRgba( 76, 110, 245, 0.25f ),   // Indigo
        ChartColor.FromRgba( 18, 184, 134, 0.25f ),   // Teal
        ChartColor.FromRgba( 245, 159, 0, 0.25f ),    // Amber
        ChartColor.FromRgba( 240, 62, 62, 0.25f ),    // Red
        ChartColor.FromRgba( 132, 94, 247, 0.25f ),   // Purple
        ChartColor.FromRgba( 34, 139, 230, 0.25f )    // Blue
    };

    private static List<string> BorderColors = new()
    {
        ChartColor.FromRgba( 76, 110, 245, 1f ),      // Indigo
        ChartColor.FromRgba( 18, 184, 134, 1f ),      // Teal
        ChartColor.FromRgba( 245, 159, 0, 1f ),       // Amber
        ChartColor.FromRgba( 240, 62, 62, 1f ),       // Red
        ChartColor.FromRgba( 132, 94, 247, 1f ),      // Purple
        ChartColor.FromRgba( 34, 139, 230, 1f )       // Blue
    };

    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 the chart. The usage is straightforward. The only thing to keep in mind is the Model field that needs to be cast 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
            };
    }

    private static string[] Labels = { "A", "B", "C", "D", "E", "F" };

    private static List<string> BackgroundColors = new()
    {
        ChartColor.FromRgba( 76, 110, 245, 0.25f ),   // Indigo
        ChartColor.FromRgba( 18, 184, 134, 0.25f ),   // Teal
        ChartColor.FromRgba( 245, 159, 0, 0.25f ),    // Amber
        ChartColor.FromRgba( 240, 62, 62, 0.25f ),    // Red
        ChartColor.FromRgba( 132, 94, 247, 0.25f ),   // Purple
        ChartColor.FromRgba( 34, 139, 230, 0.25f )    // Blue
    };

    private static List<string> BorderColors = new()
    {
        ChartColor.FromRgba( 76, 110, 245, 1f ),      // Indigo
        ChartColor.FromRgba( 18, 184, 134, 1f ),      // Teal
        ChartColor.FromRgba( 245, 159, 0, 1f ),       // Amber
        ChartColor.FromRgba( 240, 62, 62, 1f ),       // Red
        ChartColor.FromRgba( 132, 94, 247, 1f ),      // Purple
        ChartColor.FromRgba( 34, 139, 230, 1f )       // Blue
    };

    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 using complex types as chart data. To represent complex data inside the charts you need to define the Parsing options.

Please be aware that according to the default chart.js library specifications, the category scale must be a string type. But if you still want to change it for example to an int type then you can define a "linear" scale on X axis. Eg. LineChartOptions lineChartOptions = new() { Scales = new ChartScales { X = new ChartAxis { Type = "linear" } } };

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

@code {
    private LineChart<WatcherEvent> lineChart;

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

    private static List<string> BackgroundColors = new()
    {
        ChartColor.FromRgba( 76, 110, 245, 0.25f ),   // Indigo
        ChartColor.FromRgba( 18, 184, 134, 0.25f ),   // Teal
        ChartColor.FromRgba( 245, 159, 0, 0.25f ),    // Amber
        ChartColor.FromRgba( 240, 62, 62, 0.25f ),    // Red
        ChartColor.FromRgba( 132, 94, 247, 0.25f ),   // Purple
        ChartColor.FromRgba( 34, 139, 230, 0.25f )    // Blue
    };

    private static List<string> BorderColors = new()
    {
        ChartColor.FromRgba( 76, 110, 245, 1f ),      // Indigo
        ChartColor.FromRgba( 18, 184, 134, 1f ),      // Teal
        ChartColor.FromRgba( 245, 159, 0, 1f ),       // Amber
        ChartColor.FromRgba( 240, 62, 62, 1f ),       // Red
        ChartColor.FromRgba( 132, 94, 247, 1f ),      // Purple
        ChartColor.FromRgba( 34, 139, 230, 1f )       // Blue
    };

    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,
        };
    }

    private static string[] Labels = { "A", "B", "C", "D", "E", "F" };

    private static List<string> BackgroundColors = new()
    {
        ChartColor.FromRgba( 76, 110, 245, 0.25f ),   // Indigo
        ChartColor.FromRgba( 18, 184, 134, 0.25f ),   // Teal
        ChartColor.FromRgba( 245, 159, 0, 0.25f ),    // Amber
        ChartColor.FromRgba( 240, 62, 62, 0.25f ),    // Red
        ChartColor.FromRgba( 132, 94, 247, 0.25f ),   // Purple
        ChartColor.FromRgba( 34, 139, 230, 0.25f )    // Blue
    };

    private static List<string> BorderColors = new()
    {
        ChartColor.FromRgba( 76, 110, 245, 1f ),      // Indigo
        ChartColor.FromRgba( 18, 184, 134, 1f ),      // Teal
        ChartColor.FromRgba( 245, 159, 0, 1f ),       // Amber
        ChartColor.FromRgba( 240, 62, 62, 1f ),       // Red
        ChartColor.FromRgba( 132, 94, 247, 1f ),      // Purple
        ChartColor.FromRgba( 34, 139, 230, 1f )       // Blue
    };

    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

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

<Chart />

Options

ChartOptions

Name	Default	Type
`Scales`	`null`	`ChartScales`
Configuration for chart scales.
`Animation`	`null`	`ChartAnimation`
Configuration for chart animation.
`Plugins`	`null`	`ChartPlugins`
Configuration for chart plugins.
`Interaction`	`null`	`ChartInteraction`
Configuration for chart interactions.
`Parsing`	`null`	`ChartParsing`
Configuration for chart parsing.
`Elements`	`null`	`ChartElements`
Configuration for chart elements.
`Layout`	`null`	`ChartLayout`
Configuration for chart layout.
`IndexAxis`	`null`	`string`
Index axis for the chart.
`Responsive`	`null`	`bool?`
Resizes the chart canvas when its container does.
`MaintainAspectRatio`	`null`	`bool?`
Maintain the original canvas aspect ratio (width / height) when resizing.
`AspectRatio`	`null`	`double?`
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.
`ResizeDelay`	`null`	`int?`
Delay the resize update by given amount of milliseconds. This can ease the resize process by debouncing update of the elements.
`Locale`	`null`	`string`
A string with a BCP 47 language tag, leveraging on .

ChartScales

Name	Default	Type
`X`	`null`	`ChartAxis`
Configuration for the x-axis.
`Y`	`null`	`ChartAxis`
Configuration for the y-axis.
`AdditionalAxes`	`null`	`Dictionary<string, ChartAxis>`
Configuration for custom named axes.

ChartAnimation

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

ChartPlugins

Name	Default	Type
`Legend`	`null`	`ChartLegend`
Configuration for the chart legend.
`Tooltips`	`null`	`ChartTooltips`
Configuration for the chart tooltips.
`Title`	`null`	`ChartTitle`
Configuration for the chart title.
`Subtitle`	`null`	`ChartSubtitle`
Configuration for the chart subtitle.
`Decimation`	`null`	`ChartDecimation`
Configuration for chart data decimation.

ChartInteraction

Name	Default	Type
`Mode`	`null`	`string`
Sets which elements appear in the interaction.
`Intersect`	`null`	`bool?`
If true, the interaction mode only applies when the mouse position intersects an item on the chart.
`Axis`	`null`	`string`
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.

ChartParsing

Name	Default	Type
`XAxisKey`	`null`	`string`
Key for the x-axis values in the data.
`YAxisKey`	`null`	`string`
Key for the y-axis values in the data.

ChartLayout

Name	Default	Type
`AutoPadding`	`null`	`bool?`
Apply automatic padding so visible elements are completely drawn.
`Padding`	`null`	`ChartPadding`
The padding to add inside the chart.

ChartElements

Name	Default	Type
`Point`	`null`	`ChartPointElements`
Point elements are used to represent the points in a line, radar or bubble chart.
`Line`	`null`	`ChartLineElements`
Line elements are used to represent the line in a line chart.
`Bar`	`null`	`ChartBarElements`
Bar elements are used to represent the bars in a bar chart.
`Arc`	`null`	`ChartArcElements`
Arcs are used in the polar area, doughnut and pie charts.

ChartLegend

Name	Default	Type
`Display`	`null`	`bool?`
Is the legend shown.
`Position`	`null`	`string`
Position of the legend.
`Align`	`null`	`string`
Alignment of the legend.
`MaxHeight`	`null`	`int?`
Maximum height of the legend, in pixels.
`MaxWidth`	`null`	`int?`
Maximum width of the legend, in pixels.
`FullSize`	`null`	`bool?`
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.
`Reverse`	`null`	`bool?`
Legend will show datasets in reverse order.
`Labels`	`null`	`ChartLegendLabel`
Options to change legend labels.
`Rtl`	`null`	`bool?`
true for rendering the legends from right to left.
`TextDirection`	`null`	`string`
This will force the text direction 'rtl' or 'ltr' on the canvas for rendering the legend, regardless of the css specified on the canvas.
`Title`	`null`	`ChartLegendTitle`
Options to change legend title.

ChartTooltips

Name	Default	Type
`Enabled`	`null`	`bool?`
Are on-canvas tooltips enabled.
`Mode`	`null`	`string`
Sets which elements appear in the tooltip.
`Intersect`	`null`	`bool?`
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.
`Position`	`null`	`string`
The mode for positioning the tooltip.
`BackgroundColor`	`null`	`IndexableOption<object>`
Background color of the tooltip.
`TitleColor`	`null`	`IndexableOption<object>`
Color of title text.
`TitleFont`	`new ChartFont { Weight = "bold" }`	`ChartFont`
See Fonts.
`TitleAlign`	`null`	`string`
Horizontal alignment of the title text lines.
`TitleSpacing`	`null`	`int?`
Spacing to add to top and bottom of each title line.
`TitleMarginBottom`	`null`	`int?`
Margin to add on bottom of title section.
`BodyColor`	`null`	`IndexableOption<object>`
Color of body text.
`BodyFont`	`null`	`ChartFont`
See Fonts.
`BodyAlign`	`null`	`string`
Horizontal alignment of the body text lines.
`BodySpacing`	`null`	`int?`
Spacing to add to top and bottom of each tooltip item.
`FooterColor`	`null`	`IndexableOption<object>`
Color of footer text.
`FooterFont`	`null`	`ChartFont`
See Fonts.
`FooterAlign`	`null`	`string`
Horizontal alignment of the footer text lines.
`FooterSpacing`	`null`	`int?`
Spacing to add to top and bottom of each footer line.
`FooterMarginTop`	`null`	`int?`
Margin to add before drawing the footer.
`Padding`	`null`	`object`
Padding inside the tooltip.
`CaretPadding`	`null`	`object`
Extra distance to move the end of the tooltip arrow away from the tooltip point.
`CaretSize`	`null`	`int?`
Size, in px, of the tooltip arrow.
`CornerRadius`	`null`	`int?`
Radius of tooltip corner curves.
`MultiKeyBackground`	`null`	`IndexableOption<object>`
Color to draw behind the colored boxes when multiple items are in the tooltip.
`DisplayColors`	`null`	`bool?`
If true, color boxes are shown in the tooltip.
`BoxWidth`	`null`	`int?`
Width of the color box if displayColors is true.
`BoxHeight`	`null`	`int?`
Height of the color box if displayColors is true.
`BoxPadding`	`null`	`int?`
Padding between the color box and the text.
`UsePointStyle`	`null`	`bool?`
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).
`BorderColor`	`null`	`IndexableOption<object>`
Color of the border.
`BorderWidth`	`null`	`int?`
Size of the border.
`Rtl`	`null`	`bool?`
true for rendering the tooltip from right to left.
`TextDirection`	`null`	`string`
This will force the text direction 'rtl' or 'ltr on the canvas for rendering the tooltips, regardless of the css specified on the canvas.
`XAlign`	`null`	`string`
Position of the tooltip caret in the X direction. "left" (default) "center" "right"
`YAlign`	`null`	`string`
Position of the tooltip caret in the Y direction. "left" (default) "center" "right"

ChartAxis

Name	Default	Type
`Type`	`null`	`string`
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.
`AlignToPixels`	`null`	`bool?`
Align pixel values to device pixels.
`Display`	`true`	`bool`
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.
`Grid`	—	`ChartAxisGridLine`
Grid line configuration. more....
`Min`	—	`double?`
User defined minimum number for the scale, overrides minimum value from data. more...
`Max`	—	`double?`
User defined maximum number for the scale, overrides maximum value from data. more...
`Reverse`	—	`bool?`
Reverse the scale.
`Stacked`	—	`bool?`
Should the data be stacked.
`SuggestedMin`	—	`double?`
Adjustment used when calculating the minimum data value. more...
`SuggestedMax`	—	`double?`
Adjustment used when calculating the maximum data value. more...
`Ticks`	—	`ChartAxisTicks`
Tick configuration.
`Time`	—	`ChartAxisTime`
Time configuration.
`Weight`	—	`double?`
The weight used to sort the axis. Higher weights are further away from the chart area.
`Title`	—	`ChartScaleTitle`
Defines options for the scale title. Note that this only applies to cartesian axes.
`BeginAtZero`	—	`bool?`
If true, scale will include 0 if it is not already included.
`Grace`	—	`object`
Percentage (string ending with %) or amount (number) for added room in the scale range above and below data.

ChartAxisTicks

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