SciChartBlazor 1.5.0
See the version list below for details.
dotnet add package SciChartBlazor --version 1.5.0
NuGet\Install-Package SciChartBlazor -Version 1.5.0
<PackageReference Include="SciChartBlazor" Version="1.5.0" />
paket add SciChartBlazor --version 1.5.0
#r "nuget: SciChartBlazor, 1.5.0"
// Install SciChartBlazor as a Cake Addin
#addin nuget:?package=SciChartBlazor&version=1.5.0
// Install SciChartBlazor as a Cake Tool
#tool nuget:?package=SciChartBlazor&version=1.5.0
SciChartBlazor
A Blazor wrapper for SciChart JS
Version | Package | Description |
---|---|---|
SciChartBlazor | .NET 6 |
Licensing and Trials SciChart no longer requires a license or a trial for community use. You can find details here:
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, 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 if you need one) in Project.cs, using the following code:
builder.Services.AddSciChart(options =>
{
options.RuntimeLicenseKey = "LICENSE_HERE"; // if you're using the community license you can leave this bit out
});
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.
Product | Versions Compatible and additional computed target framework versions. |
---|---|
.NET | net6.0 is compatible. net6.0-android was computed. net6.0-ios was computed. net6.0-maccatalyst was computed. net6.0-macos was computed. net6.0-tvos was computed. net6.0-windows was computed. net7.0 was computed. net7.0-android was computed. net7.0-ios was computed. net7.0-maccatalyst was computed. net7.0-macos was computed. net7.0-tvos was computed. net7.0-windows was computed. net8.0 was computed. net8.0-android was computed. net8.0-browser was computed. net8.0-ios was computed. net8.0-maccatalyst was computed. net8.0-macos was computed. net8.0-tvos was computed. net8.0-windows was computed. |
-
net6.0
- Microsoft.AspNetCore.Components.Web (>= 6.0.1)
NuGet packages
This package is not used by any NuGet packages.
GitHub repositories
This package is not used by any popular GitHub repositories.
Version | Downloads | Last updated |
---|---|---|
1.5.3 | 129 | 3/4/2024 |
1.5.2 | 131 | 1/16/2024 |
1.5.1 | 150 | 9/27/2023 |
1.5.0 | 132 | 8/28/2023 |
1.1.0 | 211 | 4/14/2023 |
1.0.0 | 362 | 11/15/2022 |
0.1.4-alpha | 154 | 8/5/2022 |
0.1.2-alpha | 135 | 8/4/2022 |
0.1.1-alpha | 143 | 7/1/2022 |