SciChart.Blazor 5.0.178-alpha.2

SciChart.Blazor Nuget Readme

SciChart.Blazor is Blazor component library that wraps SciChart.js — a high-performance WebGL charting library — enabling its use in Blazor Server and Blazor WebAssembly applications.

Current version of nuget package supports only 2D charts, Polar Charts and Pie Charts are not supported at the moment. The package is based on SciChart.js version 5.0.178. All charts that are in the library support initial creation and data append. However, only FastLineRenderableSeries has been well tested at the moment.

Getting Started

1. Install the package

dotnet add package SciChart.Blazor

2. Add the namespace import

In _imports.razor:

@using SciChart.Blazor.Components

3. Add a chart to your page

@page "/my-chart"

<SciChartSurface HeightAspect="2" WidthAspect="3">
    <XAxes>
        <NumericAxis />
    </XAxes>
    <YAxes>
        <NumericAxis />
    </YAxes>
    <FastLineRenderableSeries Stroke="#FF6600" StrokeThickness="2" SeriesName="My Series">
        <XyDataSeries XValues="@(new double[] { 0, 1, 2, 3, 4 })"
                      YValues="@(new double[] { 0, 1, 0.5, 1.5, 1 })" />
    </FastLineRenderableSeries>
    <MouseWheelZoomModifier />
    <ZoomPanModifier />
</SciChartSurface>

Supported Chart Types

Axis Types

• NumericAxis
• CategoryAxis
• DateTimeNumericAxis

Chart Modifiers (Interactions)

• MouseWheelZoomModifier — scroll to zoom
• ZoomPanModifier — drag to pan
• RubberBandXyZoomModifier — drag to zoom a region
• RolloverModifier — cursor tooltip
• ZoomExtentsModifier — double-click to fit chart
• XAxisDragModifier / YAxisDragModifier — drag axes to pan/scale
• DataPointSelectionModifier — click to select data points
• LegendModifier — interactive chart legend

Appending Data at Runtime

Get a reference to a data series and call AppendRange:

<FastLineRenderableSeries Stroke="blue">
    <XyDataSeries @ref="_series" />
</FastLineRenderableSeries>

@code {
    XyDataSeries? _series;

    async Task AppendData()
    {
        await _series!.AppendRange(
            new double[] { 5, 6 },
            new double[] { 1.2, 0.8 }
        );
    }
}

Events

<SciChartSurface OnSciChartSurfaceRendered="OnRendered">
    <XAxes>
        <NumericAxis OnVisibleRangeChanged="OnRangeChanged" />
    </XAxes>
    ...
</SciChartSurface>

Requirements

• .NET 8.0
• A valid SciChart license for production use

License

Copyright (c) SciChart Ltd. All rights reserved.

See the SciChart licensing page for details.