80+ 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.
80+ 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.
Heatmap and Contour Charts
Heatmap Charts
Create category and value-based discrete heatmaps with FlexChart. Heatmaps are like a 2D matrix that can help identify patterns, areas of concentration, and data variance.
Gradient Heatmaps
This specialized chart represents data values using colors and is especially useful in plotting large, complex data. Customize the discrete gradient color scale and gradient color axis.
2D Contour Charts
2D contour charts reveal insights that traditional plots simply can't show. FlexChart supports area and line contours, as well as built-in color scale support with a variety of sequential, diverging, and qualitative gradient color palettes.
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
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.
Interactive Chart Features
Selection and Drill-Down
FlexChart supports a built-in selection mode that lets you quickly enable data point selection and drill-down. Choose from a single point selection mode or select an entire series with one click.
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.
Axis Markers
Display interactive line markers over the axes. Both axes have markers which follow the pointer and display its position in data coordinates.
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.
Hit-Test and Drag Points
The Blazor chart has a flexible hit-testing API that lets you easily detect which data point the user is interacting with and connect it to the underlying data value. Enable features such as dragging points to change their plot values.
Annotation 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.
Custom Annotations
Annotations improve the clarity of the chart by highlighting certain data points or plot coordinates. The Blazor chart control supports various custom annotations such as shapes, lines, images and text.
Range Zones
Highlight range zones (alarm zones) on the plot area to draw instant attention to key thresholds, operating ranges, and critical data regions. Range Zones make important insights stand out and help users interpret data faster.
Additional Features
Combination 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 axes and plot areas to display plots stacked horizontally and vertically. Stacking plot areas helps visualize multiple series in a single chart.
Trendlines
Add trendlines to show trends in data and make predictions. FlexChart supports several built-in regression and non-regression trendlines such as linear, average and polynomial.
Axis Breaks
Create presentation-worthy charts by adding axis breaks to make charts with very large gaps more readable for users.
Legend Grouping
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.
Image Export
FlexChart for Blazor can be exported to an image in PNG, JPG, or SVG formats.
Get started with FlexChart by adding the C1.Blazor.Chart NuGet package.
dotnet add package C1.Blazor.ChartGet Started with FlexChart for Blazor
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
