Highcharts ChartEvents not working when configured from C# after upgrade to latest version

Question

Chartevents like load, redraw, onselections, plotseries click etc not trigerring in Highcharts after highcharts upgrade. We are using highcharts dll in .net to create chart objects and using javascript as well for some customizations.

   chart.Chart = new Highsoft.Web.Mvc.Charts.Chart {
            Events = new ChartEvents
            {
                Load = "initChart",
            },
            Type = ChartType.Column,
            Inverted = false,
            ZoomType = ChartZoomType.Y
        };

This is not triggering initChart method which is in script. For example :

  function initChart() {
                //alert("test");
                this.inverted = true;
                this.redraw(false);
        return
 }

On load event want to invert the chart .. Bar chart should come horizontaly. This is what i am trying to achieve.

function createChartSwapChart() {
var ChartOptions = {
"plotOptions":{"column":{"pointPadding":0.1,"borderWidth":1.0}},
"chart":{"renderTo":"SwapChart"},
"series":[
{"data":[{"y":100.0},{},{},{}],"states":{"hover":{"enabled":false}},"type":"column","name":"7"},
{"data":[{},{},{},{}],"states":{"hover":{"enabled":false}},"type":"column","name":"1"},
{"data":[{},{"y":100.0},{},{}],"states":{"hover":{"enabled":false}},"type":"column","name":"2"},
{"data":[{},{},{},{}],"states":{"hover":{"enabled":false}},"type":"column","name":"3"},
{"data":[{},{},{"y":100.0},{}],"states":{"hover":{"enabled":false}},"type":"column","name":"4"}
],
"yAxis":[
{"min":0.0,"max":100.0,"tickWidth":1.0}],
"xAxis":[
{"categories":["1","2","3","4"]}
]
};
Highcharts.chart("SwapChart",ChartOptions);
}

On investigation i found like when checking the chartoptions generated i am able to see the events object. I also tried multiple events as suggested :

 highChart.Chart = new Highsoft.Web.Mvc.Charts.Chart
                {
                    Events = new ChartEvents
                    {
                        Load = @"function() {console.log('Chart loaded');}",
                        Selection = @"function (event) { console.log('Selection made:', event); return false; }"
                    },
                    Zooming = new ChartZooming
                    {
                        Type = ChartZoomingType.X
                    },
                    ZoomType = ChartZoomType.X,
                };

I was able to enable zooming through custom script. but we have implemented many charts and will have to change script everywhere. Is there any generic solution available for the same?

chart.zooming = {
                type: "xy",
                resetButton: {                   
                    theme: {
                        zIndex: 0
                    },
                    position: {
                        align: "right"
                    }
                }                
            };   

Regarding the events it is working when i add the events through javascript but through c# object.

    Highcharts.addEvent(Highcharts.Chart, 'render', function (event) {
        console.log("On Add event Render");
    });

Is there a generic solution for this. Is this a known issue?

Answer 1

The initChart function may not work properly. To change the inverted property, use the chart.update method. For example:

function initChart() {
  this.update({
    chart: {
      inverted: true
    }
  });
}

---

Live demo: https://jsfiddle.net/BlackLabel/b59c4pq7/

API Reference: https://api.highcharts.com/class-reference/Highcharts.Chart#update