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
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 Blazor 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
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.
HLOC Charts
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 Blazor 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.
Blazor Chart Style Features
Color Palettes
FlexChart includes over 20 built-in color palettes, or you can provide your own custom colors with support for opacity.
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.
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.
Featured Blogs, Videos, and Other Resources
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
 |
 |
"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
Trusted by the World's Leading Companies
