Blazor Chart Performance

    Blazor charts are optimized for high performance of rendering millions of data points and updating them every few milliseconds. However, there are several chart features that affect performance of the chart and they should be considered when optimizing performance in your application. This topic will guide you to make Blazor charts work as fast as possible in your application.

    Blazor Chart Performance Examples

    The following examples demonstrates two high performance scenarios of Blazor charts.

    Blazor Chart with High-Frequency

    In High-Frequency scenario, the Blazor Charts can render data items that are updating in real time or at specified milliseconds intervals. You will experience no lag, no screen-flicker, and no visual delays, even as you interact with the chart on a touch-device. The following sample demonstrates the IgbCategoryChart in High-Frequency scenario.

    Blazor Chart with High-Volume

    In High-Volume scenario, the Blazor Charts can render 1 million of data points while the chart keeps providing smooth performance when end-users tries zooming in/out or navigating chart content. The following sample demonstrates the IgbCategoryChart in High-Volume scenario.

    General Performance Guidelines

    This section lists guidelines and chart features that add to the overhead and processing updates in the Blazor charts.

    Data Size

    If you need to plot data sources with large number of data points (e.g. 10,000+), we recommend using Blazor IgbDataChart with one of the following type of series which where designed for specially for that purpose.

    Data Structure

    Although Blazor charts support rendering of multiple data sources by binding array of arrays of data points to DataSource property. It is much faster for charts if multiple data sources are flatten into single data source where each data item contains multiple data columns rather just one data column. For example:

    this.CategoryChart.DataSource = FlattenDataSource.Create();
    this.FinancialChart.DataSource = FlattenDataSource.Create();
    
    public static class FlattenDataSource
    {
        public static List<FlattenDataItem> Create() {
            var data = new List<FlattenDataItem>() {
                new FlattenDataItem { Year = "1996", USA = 148, CHN = 110 },
                new FlattenDataItem { Year = "2000", USA = 142, CHN = 115 },
            };
            return data;
        }
        public class FlattenDataItem
        {
            public int USA { get; set; }
            public int CHN { get; set; }
            public int Year { get; set; }
        }
    }
    // instead of this data structure:
    public static class MultiDataSources
    {
        public static List<MultiDataItem> Create() {
            var dataSource1 = new List<MultiDataItem>() {
                new MultiDataItem { Year = "1996", Value = 148 },
                new MultiDataItem { Year = "2000", Value = 142 },
            };
            var dataSource2 = new List<MultiDataItem>() {
                new MultiDataItem { Year = "1996", Value = 110 },
                new MultiDataItem { Year = "2000", Value = 115 },
            };
            var multipleSources = new List<List<MultiDataItem>>();
            multipleSources.Add(dataSource1);
            multipleSources.Add(dataSource2);
            return multipleSources;
        }
        public class MultiDataItem
        {
            public int Value { get; set; }
            public int Year { get; set; }
        }
    }
    

    Data Filtering

    Blazor IgbCategoryChart and the IgbFinancialChart controls have built-in data adapter that analyzes your data and generates chart series for you. However, it works faster if you use IncludedProperties and ExcludedProperties to filter only those data columns that you actually want to render. For example,

    this.Chart.IncludedProperties = new string[] { "Year", "USA", "RUS" };
    this.Chart.ExcludedProperties = new string[] { "CHN",  "FRN", "GER" };
    

    Chart Performance Guidelines

    Chart Types

    Simpler chart types such as Line Chart have faster performance than using Spline Chart because of the complex interpolation of spline lines between data points. Therefore, you should use ChartType property of Blazor IgbCategoryChart or the IgbFinancialChart control to select type of chart that renders faster. Alternatively, you can change a type of series to a faster series in Blazor IgbDataChart control.

    The following table lists chart types in order from the fastest performance to slower performance in each group of charts:

    Chart Group Chart Type
    Pie Charts - Pie Chart
    - Donut Chart
    - Radial Pie Chart
    Line Charts - Category Line Chart
    - Category Spline Chart
    - Step Line Chart
    - Radial Line Chart
    - Polar Line Chart
    - Scatter Line Chart
    - Scatter Polyline Chart (*)
    - Scatter Contour Chart
    - Stacked Line Chart
    - Stacked 100% Line Chart
    Area Charts - Category Area Chart
    - Step Area Chart
    - Range Area Chart
    - Radial Area Chart
    - Polar Area Chart
    - Scatter Polygon Chart (*)
    - Scatter Area Chart
    - Stacked Area Chart
    - Stacked 100% Area Chart
    Column Charts - Column Chart
    - Bar Chart
    - Waterfall Chart
    - Range Column Chart
    - Radial Column Chart
    - Stacked Column Chart
    - Stacked Bar Chart
    - Stacked 100% Column Chart
    - Stacked 100% Bar Chart
    Spline Charts - Category Spline Chart
    - Polar Spline Chart
    - Scatter Spline Chart
    - Stacked Spline Chart
    - Stacked 100% Spline Chart
    Point Charts - Category Point Chart
    - Scatter HD Chart
    - Scatter Marker Chart
    - Scatter Bubble Chart
    - Polar Marker Chart
    Financial Charts - Stock Chart in Line Mode
    - Stock Chart in Column Mode
    - Stock Chart in Bar Mode
    - Stock Chart in Candle Mode
    - Stock Chart with Overlays
    - Stock Chart with Zoom Pane
    - Stock Chart with Volume Pane
    - Stock Chart with Indicator Pane
    Scatter Charts - Scatter HD Chart
    - Scatter Marker Chart
    - Scatter Line Chart
    - Scatter Bubble Chart
    - Scatter Spline Chart
    - Scatter Area Chart
    - Scatter Contour Chart
    - Scatter Polyline Chart (*)
    - Scatter Polygon Chart (*)
    Radial Charts - Radial Line Chart
    - Radial Area Chart
    - Radial Pie Chart
    - Radial Column Chart
    Polar Charts - Polar Marker Chart
    - Polar Line Chart
    - Polar Area Chart
    - Polar Spline Chart
    - Polar Spline Area Chart
    Stacked Charts - Stacked Line Chart
    - Stacked Area Chart
    - Stacked Column Chart
    - Stacked Bar Chart
    - Stacked Spline Chart
    - Stacked 100% Line Chart
    - Stacked 100% Area Chart
    - Stacked 100% Column Chart
    - Stacked 100% Bar Chart
    - Stacked 100% Spline Chart

    * Note that the Scatter Polygon Chart and Scatter Polyline Chart have better performance than rest of charts if you have a lot of data sources bound to the chart. For more info, see Series Collection section. Otherwise, other chart types are faster.

    Chart Animations

    Enabling Chart Animations will slightly delay final rendering series in the Blazor charts while they play transition-in animations.

    Chart Annotations

    Enabling Chart Annotations such as the Callout Annotations, Crosshairs Annotations, or Final Value Annotations, will slightly decrease performance of the Blazor chart.

    Chart Highlighting

    Enabling the Chart Highlighting will slightly decrease performance of the Blazor chart.

    Chart Legend

    Adding a legend to the Blazor charts might decrease performance if titles of series or data items mapped to legend are changing often at runtime.

    Chart Markers

    In Blazor charts, Markers are especially expensive when it comes to chart performance because they add to the layout complexity of the chart, and perform data binding to obtain certain information. Also, markers decrease performance when there are a lot of data points or if there are many data sources bound. Therefore, if markers are not needed, they should be removed from the chart.

    This code snippet shows how to remove markers from the Blazor charts.

    // on CategoryChart or FinancialChart
    this.Chart.MarkerTypes.Clear();
    this.Chart.MarkerTypes.Add(MarkerType.None);
    
    // on LineSeries of DataChart
    this.LineSeries.MarkerType = MarkerType.None;
    

    Chart Resolution

    Setting the Resolution property to a higher value will improve performance, but it will lower the graphical fidelity of lines of plotted series. As such, it can be increased up until the fidelity is unacceptable.

    This code snippet shows how to decrease resolution in the Blazor charts.

    // on CategoryChart or FinancialChart:
    this.Chart.Resolution = 10;
    this.Chart.Resolution = 10;
    
    // on LineSeries of DataChart:
    this.LineSeries.Resolution = 10;
    

    Chart Overlays

    Enabling Chart Overlays will slightly decrease performance of the Blazor chart.

    Chart Trendlines

    Enabling Chart Trendlines will slightly decrease performance of the Blazor chart.

    Axis Types

    Usage of x-axis with DateTime support is not recommended if spaces between data points, based on the amount of time span between them, are not important. Instead, ordinal/category axis should be used because it is more efficient in the way it coalesces data. Also, ordinal/category axis doesn’t perform any sorting on the data like the time-based x-axis does.

    [!Note] The IgbCategoryChart already uses ordinal/category axis so there is no need to change its properties.

    This code snippet shows how to ordinal/category x-axis in the IgbFinancialChart and IgbDataChart controls.

    <IgbFinancialChart XAxisMode="FinancialChartXAxisMode.Ordinal"/>
    
    <IgbDataChart >
        <IgbCategoryXAxis Label="Time" />
    </IgbDataChart>
    

    Axis Intervals

    By default, Blazor charts will automatically calculate YAxisInterval based on range of your data. Therefore, you should avoid setting axis interval especially to a small value to prevent rendering of too many of axis gridlines and axis labels. Also, you might want to consider increasing YAxisInterval property to a larger value than the automatically calculated axis interval if you do not need many axis gridlines or axis labels.

    [!Note] We do not recommend setting axis minor interval as it will decrease chart performance.

    This code snippet shows how to set axis major interval in the Blazor charts.

    <IgbCategoryChart  XAxisInterval="5" YAxisInterval="50"/>
    
    <IgbFinancialChart XAxisInterval="5" YAxisInterval="50"/>
    
    <IgbDataChart >
        <IgbCategoryXAxis Name="xAxis" Interval="5" />
        <IgbNumericYAxis  Name="yAxis" Interval="50" />
    </IgbDataChart>
    

    Axis Scale

    Setting the YAxisIsLogarithmic property to false is recommended for higher performance, as fewer operations are needed than calculating axis range and values of axis labels in logarithmic scale.

    Axis Labels Visibility

    In the same way as Markers, axis labels are also expensive because they use templates and bindings, and may have their data context changed often. If labels are not used, they should be hidden or their interval should be increased to decrease number of axis labels.

    This code snippet shows how to hide axis labels in the Blazor charts.

    <IgbCategoryChart
        XAxisLabelVisibility="Visibility.Collapsed"
        YAxisLabelVisibility="Visibility.Collapsed">
    </IgbCategoryChart>
    
    <IgbFinancialChart
        XAxisLabelVisibility="Visibility.Collapsed"
        YAxisLabelVisibility="Visibility.Collapsed">
    </IgbFinancialChart>
    
    <IgbDataChart>
        <IgbCategoryXAxis Name="xAxis" LabelVisibility="Visibility.Collapsed" />
        <IgbNumericYAxis  Name="yAxis" LabelVisibility="Visibility.Collapsed" />
    </IgbDataChart>
    

    Axis Labels Abbreviation

    Although, the Blazor charts support abbreviation of large numbers (e.g. 10,000+) displayed in axis labels when YAxisAbbreviateLargeNumbers is set to true. We recommend, instead pre-processing large values in your data items by dividing them a common factor and then setting YAxisTitle to a string that represents factor used used to abbreviate your data values.

    This code snippet shows how to set axis title in the Blazor charts.

    <IgbCategoryChart  YAxisTitle="In millions of Dollars"/>
    
    <IgbFinancialChart YAxisTitle="In millions of Dollars"/>
    
    <IgbDataChart >
        <IgbNumericYAxis Title="In millions of Dollars" />
    </IgbDataChart>
    

    Axis Labels Extent

    At runtime, the Blazor charts adjust extent of labels on y-axis based on a label with longest value. This might decrease chart performance if range of data changes and labels need to be updated often. Therefore, it is recommended to set label extent at design time in order to improve chart performance.

    The following code snippet shows how to set a fixed extent for labels on y-axis in the Blazor charts.

    <IgbCategoryChart  XAxisLabelExtent="50" YAxisLabelExtent="50"/>
    
    <IgbFinancialChart XAxisLabelExtent="50" YAxisLabelExtent="50"/>
    
    <IgbDataChart>
        <IgbCategoryXAxis Name="xAxis" LabelExtent="50" />
        <IgbNumericYAxis  Name="yAxis" LabelExtent="50" />
    </IgbDataChart>
    

    Axis Other Visuals

    Enabling additional axis visuals (e.g. axis titles) or changing their default values might decrease performance in the Blazor charts.

    For example, changing these properties on the IgbCategoryChart or IgbFinancialChart control:

    Axis Visual X-Axis Properties Y-Axis Properties
    All Axis Visual XAxisInterval
    XAxisMinorInterval
    YAxisInterval
    YAxisMinorInterval
    Axis Tickmarks XAxisTickStroke
    XAxisTickStrokeThickness
    XAxisTickLength
    YAxisTickStroke
    YAxisTickStrokeThickness
    YAxisTickLength
    Axis Major Gridlines XAxisMajorStroke
    XAxisMajorStrokeThickness
    YAxisMajorStroke
    YAxisMajorStrokeThickness
    Axis Minor Gridlines XAxisMinorStroke
    XAxisMinorStrokeThickness
    YAxisMinorStroke
    YAxisMinorStrokeThickness
    Axis Main Line XAxisStroke
    XAxisStrokeThickness
    YAxisStroke
    YAxisStrokeThickness
    Axis Titles XAxisTitle
    XAxisTitleAngle
    YAxisTitle
    YAxisTitleAngle
    Axis Strips XAxisStrip
    YAxisStrip

    Or changing properties of an IgbAxis in the IgbDataChart control:

    Axis Visual Axis Properties
    All Axis Visuals Interval, MinorInterval
    Axis Tickmarks TickStroke , TickStrokeThickness, TickLength
    Axis Major Gridlines MajorStroke, MajorStrokeThickness
    Axis Minor Gridlines MinorStroke, MinorStrokeThickness
    Axis Main Line Stroke, StrokeThickness
    Axis Titles ChartTitle, TitleAngle
    Axis Strips Strip

    Performance in Financial Chart

    In addition to above performance guidelines, the Blazor IgbFinancialChart control has the following unique features that affect performance.

    Y-Axis Mode

    Setting the YAxisMode option to Numeric is recommended for higher performance, as fewer operations are needed than using PercentChange mode.

    Chart Panes

    Setting a lot of panes using IndicatorTypes and OverlayTypes options, might decrease performance and it is recommended to use a few financial indicators and one financial overlay.

    Zoom Slider

    Setting the ZoomSliderType option to None will improve chart performance and enable more vertical space for other indicators and the volume pane.

    Volume Type

    Setting the VolumeType property can have the following impact on chart performance:

    • None - is the least expensive since it does not display the volume pane.
    • Line - is more expensive volume type to render and it is recommended when rendering a lot of data points or when plotting a lot of data sources.
    • Area - is more expensive to render than the Line volume type.
    • IgbColumn - is more expensive to render than the Area volume type and it is recommended when rendering volume data of 1-3 stocks.

    Performance in Data Chart

    In addition to the general performance guidelines, the Blazor IgbDataChart control has the following unique features that affect performance.

    Axes Collection

    Adding too many axis to the Axes collection of the IgbDataChart control will decrease chart performance and we recommend Sharing Axes between series.

    Series Collection

    Also, adding a lot of series to the Series collection of the Blazor IgbDataChart control will add overhead to rendering because each series has its own rendering canvas. This is especially important if you have more than 10 series in the Data Chart. We recommend combining multiple data sources into flatten data source (see Data Structure section) and then using conditional styling feature of the following series:

    Slower Performance Scenario Faster Scenario with Conditional Styling
    10+ of IgbLineSeries Single IgbScatterLineSeries
    20+ of IgbLineSeries Single IgbScatterPolylineSeries
    10+ of IgbScatterLineSeries Single IgbScatterPolylineSeries
    10+ of IgbPointSeries Single IgbScatterSeries
    20+ of IgbPointSeries Single IgbHighDensityScatterSeries
    20+ of IgbScatterSeries Single IgbHighDensityScatterSeries
    10+ of IgbAreaSeries Single IgbScatterPolygonSeries
    10+ of IgbColumnSeries Single IgbScatterPolygonSeries

    Additional Resources

    You can find more information about related chart types in these topics:

    API References

    The following table lists API members mentioned in above sections: