Fast, Flexible Blazor Charts
Enrich your web and mobile C# Blazor apps with 50+ chart types and customization options.
- Visualize live data with easy-to-use data binding.
- Deliver modern data visualizations and dashboards with SVG rendering.
- High-performance for both Blazor Server and WebAssembly apps.
- Choose from a comprehensive list of popular chart types including clustered, stacked and composite plots.
- Add dozens of interactive and data analysis features to your charts.
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.
-
50+ Chart Types & Options
FlexChart is an easy-to-use Blazor C# chart component that supports all common 2D chart types like bar, area, line, pie and scatter. You can even combine chart types to create a composite chart.
-
High-Performance across Server and Client
The Blazor charts have been developed natively from the ground up, ensuring optimal performance for both Server and WebAssembly apps. FlexChart renders in the browser using SVG graphics.
-
Flexible Customization Options
Configure your Blazor charts down to the smallest detail with support for label formatting, gridlines, tick marks, titles, palettes, legend grouping, series stacking, plot rotation and more.
FlexChart Bar and Column Charts
Chart Types
Bar Chart
Compare multiple data series over time in a horizontal bar chart. A bar chart is the most straightforward and most versatile of all statistical diagrams.
Bar Stacked Chart
The stacked bar chart extends the standard bar chart from looking at numeric values across one categorical variable to two. FlexChart provides options to cluster and stack bar (and column charts). Stacked charts demonstrate the part-to-whole relationship for displaying the cumulative values of categories.
Bar Stacked 100 Chart
Use stacked 100 bar charts to show changes in a data series over time or to compare multiple items. The bar stacked 100 chart displays multiple series of data as stacked bars, ensuring that the cumulative proportion of each stacked element always totals 100%.
Column Chart
Column charts are data points displayed as vertical bars and are the most commonly used charts. They are similar to a bar chart except that the bars are vertical and not horizontal. Column charts compare frequency, count, total, or average of data in different categories. Perfect for highlighting variations in the value of an item over time.
Column Stacked Chart
Stack data points in a column chart are useful in indicating the cumulative effect of multiple series values. Data points from different series are rendered one over the other in a stacked column chart.
Column Stacked 100 Chart
The cumulative proportion of each stacked element always totals 100. The Column Stack 100 Chart compares the percentage that each value contributes to the total—a great way to visualize the relative contribution of each series value to the whole.
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.
FlexChart Line Charts
Chart Types
Line Chart
Used to visualize a trend in data as they compare values against periodic intervals (such as time or temperature), line charts are basic charts created by connecting data points with straight lines.
Line Stacked Chart
A stacked line chart displays series as a set of points connected by a line. Values are represented on the y-axis, and categories are shown on the x-axis. A line chart is often used to visualize a trend in data over intervals of time (and is often drawn chronologically).
Line Stacked 100 Chart
Compare the percentage that each value contributes to the total. The Line stacks chart is the cumulative proportion of each stacked element always totals 100.
Line Rotated Chart
A rotated line chart shows the X axis vertically and the continuous line draws top to bottom or bottom to top. Use this chart configuration to create a visualization that is both dramatic and different.
Line Symbol Chart
A line symbol chart is a slight variation of the line chart and is displayed with markers on the data points. These charts are used when it is required to know the exact data points which have been used to plot the chart. FlexChart allows users to add custom images to data.
Line Symbol Stacked Chart
A stacked line chart with symbols displays series as a set of points connected by a line. Values are represented by symbols on the y-axis, and categories are shown on the x-axis.
Line Symbol Stacked 100 Chart
Compare the percentage that each value contributes to the total. The cumulative proportion of each stacked element always totals 100.
Line Symbol Rotated Chart
A rotated line chart with symbols shows the X axis vertically and the continuous line draws top to bottom or bottom to top.
Line Chart with Gaps
Interpolating the nulls will connect line charts where values are missing. With FlexChart you can disable this feature and the chart can show gaps where there are null values.
FlexChart Area Charts
Chart Types
Area Chart
Fill in the area below the line to demonstrate trends in similar categories. An area chart shades the area enclosed between the lines that join points on a series and the x-axis.
Area Stacked Chart
Stacked area charts are area charts with y-values stacked over one another in series order. Area stacked chart data can be visualized as a sum of series parts while using this chart type.
Area Stacked 100 Chart
Compare the percentage that each value contributes to the total. The cumulative proportion of each stacked element always totals 100.
Area Rotated Chart
Rotate the axes on an area chart to create a dramatic new display of your data. With a rotated chart, the x axis is vertical and the area shades regions left to right.
Spline Area Chart
Create a smoothed area chart to demonstrate trends in similar categories. An spline area chart shades the area enclosed between the lines that join points on a series and the x-axis.
Spline Area Stacked Chart
A stacked area chart avoids overlap by stacking each area series over one another. A spline area stacked chart uses smoothed lines between each data point.
Spline Area Stacked 100 Chart
Compare the percentage that each value contributes to the total.
Spline Area Rotated Chart
Rotate the axes on an area chart to create a dramatic new display of your data. With a rotated chart, the x axis is vertical and the area shades regions left to right.
FlexChart Line Charts
Chart Types
Step Chart
Uses horizontal and vertical lines to present data that show sudden changes along y-axis by discrete amount.
Step Stacked Chart
Stack the step line chart to show how each category compares to each other.
Step Stacked 100 Chart
Stack the step line chart to show how each category compares to each other percentage wise.
Step Rotated Chart
Uses horizontal and vertical lines to present data that show sudden changes along x-axis by discrete amount.
Step Symbols Chart
Uses horizontal and vertical lines, along with symbols, to present data that show sudden changes along y-axis by discrete amount.
Step Symbols Stacked Chart
Stack the step line chart to show how each category compares to each other. Display symbols on each data point to clearly mark the value.
Step Symbols Stacked 100 Chart
Stack the step line symbols chart to show how each category compares to each other percentage wise.
Step Symbols Rotated Chart
Uses horizontal and vertical lines to present data that show sudden changes along x-axis by discrete amount.
Step Area Chart
Fill in the area below the line to demonstrate trends in similar categories.
Step Area Stacked Chart
Fill in the area below the line to demonstrate trends in similar stacked categories.
Step Area Stacked 100 Chart
Fill in the area below the line to demonstrate trends in similar stacked categories.
Step Area Rotated Chart
Fill in the area below the horizontal and vertical lines to present data that show sudden changes along x-axis by discrete amount.
FlexChart Scatter Charts
Chart Types
Scatter Chart
Demonstrate correlation between data points with an XY scatter chart, which shows one set of numerical data along the x-axis and another along the y-axis. The scatter chart combines these values into single data points and displays them in uneven intervals, or clusters.
Scatter Stacked Chart
A stacked scatter chart is similar to a stacked line symbols chart without the line. The scatter chart combines these values into single data points and displays them in uneven intervals, or clusters.
Scatter Stacked 100 Chart
Compare the percentage that each value contributes to the total.
Scatter Rotated Chart
Demonstrate correlation between data points with a scatter chart, which shows one set of numerical data along the y-axis and another along the x-axis.
Bubble Chart
Create rich, visually-appealing data modelling and financial charts with bubble charts. This chart type allows you to display your data series as a set of differently-sized symbols in the chart space.
FlexChart Financial Charts
Chart Types
Candlestick Chart
Visualize financial data in the Candlestick Chart. This 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 Chart
Also known as high-low-open-close, HLOC illustrates movements in the price of a financial instrument over time.
FlexChart Pie Charts
Charts Types
Pie Chart
Pie charts show how parts of a whole add up to 100%. Features include exploding slices, slice selection, rotation, and data labels.
Doughnut Chart
Set the inner radius property of the pie chart to turn it into a doughnut. Includes all of the pie chart customizations.
Multiple Pies
FlexPie can generate multiple pies in a single plot when there's an x or category binding field to visualize. For example, generate a separate pie chart for each quarter of the year.
Sunburst
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 parent.
Sunburst Doughnut
Set the inner radius to create a sunburst doughtnut chart.
Radar and Polar Charts
Charts Types
Radar
Display multivariate observations with an arbitrary number of variables.
Radar Area
Fill in the areas between lines of a basic radar chart.
Radar Column
Display changes in the radar with radiating columns.
Radar Symbol
Combine a radar and a scatter point chart.
Polar
Create circular graphs to display multivariate observations with an arbitrary number of variables.
Polar Area
Fill in the areas between lines of a basic polar chart.
Polar Symbol
Combine a polar and a scatter chart.
Statistical Charts
Charts Types
ErrorBar
Represent the variability of data to indicate the error or uncertainty in a measurement. Display standard deviation or other error amounts including fixed value, percentage, standard error, and custom.
Box-and-Whisker
Graphically depict groups of numerical data through their quartile, mean, median and outliers. Rotate the plot area and show data outliers in a box-and-whisker.
Histogram
Diagram consists of rectangles whose area is proportional to the frequency of a variable and whose width is equal to the class interval.
Ranged Histogram
Diagram consists of a range rectangles whose area is proportional to the frequency of a variable and whose width is equal to the class interval.
FlexChart Specialized Charts
BreakEven
A BreakEven helps in visualizing sales volume levels at which total costs equal sales, losses will be incurred below this point, and profits will be earned above this point.
Funnel Chart
A funnel chart visualizes the stages of process in a funnel shape, such as for sales.
Funnel Rectangle Chart
A funnel chart visualizes the stages of process in a funnel shape. You can square the edges in a funnel for a different look.
Gantt Chart
A Gantt chart is a type of bar chart that illustrates a project schedule using ranged bars with starting and ending points.
TreeMap
Display hierarchical information combined with relative quantity. Includes customized node colors.
Waterfall
Show change in the starting position of the chart through a series of changes.
Legends
Features
Legends
Legends represent the mapping between colors, symbols, and data series on a chart.
Legend Scrolling
Enable scrolling in the legend when there are too many items to display in the chart area at one time.
Legend Toggle
Toggle series visibility in FlexChart by enabling the LegendToggle property.
FlexChart Titles and Labels
Annotations
Annotations on the chart help add more information to or highlight certain data points. The Blazor chart control supports various built-in annotations such as Rectangle, Square, Circle, Ellipse, Line, Polygon, Image, and Text.
Data Labels
Provide more information on your data by labeling your data points. Customize the label template to display field information and format the text.
Header and Footer
Display information that's relevant to your chart by specifying header and footer text.
Label Rotation
Make your chart's labels easier to read by displaying them at an angle.
Axis Features
Features
Axis Scrollbars
Enable scrolling along either axis with the new axis scrollbar. 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.
Overlapping Axis Labels
Prevent axis labels from overlapping and choose from Word Wrap, Trim, and Auto options.
Interactivity
Features
HitTest
Provide interactive features like clickable regions and drill-downs with the hitTest method, which takes a point and returns it to the nearest chart element.
Line Markers
Use markers to show information about a specific point on your chart.
Selection
Select a single data point or an entire data series in your chart.
Range Selector
With the RangeSelector component 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. This type of feature is common in stock charts where you can see the overall trend and select a smaller range for deeper analysis.
Tooltips
Tooltips generally display a legend's name as well as the X and Y values of a selected point.
Data and Analysis
Series Binding
Specify the data source at the chart or series level. This allows multiple data sources to populate a single chart.
Scaling
Use logarithmic scaling to spread data that is clustered around the origin. This is common in several financial and economic data sets.
Trendlines
Use trend lines to show trends in data and make predictions.
Multiple Plot Areas
Create different plot areas for different series within a single chart area.
FlexChart Formatting and Customization
Animation
The Blazor chart component supports built-in animation for loading and updating data.
Color Palettes
FlexChart includes over 20 built-in color palettes, or you can provide your own custom colors with support for opacity.
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.
Gridlines & Tick Marks
Customize the visibility and appearance of horizontal and vertical gridlines. FlexChart supports both major and minor gridlines on each axis. For a clean chart, most gridlines are disabled by default.
Using tools within the Microsoft ecosystem, ComponentOne Studio has extended charting capabilities with advanced features such as trend lines and scaling.
Dave Mendlen, Senior Director of Developer Marketing - Microsoft Corp.
