CODEWITHSUNDEEP
highchartsnumeral.js
user46663
user46663

Reputation: 11

Format y-axis values using numeral JSHighCharts

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>




}

Upvotes: 0

Views: 355

Answers (1)

Paweł Fus
Paweł Fus

Reputation: 45079

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);
    }
  }
}

Upvotes: 1

Related Questions