Format y-axis values using numeral JSHighCharts

Question

I want to format my values on the y-axis using HighCharts. Suppose I pass 14000, it should print "14K" on the y-axis. How can I do that? I've benn trying using numeral.js, but to no avail.

<!DOCTYPE html>
<html>
<head>

  <title>Charts demo </title>
  <script
  src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
  integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
  crossorigin="anonymous"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/solid-gauge.src.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
<script >

  $(function () {
    $('#container').highcharts({
  colors: ['#8dafb7', '#f19962', '#e97381', '#f8c465', '#6cd299', '#87cfe2'],
  chart: {
    type: 'column',

              marginBottom : 50,
              marginTop : 150,
              height : 700



  },

  title: {
    text: ''
  },
  xAxis: {

    categories: ['Q2,16', 'Q3,16', 'Q4,16', 'Q1,17'],
    width: 700,
    tickmarkPlacement: 'on',
    labels: {
        y : 40,
        style: {
                    color: '#333333',
                    fontSize:'25',
                    fontFamily: 'ProximaNova-Light',
                    opacity : '.6'
                },

  }
},
  yAxis: {
    gridLineWidth: 0,
    min: 0,
     tickInterval: 20,
    title: {
      text: ''
    },
    labels: {
        style: {
                    color: '#333333',
                    fontSize:'25',
                    fontFamily: 'ProximaNova-Light',
                    opacity : '.5'
                },
      formatter: function() {
         return "$"+ this.value ;

      }
    },
    stackLabels: {
      style: {
                    color: '#555555',
                    fontSize:'25',
                    fontFamily: 'ProximaNova-Regular'
      },
      enabled: true,
      formatter: function() {

        return  "$"+ this.total ;

      }
    }
  },
  legend:{

        enabled:false,
        width: 600,
        floating: false,
        x:50,
        align: 'left',
       style: {
                    color: '#555555',
                    fontSize:'25',
                    fontFamily: 'ProximaNova-Regular',
                    opacity : '.8'
      },

        borderWidth: 0
      },
  tooltip: {
    enabled: false
  },
  credits : {
              enabled : false
            },
  plotOptions: {
    column: {
      stacking: 'normal',
      dataLabels: {
        enabled: false,
        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
      }
    }
  },

  series: [{
    name: 'FTE-OpEx   ',
    data: [5000, 30000, 40000, 700000],
    pointWidth: 30,

  }, {
    name: 'FTE-CapEx',
    data: [20000, 20000, 30000, 20000],
    pointWidth: 30
  }, {
    name: 'AWF-OpEx',
    data: [30000, 40000, 4000, 2000],
    pointWidth: 30
  }, {
    name: 'AWF-CapEx',
    data: [3000, 4000, 4000, 2000],
    pointWidth: 30
  }, {
    name: 'HW/SW',
    data: [3000, 4000, 4000, 20000],
    pointWidth: 30
  }, {
    name: 'Other',
    data: [3000, 4000, 4000, 2000],
    pointWidth: 30
  }]
      });
});

</script>
</head>


<body id="body">
        <div id="container" style="height: 100%; width: 100%; position: center; margin-left: 5%; "></div>

  </body>


</html>




}

You should create a demo of your code and provide the code and link in your question, otherwise I am sure that your question would be closed soon — Rahul Gupta, Jan 29 '18 at 05:41
http://jsfiddle.net/5swq7aog/ used [numericSymbols](https://api.highcharts.com/highcharts/lang.numericSymbols) — Patata, Jan 29 '18 at 05:50
What you need works out of the box, take a look: http://jsfiddle.net/BlackLabel/0e5hvyj5/1/ you don't need `numeral.js`. Please show your code, maybe your specific case requires something else, or your chart config disables this feature. — Paweł Fus, Jan 29 '18 at 12:16
@pawel fus i have updated the question with my code..please help — user46663, Jan 29 '18 at 19:39
the root of your problem for the axis labels is that you are setting the tickInterval to 20 and you have a range of 800k. So Highcharts is trying to give you very specific values. — Barbara Laird, Jan 30 '18 at 17:09

score 1 · Accepted Answer · answered Jan 30 '18 at 10:23

1

It's problem with your formatter which returns default value, see API. If you want to keep numeric symbols, call defaultLabelFormatter.

Demo: http://jsfiddle.net/BlackLabel/uL2jx0t9/1/

yAxis: {
  labels: {
    formatter: function() {
      return '$' + this.axis.defaultLabelFormatter.call(this);
    }
  }
}

answered Jan 30 '18 at 10:23

Paweł Fus

44,795
3
61
77

I am able to get labels on Y-axis . But using the same formatter , I am not able to get total on top of each stack – user46663 Jan 30 '18 at 10:55
formatter: function () { return '$' + this.axis.defaultLabelFormatter.call({value : this.total}); } – user46663 Jan 30 '18 at 11:16
As you noticed, `stackLabels` are a bit different, but it can be achieved: http://jsfiddle.net/BlackLabel/uL2jx0t9/3/ - add `this.value = this.total` and call with `this` context like above. – Paweł Fus Jan 30 '18 at 11:58
I am getting small k . How to get capital K and also 0 is not displayed with K . @pawel fus , can you please help – user46663 Jan 30 '18 at 17:36
To change small "k" see [numericSymbols](https://api.highcharts.com/highcharts/lang.numericSymbols). For example: http://jsfiddle.net/BlackLabel/uL2jx0t9/4/ Regarding `0`, you can add this manually: http://jsfiddle.net/BlackLabel/uL2jx0t9/5/ – Paweł Fus Jan 31 '18 at 10:11

Format y-axis values using numeral JSHighCharts

1 Answers1