score:0

This is a great question. I've worked up a fiddle (http://jsfiddle.net/brightmatrix/uy81h3os/3/) that addresses most of your questions, as well as some suggestions I hope you find helpful.

First, for your axes labels, you can use the formatter attribute within labels in each of the axes to define how you want to show them. For your revenue, I included the prefix "$"; I didn't include one for hours.

I used the Highcharts.numberFormat() function in the formatter for each axis. This will add a thousands separator (comma) to your numbers and fix the decimal points (the second parameter in that function). For hours, you had fractions of hours, so I set the number of decimals to show at 1. For revenue, I fixed the number of decimals to show at 0. Feel free to change these as you see fit.

As for the K/M labels, I would strongly suggest fixing the values in thousands and stating such in the axes titles (for example, "Revenue (in thousands)"). This is what is typically done in economic and financial charts, and will make the labels clear and consistent for your users. See my changes to your axes title text attributes.

Here's the complete code for the y-axes:

yAxis: [{
  title: {
    text: 'Hours (in thousands)'
  },
  labels: {
    formatter: function() {
      return Highcharts.numberFormat(this.value/1000,0) 
    }
  },
  reversedStacks: false,
  stackLabels: {
    enabled: true,
    formatter: function() {
      return Highcharts.numberFormat(this.total,1) 
    }
  },
}, {
  title: {
    text: 'Revenue (in thousands)'
  },
  labels: {
    formatter: function() {
      return '$' + Highcharts.numberFormat(this.value/1000,0) 
    }
  },
  stackLabels: {
    enabled: true,
    formatter: function() {
      return '$' + Highcharts.numberFormat(this.total,0) 
    }
  },
  opposite: true,
  reversedStacks: false
}],

I made one other change to your fiddle that you'll see at the top. This adds a thousands separator for all of your numbers, so they show up at 10,000 rather than 10 000, as you had before. Here is the code:

Highcharts.setOptions({
    lang: { thousandsSep: "," }
});

This a global function, so you'll want to place this directly before your chart code.

I'll do some research on your tooltip formatting and edit this answer with further details.

enter image description here


Related Query

More Query from same tag