Blazorise Chart Zoom

Zoom and pan the chart with the zoom plugin.

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 your index.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="@lineChartZoomOptions" />
</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 TypeDefault
Zoom Zoom options ChartZoomOptions
Pan Pan options ChartZoomPanOptions
Limits Limits options ChartZoomLimitsOptions
Transition Transition options ChartZoomTransition

ChartZoomOptions

Name Description TypeDefault
Wheel The Wheel options ChartZoomWheelnull
Drag The Drag options ChartZoomDragnull
Pinch The Pinch options ChartZoomPinchnull
Mode Allowed zoom directions stringnull
ScaleMode Which of the enabled zooming directions should only be available when the mouse cursor is over a scale for that axis stringnull

ChartZoomWheelOptions

Name Description TypeDefault
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 stringnull

ChartZoomDragOptions

Name Description TypeDefault
Enabled Enable drag-to-zoom bool?null
BackgroundColor Fill color stringnull
BorderColor Stroke color stringnull
BorderWidth Stroke width double?null
Threshold Minimal zoom distance required before actually applying zoom double?null
ModifierKey Modifier key required for drag-to-zoom stringnull

ChartZoomPinchOptions

Name Description TypeDefault
Enabled Enable zooming via pinch bool?null

ChartZoomPanOptions

Name Description TypeDefault
Enabled Enable panning bool?null
Mode Allowed panning directions stringnull
ModifierKey Modifier key required for panning with mouse stringnull
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 TypeDefault
X Limits for x-axis ChartZoomScaleLimitsnull
Y Limits for y-axis ChartZoomScaleLimitsnull

ChartZoomScaleLimitsOptions

Name Description TypeDefault
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
On this page