blazorapexcharts

Problem with disabling zoom using Blazor-ApexCharts (line chart)

I have a blazor project, in which I use Blazor-ApexCharts.

The relevant part of the razor view is:

<ApexChart TItem="DataToPlot" Title="" Height="350" >
                                        <ApexPointSeries TItem="DataToPlot"
Items="FirstParamData"
Name="@SelectedFirstParamToChart"
SeriesType="SeriesType.Line"
XValue="e => e.DateAndTime"
YValue="e=> e.ParamVal" ShowDataLabels="false" />

</ApexChart>

I wanted to disable zooming, but didn't find any option in the ApexChart tag.

What I found is that there is an Option to use:

<ApexChart TItem="DataToPlot" Title="" Height="350" Options="" >

but didn't find any example how to specify e.g. zoom settings here.

Thank you for any help!

I found solution here in stackoverflow (Apex charts disable scrolling / zooming), but it is not for the blazor wrapper. I suppose the solution is somewhere here, but couldn't step on with it.

Solution

  • As mentioned in the Chart Options, creating the chart options instance in JS should be similar to the Blazor way.

    From the Blazor.ApexChart Zoom property in GitHub, you should create a Chart instance with the Zoom property that is assigned with the Zoom instance with the Enabled property is false.

    private ApexChartOptions<DataToPlot> options = new ApexChartOptions<DataToPlot>
{
    Chart = new Chart
    {
        Zoom = new Zoom
        {
            Enabled = false
        }
    }
};

    Next, pass the options to the <ApexChart>.

    <ApexChart TItem="DataToPlot" Title="" Height="350" Options="options">
  ...
</ApexChart>