Blazor: Reduce/Elimination of animation speed of a chart

Viewed 769

is it possible to reduce or even turn off the animation speed at the usage of the ChartJs.Blazor's BarChart component in Blazor? I have found this NuGet package to be very useful, but I don't see how would it be possible to turn off the animation whenever I update my BarChart. For the easier overlook, here is a simplified version that I am testing on now:

@using ChartJs.Blazor.ChartJS.BarChart
@using ChartJs.Blazor.ChartJS.BarChart.Axes
@using ChartJs.Blazor.ChartJS.Common.Axes
@using ChartJs.Blazor.ChartJS.Common.Axes.Ticks
@using ChartJs.Blazor.ChartJS.Common.Properties
@using ChartJs.Blazor.ChartJS.Common.Wrappers
@using ChartJs.Blazor.Charts
@using ChartJs.Blazor.Util
@using BootstrapChart1.Data
<h2>Simple Bar Chart</h2>
<div class="row">
    <button class="btn btn-primary" @onclick="AddData">
        Add Data
    </button>
    <button class="btn btn-primary" @onclick="RemoveData">
        Remove Data
    </button>
</div>
<ChartJsBarChart @ref="_barChart"
                 Config="@_barChartConfig"
                 Width="600"
                 Height="300" />

@code {
    private BarConfig _barChartConfig;
    private ChartJsBarChart _barChart;
    private BarDataset<DoubleWrapper> _barDataSet;

    protected override void OnInitialized() {
        _barChartConfig = new BarConfig {
            Options = new BarOptions {

                Title = new OptionsTitle {
                    Display = true,
                    Text = "Simple Bar Chart"
                },

                Scales = new BarScales {
                    XAxes = new List<CartesianAxis> {
                        new BarCategoryAxis {
                            BarPercentage = 0.5,
                            BarThickness = BarThickness.Flex
                        }
                    },
                    YAxes = new List<CartesianAxis> {
                        new BarLinearCartesianAxis {
                            Ticks = new LinearCartesianTicks {
                                BeginAtZero = true
                            }
                        }
                    }

                },
            ResponsiveAnimationDuration = 0,

            }
        };

        _barChartConfig.Data.Labels.AddRange(new[] {"A", "B", "C", "D"});

        _barDataSet = new BarDataset<DoubleWrapper> {
            Label = "My double dataset",
            BackgroundColor = new[] {ColorUtil.RandomColorString(), ColorUtil.RandomColorString(),
            ColorUtil.RandomColorString(), ColorUtil.RandomColorString()},
            BorderWidth = 0,
            HoverBackgroundColor = ColorUtil.RandomColorString(),
            HoverBorderColor = ColorUtil.RandomColorString(),
            HoverBorderWidth = 1,
            BorderColor = "#ffffff"
        };

        _barDataSet.AddRange(new double[] {8, 5, 3, 7}.Wrap());
        _barChartConfig.Data.Datasets.Add(_barDataSet);
    }


    private void AddData() {
        var nowSecond = DateTime.Now.Second;
        _barChartConfig.Data.Labels.Add(nowSecond.ToString());
        _barDataSet.Add(new DoubleWrapper(nowSecond));

        _barChart.Update();
    }
}

Source of the extension: https://github.com/mariusmuntean/ChartJs.Blazor

1 Answers

I'm one of the co-authors of the ChartJs.Blazor library.

In order to disable the animations, you have to set the animation duration to 0 wherever possible. This is documented in the chart.js-docs performance-section.

You can already set the BarOptions.ResponsiveAnimationDuration and the BarOptions.Hover.AnimationDuration to 0 but currently we're missing the BarOptions.Animation option. There is a pull request open but not merged/released yet.

I will fix this before the next nuget-release. If you need it right now, you can subclass the BarOptions class and add the Animation property (of type Animation) yourself. Then use your subclass instead of the original BarOptions and you can set YourBarOptions.Animation.Duration to 0 as well.
If you don't manage to do that, write a comment; I can included the code you need but please try it yourself first :)

Update

I have fixed it and released a new version. Release-1.1.0 is published and available on nuget.

Related