Blazor Charts - Tutorial Videos

Learn how easily you can create and configure Syncfusion Blazor Charts in a Blazor Server App using Visual Studio 2019. In this video, you will learn how to add a simple Blazor Charts to a Blazor Server App. You will see how to populate list data and set series types to Charts. You will also learn how to add legends and enable data labels as well as tooltips to Blazor Charts.

Download Example: Getting Started with Blazor Charts

Learn how easily you can create and configure Syncfusion Blazor accumulation charts in a Blazor WebAssembly app using Visual Studio 2019. In this video, you will learn how to add a simple Blazor accumulation chart to a Blazor WebAssembly app. You will see how to populate list data and set series types to charts. You will also learn how to add legends and enable data labels and tooltips in Blazor accumulation charts.

Download Example: Getting Started with Blazor Circular and Triangular Charts

Learn how easily you can create and configure Syncfusion Blazor financial charts in a Blazor WebAssembly app using Visual Studio 2019. In this video, you will see how to render the Blazor financial chart types, namely the highlow, openhighlowclose, and candle charts with their built-in features. You will also learn how these charts visually indicate stock price variations with various data elements like high, low, open, close, and volume.

Download Example: Getting Started with Blazor Financial Charts

Learn how easily you can create and configure Syncfusion Blazor polar and radar charts in a Blazor WebAssembly app using Visual Studio 2019. In this video, you will see how to render the Blazor radar and polar charts with basic features like data markers, series plotting types, and tooltips.

Download Example: Getting Started with Blazor Polar and Radar Charts

See how easily you can customize Blazor chart axis labels to enhance their appearance. In this video, you will learn how to customize the chart axis labels with properties like smart axis labels, multilevel labels, and edge label placement. We will show you how to trim the axis label width and break axis labels into multiple lines. You will learn how to position the axis labels.

Download Example: Customize Axis Labels in Blazor Charts

Learn how easily you can add a logarithmic axis to Syncfusion Blazor Charts and customize it with various built-in options. In this video, you will learn how to display higher-order and lower-order magnitude values in the vertical axis instead of numeric values by using a logarithmic axis. You will see how to use available axis customization options like setting custom ranges and intervals for the y-axis as well as how to display the y-axis values with different log base values. You will also learn how to format axis labels.

Download Example: Customize the Logarithmic Axis in Blazor Charts

Learn how easily you can add a category axis to Syncfusion Blazor Charts and customize it with various built-in options. In this video, you will learn how to plot non-chronological data in a Blazor Chart with a category axis. You will see how to use available axis customization options like setting custom ranges and intervals, how to position labels on or between the ticks, and how to add the indexed category axis.

Download Example: Customize the Category Axis in Blazor Charts

Learn how easily you can add a numeric axis to Syncfusion Blazor charts and customize it with various built-in options. In this video, you will learn how to display numeric labels on the horizontal axis by using a double axis, along with other axis customization options. You will get to know the numeric axis properties one by one with simple scenarios: how to display data items based on the custom x-axis range values and custom intervals; how to format the numeric value labels with custom formal or globalized formats; and how to add range padding to the horizontal axis.

Download Example: Customize the Numeric Axis in Blazor Charts

Learn how easily you can add a date-time axis to Syncfusion Blazor charts and customize it with various built-in options. In this video, you will learn how to display date-time values instead of numeric intervals on the horizontal axis using the date-time axis, along with other axis customization options. You will get to know the date-time axis properties with simple scenarios: how to display date-time values based on the custom x-axis range values and custom intervals, and how to format the date-time value labels with custom formal or globalized formats. You will also learn how to display date-time values with nonlinear interval values in the horizontal axis using the date-time category axis.

Download Example: Customize the Date-Time Axis in Blazor Charts

Learn how easily you can customize a Blazor chart axis to make it more informative. In this video, you will learn how to customize a chart axis with properties like axis crossing, tick lines, and grid lines. You will learn how to add multiple axes to a chart, place an axis opposite from its original position, and inverse the chart axis to display the highest value of the axis near the origin.

Download Example: Customize Blazor Charts Axes

Learn how easily you can add zoom and pan effects to Syncfusion Blazor Charts. In this video, you will learn how to make Blazor Charts more interactive by adding zooming and panning features. You will see how to zoom a specific chart area using different zooming modes. Also, you will learn how to customize toolbar options and how to navigate zoomed areas using the panning option.

Download Example: Zooming and Panning Options in Blazor Charts

Learn how easily you can add a crosshair and trackball to Syncfusion Blazor Charts. In this video, you will also see how to customize a crosshair tooltip.

Download Example: Enable Crosshairs and Trackball in Blazor Charts

Learn how easily you can add a tooltip to Syncfusion Blazor Charts. In this video, you will learn how to make Blazor Charts more interactive by adding tooltips. You will see how to format the tooltip content with both HTML and custom template values, and how to enhance the look of the tooltips by adding borders.

Download Example: Show Informative Tooltips in Blazor Charts

Learn how easily you can add annotations to Syncfusion Blazor Charts. In this video, you will learn how to add image annotations to Blazor charts. You will also see how to position images using the coordinateUnits property with pixel or point values.

Download Example: Add Annotations to Blazor Charts

Learn how easily you can add a legend to Syncfusion Blazor Charts and customize them with various built-in options. In this video, you will learn how to display information about the series in a Blazor chart using a legend, and how to position and align the legend. Also, you will learn how to change the legend icons, how to highlight the selected series in the chart, and finally how to animate the chart and customize the size of the legend.

Download Example: Add Legends to Blazor Charts

In this video, learn how to create and customize line charts in the Syncfusion Blazor Charts component.

Download Example: Customize the Blazor Line Chart

Discover how to customize the column chart by adjusting the axis labels, styling the columns, and incorporating interactive features.

Download Example: Customize the Blazor Column Chart

Learn how to create and customize multi series charts using the Syncfusion Blazor Charts component. Discover how to adjust axis labels, style columns, and incorporate interactive features to enhance the charts.

Download Example: Customize the Blazor Multi Series Chart