How to display & Delta; in Highcharts shortcuts?

Question

I ran into a problem that I am pretty sure that exactly where I set the value of my object, however I cannot get this to work.

I am trying to put & Delta; character in the highcharts.js category, as shown in this code snippet below:

Highcharts.chart('container', {

  chart: {
    type: 'bar'
  },

  title: {
    text: 'Catawba Average Points'
  },

  xAxis: {
    categories: ['Emergency TS Δs', 'Column B', 'Column C', 'Column D', 'Column E', 'Column F', 'Column G'],
    labels: {
      useHtml: true
    }
  },

  plotOptions: {
    bar: {
      stacking: 'normal',
      groupPadding: 0.10,
      pointPadding: 0,
      dataLabels: {
        enabled: true,
        alignt: 'right',
        formatter: function() {
          if (this.y != 0) {
            return this.y;
          }
        }
      }
    }
  },

  series: [{
    name: '(-) Var',
    data: [0, 0, 0, 0, 0, 2, 0, 0],
    color: '#ffa6a6',
    stack: '2017Q3',
    showInLegend: false
  }, {
    name: '(+) Var',
    data: [0, 0, 0, 0, .1, 0, 0, 5.10],
    color: '#a6e3c2',
    stack: '2017Q2',
    showInLegend: false
  }, {
    name: '2017Q3',
    color: '#d9d9d9',
    data: [10, 15, 10, 10, 3.1, 0, 25, 15],
    stack: '2017Q3'
  }, {
    name: '2017Q2',
    color: '#f2f2f2',
    data: [10, 15, 10, 10, 3.0, 2, 25, 9.90],
    stack: '2017Q2'
  }]


});

<script src="https://code.highcharts.com/highcharts.js"></script>


<div id="container" style="min-width: 310px; height: 600px; margin: 0 auto"></div>

Run codeHide result

I tried using useHtml in several places to no avail. Any thoughts on what I'm doing wrong?

Here is the fiddle for the game:

http://jsfiddle.net/crk3vn76/

EDIT

Please note that the data comes from the database, and if I put Δ directly, it displays how?

EDIT 2

, , utf-8 Δ . , , , html.

Answer 1

JSFiddle , useHTML , useHTML useHTML Δ

Highcharts.chart('container', {

  chart: {
    type: 'bar'
  },

  title: {
    text: 'Catawba Average Points'
  },

  xAxis: {
    categories: ['Emergency TS Δs', 'Column B', 'Column C', 'Column D', 'Column E', 'Column F', 'Column G'],
    labels: {
      useHTML: true
    }
  },

  plotOptions: {
    bar: {
      stacking: 'normal',
      groupPadding: 0.10,
      pointPadding: 0,
      dataLabels: {
        enabled: true,
        alignt: 'right',
        formatter: function() {
          if (this.y != 0) {
            return this.y;
          }
        }
      }
    }
  },

  series: [{
    name: '(-) Var',
    data: [0, 0, 0, 0, 0, 2, 0, 0],
    color: '#ffa6a6',
    stack: '2017Q3',
    showInLegend: false
  }, {
    name: '(+) Var',
    data: [0, 0, 0, 0, .1, 0, 0, 5.10],
    color: '#a6e3c2',
    stack: '2017Q2',
    showInLegend: false
  }, {
    name: '2017Q3',
    color: '#d9d9d9',
    data: [10, 15, 10, 10, 3.1, 0, 25, 15],
    stack: '2017Q3'
  }, {
    name: '2017Q2',
    color: '#f2f2f2',
    data: [10, 15, 10, 10, 3.0, 2, 25, 9.90],
    stack: '2017Q2'
  }]


});

<script src="https://code.highcharts.com/highcharts.js"></script>


<div id="container" style="min-width: 310px; height: 600px; margin: 0 auto"></div>

Hide result

Answer 2

unicode \u0394. , labels.useHTML: true.

Highcharts.chart('container', {

  chart: {
    type: 'bar'
  },

  title: {
    text: 'Catawba Average Points'
  },

  xAxis: {
    categories: ['Emergency TS \u0394s', 'Column B', 'Column C', 'Column D', 'Column E', 'Column F', 'Column G'],
    labels: {useHtml: true}
  },

  plotOptions: {
    bar: {
      stacking: 'normal',
      groupPadding: 0.10,
      pointPadding: 0,
      dataLabels: {
        enabled: true,
        alignt: 'right',
        formatter: function(){
        if(this.y != 0){
         return this.y;
        }
        }
      }
    }
  },

  series: [{
    name: '(-) Var',
    data: [0, 0, 0, 0, 0, 2, 0, 0],
    color: '#ffa6a6',
    stack: '2017Q3'
  }, {
    name: '(+) Var',
    data: [0, 0, 0, 0, .1, 0, 0, 5.10],
    color: '#a6e3c2',
    stack: '2017Q2'
  }, {
    name: '2017Q3',
    color: '#d9d9d9',
    data: [10, 15, 10, 10, 3.1, 0, 25, 15],
    stack: '2017Q3'
  }, {
    name: '2017Q2',
    color: '#f2f2f2',
    data: [10, 15, 10, 10, 3.0, 2, 25, 9.90],
    stack: '2017Q2'
  }]


});