Chart not rendering with variable in formatter callback function

Question

I have a Highcharts graph in my Rails application, which has a javascript callback function in the xaxis formatter to get data:

spider_chart = LazyHighCharts::HighChart.new('graph') do |f|
  f.chart(polar: true, type: 'line', height: @height)
  f.xAxis(
    categories: categories.map{ |c| [@survey.id,c.id, c.name] },
      formatter: %|function() {return '<a href="http://localhost:3000/dashboards/spiders?level=2&survey_id=' + this.value[0] + '&category_id=' + this.value[1] + '">' + this.value[2] + '</a>';}|.js_code }
  )
  f.series(name: "Gemiddelde van huidige score", data: current_scores, pointPlacement: 'on')
  f.legend(enabled: @legend, align: 'center', verticalAlign: 'top', y: 10, layout: 'vertical')
end

When I use a hard coded url it works:

formatter: %|function() {return '<a href="http://localhost:3000/dashboards/spiders?level=2&survey_id=' + this.value[0] + '&category_id=' + this.value[1] + '">' + this.value[2] + '</a>';}|.js_code }

When I use a variable inside it doesn't work. It doesn't give an error, the graph is just not rendered:

formatter: %|function() {return '<a href="' + @environment + '/dashboards/spiders?level=2&survey_id=' + this.value[0] + '&category_id=' + this.value[1] + '">' + this.value[2] + '</a>';}|.js_code }

The variable @environment is correctly filled with http://localhost:3000. When I use window.location.hostname then it also works:

formatter: %|function() {return '<a href="https://' + window.location.hostname + '/dashboards/spiders?level=2&survey_id=' + this.value[0] + '&category_id=' + this.value[1] + '">' + this.value[2] + '</a>';}|.js_code }

Unfortunately this is not always filled correctly, so I need have a function in my controller to determine the correct environment.

So how can I make sure that the @environment variable can be used?