xAxis Labels.formatter does not work if changed to ES6 style

[Scarittagle]

Expected behaviour
So In ES5 the format of writing the labels.formatter is like this:

labels: { formatter: function() { //something..... } }

but if I changed to ES6 style:
labels: { formatter: () => { //something..... } }

It should render the label as usual.
Actual behaviour
Instead the chart stopped render all the xAxis labels.

Live demo with steps to reproduce

http://jsfiddle.net/tDSrd/291/

Product version

Highcharts 6.1.1

Affected browser(s)
Chrome Version 67.0.3396.87 (Official Build) (64-bit)

[sebastianbochan]

Hi @Scarittagle,
Thank you for reporting.

Internal note
I remember that we had similar case in the past, but not sure if it was fixed or not.
@TorsteinHonsi @jon-a-nygaard

[sebastianbochan]

Hi @Scarittagle,
Thank you for reporting.

Internal note
I remember that we had similar case in the past, but not sure if it was fixed or not.
@TorsteinHonsi @jon-a-nygaard

[pawelfus]

@Scarittagle

This is caused how fat arrow functions deal with context. It's not only syntactic sugar, "ES6 style", but also this in fat arrow functions refers to the current scope context:

new Highcharts.chart('container', {
  ...
  formatter: function ()  {
    // this -> refers to the context passed on, in this case: "label"
  }
  ...
});

new Highcharts.chart('container', {
  ...
  formatter: () => {
    // this -> refers to the context where chart was created, in this case "document"
  }
  ...
});

Changed this in fat arrow functions is the reason why those exist :)

Edit:
Better example:

new Highcharts.chart('container', {
  chart: {
    events: {
      load: function () {
        setTimeout(() => {
          console.log(this); // this refers to "chart" as it's a context of the higher scope
        });
      }
    }
  },
  ...

new Highcharts.chart('container', {
  chart: {
    events: {
      load: function () {
        setTimeout(function () {
          console.log(this); // this refers to "window" as it's a context of anonymous function
        });
      }
    }
  },
  ...
});

[pawelfus]

@Scarittagle

This is caused how fat arrow functions deal with context. It's not only syntactic sugar, "ES6 style", but also this in fat arrow functions refers to the current scope context:

new Highcharts.chart('container', {
  ...
  formatter: function ()  {
    // this -> refers to the context passed on, in this case: "label"
  }
  ...
});

new Highcharts.chart('container', {
  ...
  formatter: () => {
    // this -> refers to the context where chart was created, in this case "document"
  }
  ...
});

Changed this in fat arrow functions is the reason why those exist :)

Edit:
Better example:

new Highcharts.chart('container', {
  chart: {
    events: {
      load: function () {
        setTimeout(() => {
          console.log(this); // this refers to "chart" as it's a context of the higher scope
        });
      }
    }
  },
  ...

new Highcharts.chart('container', {
  chart: {
    events: {
      load: function () {
        setTimeout(function () {
          console.log(this); // this refers to "window" as it's a context of anonymous function
        });
      }
    }
  },
  ...
});

[jon-a-nygaard]

As @pawelfus mentioned this is the expected result when using arrow function, and we can not go around it either by using call or apply because this is not binded to the function.

A possibility to consider though is providing the data on this as parameters instead to avoid future confusions. Unfortunately that will likely become a breaking change if carried out.

I'm not sure what would be the sensible action here. Do you have an opinion on this @TorsteinHonsi?

[jon-a-nygaard]

As @pawelfus mentioned this is the expected result when using arrow function, and we can not go around it either by using call or apply because this is not binded to the function.

A possibility to consider though is providing the data on this as parameters instead to avoid future confusions. Unfortunately that will likely become a breaking change if carried out.

I'm not sure what would be the sensible action here. Do you have an opinion on this @TorsteinHonsi?

[TorsteinHonsi]

The params are currently not used for anything, so that makes sense. But we should keep the scope as is, and just add a parameter.

Demo with fix applied: http://jsfiddle.net/tDSrd/310/

[TorsteinHonsi]

The params are currently not used for anything, so that makes sense. But we should keep the scope as is, and just add a parameter.

Demo with fix applied: http://jsfiddle.net/tDSrd/310/