SciChartBlazor

A Blazor wrapper for SciChart JS

Version	Package	Description
	SciChartBlazor	.NET 6

Licensing and Trials SciChart requires a license or a trial. You can obtain a license here:

Licensing SciChart.js

Please Contribute!

This is an open source project that welcomes contributions/suggestions/bug reports from those who use it. If you have any ideas on how to improve the library, please post an issue here on GitHub.

Using SciChartBlazor

First either install the Nuget Package (currently in alpha), or pull down the repository and reference the SciChartBlazor project directly.

For Wasm & Server side you need to register the ScichartBlazor Service (and add a license) in Project.cs, using the following code:

builder.Services.AddSciChart(options =>
{
    options.RuntimeLicenseKey = "LICENSE_HERE";
});

Then add a reference to the sciChartBlazorJson.js file in either index.html (for Wasm) or _Layout.cshtml (Server side):

<script async src="_content/SciChartBlazor/SciChart/sciChartBlazorJson.js"></script>

Adding a chart to a razor page

Start by adding a div container for the chart:

<div id="@Id" @ref="_chart" style="height:600px" />

id and ref are required and can be set up in the code{} or code-behind. The chart builder class should be Initialized inside OnAfterRenderAsync:

        private string Id { get; set; } = "C" + Guid.NewGuid().ToString();

        private protected ElementReference _chart;

        SciChartBuilder _chartBuilder = default!;

        protected override async Task OnAfterRenderAsync(bool firstRender)
        {
            if (firstRender)
            {
                //Create the chart
                _chartBuilder = new SciChartBuilder(_chart, JSRuntime, sciChartBlazorService);
                await _chartBuilder.CreateChart();
            }
            await base.OnAfterRenderAsync(firstRender);
        }

After initialization you can start building your chart. i.e.:

Adding Modifiers:

            List<ModifierBase> modifiers = new()
            {
                new SciChartBlazor.Modifiers.RubberBandXyZoomModifier
                {
                    IsAnimated = true,
                    AnimationDuration = 400,
                    Fill = "#FFFFFF33",
                    Stroke = "red",
                    StrokeThickness = 1,
                    XyDirection = XyDirection.XyDirection
                },
                new SciChartBlazor.Modifiers.ZoomExtentsModifier
                {
                    IsAnimated = true,
                    AnimationDuration = 400
                },
                new MouseWheelZoomModifier(),
                new ZoomPanModifier() { ExecuteOn = ExecuteOn.MouseMiddleButton }
            };

            await _chartBuilder.AddModifiers(modifiers);

Creating Axis

            var XAxis = new NumericAxis()
            {
                AxisTitle = "X",
                GrowBy = new SciChartNumberRange(0.05, 0.05),
                AxisTitleStyle = new Styles.AxisTitleStyle()
                {
                    FontSize = 24,
                    Color = "black",
                },
                MajorGridLineStyle = new Styles.MajorGridLineStyle()
                {
                    StrokeThickness = 0
                },
                MinorGridLineStyle = new Styles.MinorGridLineStyle()
                {
                    StrokeThickness = 0
                },
                VisibleRangeLimit = new SciChartNumberRange(0, 1000),
                AxisBorder = new Styles.AxisBorder() { BorderTop = 2}

            };
            var YAxis = new NumericAxis()
            {
                AxisTitle = "Y",
                AxisTitleStyle = new Styles.AxisTitleStyle()
                {
                    FontSize = 24,
                    Color = "black",
                },
                AxisAlignment = AxisAlignment.Left,
                AutoRange = AutoRange.Always,
                LabelFormat = NumericFormat.Decimal,
                MajorGridLineStyle = new Styles.MajorGridLineStyle()
                {
                    StrokeThickness = 0
                },
                MinorGridLineStyle = new Styles.MinorGridLineStyle()
                {
                    StrokeThickness = 0
                },
                AxisBorder = new Styles.AxisBorder() { BorderRight = 2 }
            };

            //currently have to do seperately
            await _chartBuilder.AddAxis(XAxis, AxisType.X);
            await _chartBuilder.AddAxis(YAxis, AxisType.Y);

Adding a series:

            double[] x = new double[1000];
            double[] y = new double[1000];

            for (int i = 0; i < 1000; i++)
            {
                x[i] = (double)i;
                y[i] = Math.Sin(i * 0.2) * 100;
            }

            XyDataSeries<double, double> dataSeries = new(x, y) { DataSeriesName = "Data", ContainsNaN = false, DataIsSortedInX = true };
            FastLineRenderableSeries<double, double> series = new(dataSeries)
            {
                Stroke = "black",
                StrokeThickness = 1
            };

            await _chartBuilder.AddSeries(series);

Thank you!

A special thank you to Matt Roby (@mtroby) & Ryan Fellers @rfellers who are major contributors to this project.

andyb1979/SciChartBlazor

SciChartBlazor

Please Contribute!

Using SciChartBlazor

Adding a chart to a razor page

Thank you!