IMPORTANT
chartjs-plugin-zoom must be loaded after the Chart.js library!
Blazorise Chart Zoom
Zoom and pan the chart with the 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.
Installation
NuGet
Install the charts extension and plugin from NuGet.Install-Package Blazorise.Charts Install-Package Blazorise.Chart.Zoom
Static Files
Include the necessary files into yourindex.html
or _Layout.cshtml
/ _Host.cshtml
file, depending if you’re using a Blazor WebAssembly or Blazor Server side project.
<script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@2.0.1/dist/chartjs-plugin-zoom.min.js"></script>
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", }; } string[] Labels = { "Red", "Blue", "Yellow", "Green", "Purple", "Orange" }; List<string> backgroundColors = new List<string> { ChartColor.FromRgba( 255, 99, 132, 0.2f ), ChartColor.FromRgba( 54, 162, 235, 0.2f ), ChartColor.FromRgba( 255, 206, 86, 0.2f ), ChartColor.FromRgba( 75, 192, 192, 0.2f ), ChartColor.FromRgba( 153, 102, 255, 0.2f ), ChartColor.FromRgba( 255, 159, 64, 0.2f ) }; List<string> borderColors = new List<string> { ChartColor.FromRgba( 255, 99, 132, 1f ), ChartColor.FromRgba( 54, 162, 235, 1f ), ChartColor.FromRgba( 255, 206, 86, 1f ), ChartColor.FromRgba( 75, 192, 192, 1f ), ChartColor.FromRgba( 153, 102, 255, 1f ), ChartColor.FromRgba( 255, 159, 64, 1f ) }; 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 |