Blazorise Chart Zoom component

Zoom and pan charts with the Chart.js zoom plugin.

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.
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

<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",
        };
    }

    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

NameDefaultType
Zoom—ChartZoomOptions

Zoom options
Pan—ChartZoomPanOptions

Pan options
Limits—ChartZoomLimitsOptions

Limits options
Transition—ChartZoomTransition

Transition options

ChartZoomOptions

NameDefaultType
WheelnullChartZoomWheel

The Wheel options
DragnullChartZoomDrag

The Drag options
PinchnullChartZoomPinch

The Pinch options
Modenullstring

Allowed zoom directions
ScaleModenullstring

Which of the enabled zooming directions should only be available when the mouse cursor is over a scale for that axis

ChartZoomWheelOptions

NameDefaultType
Enablednullbool?

Enable zooming via mouse wheel
Speednulldouble?

Factor of zoom speed via mouse wheel
ModifierKeynullstring

Modifier key required for zooming via mouse wheel

ChartZoomDragOptions

NameDefaultType
Enablednullbool?

Enable drag-to-zoom
BackgroundColornullstring

Fill color
BorderColornullstring

Stroke color
BorderWidthnulldouble?

Stroke width
Thresholdnulldouble?

Minimal zoom distance required before actually applying zoom
ModifierKeynullstring

Modifier key required for drag-to-zoom

ChartZoomPinchOptions

NameDefaultType
Enablednullbool?

Enable zooming via pinch

ChartZoomPanOptions

NameDefaultType
Enablednullbool?

Enable panning
Modenullstring

Allowed panning directions
ModifierKeynullstring

Modifier key required for panning with mouse
ScaleModenulldouble?

Enable panning over a scale for that axis (regardless of mode)
Thresholdnulldouble?

Minimal pan distance required before actually applying pan

ChartZoomLimitsOptions

NameDefaultType
XnullChartZoomScaleLimits

Limits for x-axis
YnullChartZoomScaleLimits

Limits for y-axis

ChartZoomScaleLimitsOptions

NameDefaultType
Minnulldouble?

Minimum allowed value for scale.min
Maxnulldouble?

Maximum allowed value for scale.max
MinRangenulldouble?

Minimum allowed range (max - min). This defines the max zoom level.