Force axis labels to be displayed as Millions

Share an idea
1

By default, everviz will try to display values on the vertical axis without showing decimals less than 1 if there is enough space to do so.

If you open the above chart at the url https://app.everviz.com/embed/pe3gPX1t-/?v=1 you will see what I mean.

Sometimes, this is not desirable. In such cases it is possible to override this behavior with custom code:, which is accessible from the sidebar:

image
image786×1404 73.7 KB 

function convertToMega(text) {
  const match = text.match(/^(\d+)k$/i);
  return match ? (match[1] >= 1000 ? (match[1] / 1000).toFixed(match[1] % 1000 > 0) + 'M' : match[1] + 'k') : text;
}

Highcharts.merge(true, options, {
  yAxis: {
    labels: {
      formatter: function (p) {
        var label = [this.axis.defaultLabelFormatter.call](
          this.axis.defaultLabelFormatter.call)(this);
          return convertToMega(label.replace(' ', ''))
      }
    }
  }
})

Here is a link to a full screen view where this custom code is applied.

If there is enough interest to do so, we might change this behavior in the future. So do let us know what you think!

2

This isn’t working for me.

Also - on some charts, this happens automatically. On others, you apparently need custom code. Why is there no consistency?

3

Hi,

This behavior is not automatic, but what you observe depends on a few environmental factors, such as the size of the chart. We will review whether to keep this behavior, and this post is meant almost as a Public Service Announcement, in that sense.

1 Like