Added in v1.6
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.Hide code example
Copy code
dotnet add package Blazorise.Charts dotnet add package Blazorise.Chart.Zoom
Imports
In your main _Imports.razor add:
@using Blazorise.Charts
@using Blazorise.Charts.Zoom
Examples
Basic
Hide code example
Copy code
<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
See the API reference for the parameters, events, methods, and related types available to the components covered on this page.
Options
ChartZoomPluginOptions
| Name | Default | Type |
|---|---|---|
Zoom | — | ChartZoomOptions |
Zoom options
| ||
Pan | — | ChartZoomPanOptions |
Pan options
| ||
Limits | — | ChartZoomLimitsOptions |
Limits options
| ||
Transition | — | ChartZoomTransition |
Transition options
| ||
ChartZoomOptions
| Name | Default | Type |
|---|---|---|
Wheel | null | ChartZoomWheel |
The Wheel options
| ||
Drag | null | ChartZoomDrag |
The Drag options
| ||
Pinch | null | ChartZoomPinch |
The Pinch options
| ||
Mode | null | string |
Allowed zoom directions
| ||
ScaleMode | null | string |
Which of the enabled zooming directions should only be available when the mouse cursor is over a scale for that axis
| ||
ChartZoomWheelOptions
| Name | Default | Type |
|---|---|---|
Enabled | null | bool? |
Enable zooming via mouse wheel
| ||
Speed | null | double? |
Factor of zoom speed via mouse wheel
| ||
ModifierKey | null | string |
Modifier key required for zooming via mouse wheel
| ||
ChartZoomDragOptions
| Name | Default | Type |
|---|---|---|
Enabled | null | bool? |
Enable drag-to-zoom
| ||
BackgroundColor | null | string |
Fill color
| ||
BorderColor | null | string |
Stroke color
| ||
BorderWidth | null | double? |
Stroke width
| ||
Threshold | null | double? |
Minimal zoom distance required before actually applying zoom
| ||
ModifierKey | null | string |
Modifier key required for drag-to-zoom
| ||
ChartZoomPinchOptions
| Name | Default | Type |
|---|---|---|
Enabled | null | bool? |
Enable zooming via pinch
| ||
ChartZoomPanOptions
| Name | Default | Type |
|---|---|---|
Enabled | null | bool? |
Enable panning
| ||
Mode | null | string |
Allowed panning directions
| ||
ModifierKey | null | string |
Modifier key required for panning with mouse
| ||
ScaleMode | null | double? |
Enable panning over a scale for that axis (regardless of mode)
| ||
Threshold | null | double? |
Minimal pan distance required before actually applying pan
| ||
ChartZoomLimitsOptions
| Name | Default | Type |
|---|---|---|
X | null | ChartZoomScaleLimits |
Limits for x-axis
| ||
Y | null | ChartZoomScaleLimits |
Limits for y-axis
| ||
ChartZoomScaleLimitsOptions
| Name | Default | Type |
|---|---|---|
Min | null | double? |
Minimum allowed value for scale.min
| ||
Max | null | double? |
Maximum allowed value for scale.max
| ||
MinRange | null | double? |
Minimum allowed range (max - min). This defines the max zoom level.
| ||