Blazorise Chart Zoom component
Zoom and pan charts with the Chart.js zoom plugin.
📊 The Community License has a limitation of 10 points per chart. Unlock full access to all features with
our premium plans.
Zoom is made possible with the help of chartjs-plugin-zoom.
To use Chart Zoom, install the Blazorise.Charts and Blazorise.Charts.Zoom packages.
Installation
NuGet
Install the charts extension and plugin from NuGet.Install-Package Blazorise.Charts Install-Package Blazorise.Chart.Zoom
Imports
In your main _Imports.razor add:
@using Blazorise.Charts
@using Blazorise.Charts.Zoom
Examples
Basic
<Button Color="Color.Primary" Clicked="@(async () => await HandleRedraw())">Redraw</Button> <LineChart @ref="lineChart" TItem="double"> <ChartZoom TItem="double" Options="" /> </LineChart>
@code { LineChart<double> lineChart; protected override async Task OnAfterRenderAsync( bool firstRender ) { if ( firstRender ) { await HandleRedraw(); } } async Task HandleRedraw() { await lineChart.Clear(); await lineChart.AddLabelsDatasetsAndUpdate( Labels, GetLineChartDataset() ); } LineChartDataset<double> GetLineChartDataset() { return new LineChartDataset<double> { Label = "# of randoms", Data = RandomizeData(), BackgroundColor = BackgroundColors, BorderColor = BorderColors, Fill = true, PointRadius = 3, CubicInterpolationMode = "monotone", }; } private static string[] Labels = { "A", "B", "C", "D", "E", "F" }; private static List<string> BackgroundColors = new() { ChartColor.FromRgba( 76, 110, 245, 0.25f ), // Indigo ChartColor.FromRgba( 18, 184, 134, 0.25f ), // Teal ChartColor.FromRgba( 245, 159, 0, 0.25f ), // Amber ChartColor.FromRgba( 240, 62, 62, 0.25f ), // Red ChartColor.FromRgba( 132, 94, 247, 0.25f ), // Purple ChartColor.FromRgba( 34, 139, 230, 0.25f ) // Blue }; private static List<string> BorderColors = new() { ChartColor.FromRgba( 76, 110, 245, 1f ), // Indigo ChartColor.FromRgba( 18, 184, 134, 1f ), // Teal ChartColor.FromRgba( 245, 159, 0, 1f ), // Amber ChartColor.FromRgba( 240, 62, 62, 1f ), // Red ChartColor.FromRgba( 132, 94, 247, 1f ), // Purple ChartColor.FromRgba( 34, 139, 230, 1f ) // Blue }; List<double> RandomizeData() { var r = new Random( DateTime.Now.Millisecond ); return new List<double> { r.Next( 3, 50 ) * r.NextDouble(), r.Next( 3, 50 ) * r.NextDouble(), r.Next( 3, 50 ) * r.NextDouble(), r.Next( 3, 50 ) * r.NextDouble(), r.Next( 3, 50 ) * r.NextDouble(), r.Next( 3, 50 ) * r.NextDouble() }; } private ChartZoomPluginOptions lineChartZoomOptions = new() { Zoom = new() { Mode = "y", Wheel = new() { Enabled = true, }, Pinch = new() { Enabled = true }, Drag = new() { Enabled = true } }, Limits = new() { Y = new() { Min = 0, Max = 50, MinRange = 25 } }, Transition = new ChartZoomTransitionOptions() { Animation = new ChartAnimation() { Duration = 1000, Easing = "easeOutCubic" } } }; }
API
Options
ChartZoomPluginOptions
| Name | Description | Type | Default |
|---|---|---|---|
Zoom |
Zoom options | ChartZoomOptions | |
Pan |
Pan options | ChartZoomPanOptions | |
Limits |
Limits options | ChartZoomLimitsOptions | |
Transition |
Transition options | ChartZoomTransition |
ChartZoomOptions
| Name | Description | Type | Default |
|---|---|---|---|
Wheel |
The Wheel options | ChartZoomWheel | null |
Drag |
The Drag options | ChartZoomDrag | null |
Pinch |
The Pinch options | ChartZoomPinch | null |
Mode |
Allowed zoom directions | string | null |
ScaleMode |
Which of the enabled zooming directions should only be available when the mouse cursor is over a scale for that axis | string | null |
ChartZoomWheelOptions
| Name | Description | Type | Default |
|---|---|---|---|
Enabled |
Enable zooming via mouse wheel | bool? | null |
Speed |
Factor of zoom speed via mouse wheel | double? | null |
ModifierKey |
Modifier key required for zooming via mouse wheel | string | null |
ChartZoomDragOptions
| Name | Description | Type | Default |
|---|---|---|---|
Enabled |
Enable drag-to-zoom | bool? | null |
BackgroundColor |
Fill color | string | null |
BorderColor |
Stroke color | string | null |
BorderWidth |
Stroke width | double? | null |
Threshold |
Minimal zoom distance required before actually applying zoom | double? | null |
ModifierKey |
Modifier key required for drag-to-zoom | string | null |
ChartZoomPinchOptions
| Name | Description | Type | Default |
|---|---|---|---|
Enabled |
Enable zooming via pinch | bool? | null |
ChartZoomPanOptions
| Name | Description | Type | Default |
|---|---|---|---|
Enabled |
Enable panning | bool? | null |
Mode |
Allowed panning directions | string | null |
ModifierKey |
Modifier key required for panning with mouse | string | null |
ScaleMode |
Enable panning over a scale for that axis (regardless of mode) | double? | null |
Threshold |
Minimal pan distance required before actually applying pan | double? | null |
ChartZoomLimitsOptions
| Name | Description | Type | Default |
|---|---|---|---|
X |
Limits for x-axis | ChartZoomScaleLimits | null |
Y |
Limits for y-axis | ChartZoomScaleLimits | null |
ChartZoomScaleLimitsOptions
| Name | Description | Type | Default |
|---|---|---|---|
Min |
Minimum allowed value for scale.min | double? | null |
Max |
Maximum allowed value for scale.max | double? | null |
MinRange |
Minimum allowed range (max - min). This defines the max zoom level. | double? | null |