Search code examples
c#.netrazorhighchartsdotnethighcharts

How to disable animations on Highcharts Dotnet C# MVC?


So I have begun using Dotnet.Highcharts in Visual Studio with C# and MVC, Its quite different from its javascript counterpart, I need to use ghostjs to take a picture from my web page to send as a report, as many must know, this means that animations interfere with this working properly as bars show up to half of the height they should be.

I'm using the recommended coding from Dotnet.highcharts which mostly uses Razor to configure the chart.

I have tried disabling animations in all these places:

 PlotOptions = new PlotOptions
        {
            Column = new PlotOptionsColumn
            {
                PointPadding = 0.2,
                BorderWidth = 0,
                Animation = new Animation() { Enabled = false, Duration = 0 }
            },
            Series = new PlotOptionsSeries
            {
                Animation = new Animation() { Enabled = false, Duration = 0}
            }
        },
 chartOptions.Drilldown.Animation = new Animation() { Enabled = false, Duration = 0};
 chartOptions.Chart.Animation.Enabled = false;

and still the chart keeps animating, I just don't know what is going on

here is my full Razor code for the chart

var chartOptions = new Highcharts
    {

        Title = new Title { Text = "Transactions" },
        Subtitle = new Subtitle { Text = "December" },
        XAxis = new List<XAxis>
        {
            new XAxis
            {
                Categories = ViewBag.ListCategories

            }
        },
        YAxis = new List<YAxis>
        {
            new YAxis
            {
                Min = 0,
                Title = new YAxisTitle
                {
                    Text = "Tx"
                }
            }
        },
        Tooltip = new Tooltip
        {
            HeaderFormat = "<span style='font-size:10px'>{point.key}</span><table style='font-size:12px'>",
            PointFormat = "<tr><td style='color:{series.color};padding:0'>{series.name}: </td><td style='padding:0'><b>{point.y:.0f}</b></td></tr>",
            FooterFormat = "</table>",
            Shared = true,
            UseHTML = true
        },
        PlotOptions = new PlotOptions
        {
            Column = new PlotOptionsColumn
            {
                PointPadding = 0.2,
                BorderWidth = 0,
                Animation = new Animation() { Enabled = false, Duration = 0 }
            },
            Series = new PlotOptionsSeries
            {
                Animation = new Animation() { Enabled = false, Duration = 0}
            }
        },
        Series = new List<Series>
        {
         new ColumnSeries
         {
         Name = "TX",
        Data = ViewData["DataTX"] as List<ColumnSeriesData>
    }
      }

    };

    chartOptions.ID = "chart";
    chartOptions.Drilldown.Animation = new Animation() { Enabled = false, Duration = 0};
    chartOptions.Chart.Animation.Enabled = false;

    var renderer = new HighchartsRenderer(chartOptions);

Solution

  • This one worked for me. Had to play with it a while, seems there's no clear documentation.

    DotNet.Highcharts.Highcharts chart = new DotNet.Highcharts.Highcharts("chart")
    .InitChart(new Chart { DefaultSeriesType = ChartTypes.Areaspline})  
    .SetTitle(new Title
    {
    Text = "myLabel",
    X = -20
    })      
            
    .SetSeries(new[]
    {
      new Series { Name = "MyUsers", Data = new Data(myData), PlotOptionsSeries=new PlotOptionsSeries(){Animation=new Animation(false)} }
    });