50+ Fast, Flexible Blazor Charts

Build stunning dashboards for the web using C# and .NET with ComponentOne FlexChart for Blazor.

  • Choose from popular chart types and options including stacked and composite plots
  • Deliver modern visualizations and dashboards with sleek SVG rendering
  • Get high-performance charts for both Blazor Server and WebAssembly apps
  • Embellish your charts with interactive and data analysis features
Download Free Trial

Overview

Blazor chart controls are UI libraries for creating and displaying 2D charts in web applications. ComponentOne FlexChart provides bar, line, area, and many other chart types to help developers visualize data in meaningful ways.

Why Choose FlexChart for Blazor?

Easy to Use Blazor Charts

FlexChart is an easy-to-use Blazor C# chart component. Write less code with built-in styling and analysis features.

50+ Chart Types and Variations

Build the exact chart you need with FlexChart's many built-in chart types, combination plots and stacking options.

Specialized Chart Components

Get optimized Blazor chart components with specialized APIs for pie, radar, polar, sunburst and treemap charts.

Flexible Customization

Configure your Blazor charts down to the smallest detail with label formatting, gridlines, tick marks, and more.

High-Performance for Server and Client

The Blazor charts have been developed natively to ensure optimal performance for both Server and WebAssembly apps.

Interactive SVG Rendering

Process very large data sets and get fully interactive charts with high-performance SVG rendering.

Blazor Chart Types

Bar and Column Charts

Column Charts

Compare multiple data series over time in a horizontal or vertical bar chart. A column or bar chart is the most straightforward and most versatile of all statistical diagrams.

Bar Stacked Charts

Stacked charts demonstrate the part-to-whole relationship for displaying the cumulative values of categories. FlexChart provides options to cluster and stack bar (and column charts) including 100% stacking.

Range Column Chart

A range column chart shows two values, a minimum and maximum, for each column or bar. The plot can be rotated to create a Gantt-style chart as well.

Line and Area Charts

Line Charts

Used to visualize a trend in data over time, line charts are created by connecting data points with lines and optional symbols. Line charts also support stacking series, spline (smooth) rendering, and gaps within the data.

Area Charts

Fill in the area below the line to demonstrate trends in similar categories. Blazor area charts support stacking, spline (smooth) rendering, axis rotation, and range areas.

Step Charts

Step line charts help visualize changes at a specific point. Data points are connected through vertical and horizontal lines. Display symbols or fill the area.

Blazor Scatter Charts

Scatter Charts

Demonstrate correlation between data points and a set of numerical data along the x-axis and the y-axis. Scatter charts combine values into single data points and display uneven intervals or clusters.

Bubble Charts

Create rich, visually appealing data modeling and financial charts with bubble charts. This Blazor chart allows you to display your data series as a set of differently-sized symbols in the chart space.

Financial Charts

Blazor Candlestick Charts

Candlestick Charts

The candlestick chart displays the Open, Close, High, and Low Stock Prices for each day in the series. The vertical bar spans the High and Low values for the day.

Blazor HLOC Charts

HLOC Charts

Also known as high-low-open-close, HLOC charts illustrate movements in the price of a financial instrument over time.

Pie and Sunburst Charts

Pie Charts

Blazor pie charts show how parts of a whole add up to 100%. FlexPie features include doughnut, exploded slices, animation, selection, and rotation.

Sunburst Charts

Visualize hierarchical data from a root node (center) outward to lower hierarchies. A segment of the inner circle is a parent to the segments of the outer circle which lie within the angular sweep of a parent.

Multiple Pie Charts

Use FlexPie to visualize more data in a single chart by creating multiple pie chart "series" using the same data source. An effective way of presenting data, especially if the intent is to show one section relative to the whole.

Radar and Polar Charts

Radar Charts

Display multivariate observations with an arbitrary number of variables. FlexRadar supports line, area, column, scatter, and stacked chart types.

Radar Column Charts

Create a windrose chart using FlexRadar and the Column chart type. This visualization lets you display changes in the radar through radiating columns with stacking support.

Polar Charts

Create circular graphs to display multivariate observations with an arbitrary number of variables. FlexRadar can generate polar charts with lines, columns, filled areas, and custom symbols.

Specialized Chart Types

Error Bar Charts

Error bars help you see margins of error and standard deviations at a glance. They can be shown as a standard error amount, a percentage, or a standard deviation.

Box-and-Whisker Charts

Graphically depict groups of numerical data through their quartile, mean, median and outliers.

Histogram Charts

Diagram consists of rectangles whose area is proportional to the frequency of a variable and whose width is equal to the class interval. Supports ranged axes.

Funnel Charts

Visualize stages of a process, such as a sales funnel, using a funnel shape. Adjust the funnel's height, width, and style using the options property.

Funnel Rectangle Charts

Square the edges in a funnel for a different look that plots streamlined data to show various stages in a process.

TreeMap Charts

Display hierarchical information combined with relative quantity. Highlight hierarchical, tree-structured data as a set of nested rectangles and help to analyze the anomalies in the data set.

Gantt Charts

A Gantt chart is a type of bar chart that illustrates a project schedule using ranged bars with starting and ending points. The Blazor chart supports basic range bar charts.

Waterfall Charts

A waterfall chart helps understand the cumulative effect of sequentially introduced positive or negative values. Optionally, display auto-calculated intermediate totals in the waterfall chart.

BreakEven Charts

A break-even chart shows the sales volume level at which total costs equal sales. The chart plots revenue, fixed costs, and variable costs on the vertical axis, and volume on the horizontal axis.

Blazor Chart Features

Interactive Features

Scaling and Scrolling

Enable zooming and panning interaction with axis range scrollbars. This type of scrolling works well with the Blazor Server and WebAssembly (WASM), as the control updates the view after the user drags either scroll thumb.

Line Markers

Add interactive line markers or cross-hairs to show information about a specific point on your chart.

Selection and Hit-Test

Select a single data point or an entire data series in your chart. Enable touch for your chart interactions. Hit-testing helps find the closest data point.

Style Features

Color Palettes

FlexChart includes over 20 built-in color palettes, or you can provide your own custom colors with support for opacity.

Animation

Add animation when the Blazor chart is loaded or when data points are updated. Choose an easing function and how to animate the data points.

Custom Axes and Gridlines

Configure the chart axes and gridlines to your desired specifications. FlexChart supports multiple axes, major and minor gridlines, tick marks, axis origin, reversed axes, rotated axis labels, logarithmic scaling and more.

Additional Features

Data Labels and Tooltips

Display precise chart values in labels attached to each data point. FlexChart can automatically display the formatted value or percentage within labels and tooltips, but you can customize the style and layout.

Annotations

Annotations improve the clarity of the chart using arbitrary text, images and shapes that can be attached to data points or plot coordinates. The Blazor chart control supports various built-in annotations such as shapes, lines, images and text.

Composite Charts

Easily combine any Cartesian chart types into a single plot using FlexChart's flexible model. Each series can be set to a different chart type, allowing endless composite chart combinations.

Multiple Plot Areas

Define multiple plot areas to display plots stacked horizontally and vertically. Stacking plot areas helps visualize multiple series in a single chart.

Trendlines

Add trend lines to show trends in data and make predictions. FlexChart supports several built-in regression and non-regression trendlines such as linear, average and polynomial.

Range Selector

With the range selector, you can enable scrolling between two charts where one is a preview of all data and one is filtered (or zoomed) to the selected range for closer analysis.

Chart Legends

Position the generated legend to any side of the chart. The blazor chart legend supports grouping, scrolling, and toggle - where users can toggle the visibility of a series.

Logarithmic Axis Scaling

Use logarithmic scaling to spread data that is clustered around the origin. This is common in several financial and economic data sets.

Blazor Chart Image Export

Image Export

FlexChart for Blazor can be exported to an image in PNG, JPG, or SVG formats.

Blazor Chart Demos

Blazor Control Explorer

Explore every FlexChart feature in a WebAssembly (clientside) or Blazor Server application. Configure properties at run-time and view the underlying source for any demo.

Flight Statistics Dashboard

See a real-world dashboard built using entirely ComponentOne Blazor components. View flight statistics in a FlexGrid with row selection that drills down to visualize data on FlexChart for a region or city.

ComponentOne Customer Feedback and Awards

"Prompt responses, quality feedback, and help with code examples. Fantastic service!"

RICHARD HERBERT

"Excellent product with good support"

MIKE WEBSTER

"I am very appreciative of the effort your entire team gave to make this transaction happen. Thank you for your efforts!"

SAM COLE

ComponentSource #2 Publisher 2022 Award ComponentSource #3 Product 2022 Award

"When I run into complex problems, I turn to my ComponentOne Studio Enterprise toolbox."

KEN SPENSER, MICROSOFT REGIONAL DIRECTOR - FRAMEWORK MASTERS

"I love to use C1 components! I can be confident that if I need to do a particular task, ComponentOne will have the control to do the job."

SILV SORDELLO, SOFTWARE DEVELOPER

"As an ISV, I need tools that allow me to be competitive. Therefore, it's a must to use reliable and stable tools for customized solutions...ComponentOne provides all that to me and even more!"

DENNIS WALLENTIN, MICROSOFT MVP (EXCEL)

"Easier to use right off the bat. I liked using the Scheduler for drag-and-drop capability."

MICHELLE GIBSON, SOFTWARE ENGINEER