highcharts tooltip format millions billions

后端 未结 2 1889
臣服心动
臣服心动 2021-01-19 13:44

I want to display couple of points on a highcharts line chart which are big numbers.

e.g. 100,000, 10,000,000, 1,000,000,000

When I display these, the y axi

相关标签:
2条回答
  • 2021-01-19 14:23

    You can use the same logic as implemented in Highcharts core:

        tooltip: {
            formatter: function () {
                var ret = '',
                    multi,
                    axis = this.series.yAxis,
                    numericSymbols = ['k', 'M', 'G', 'T', 'P', 'E'],
                    i = numericSymbols.length;
                while (i-- && ret === '') {
                    multi = Math.pow(1000, i + 1);
                    if (axis.tickInterval >= multi && numericSymbols[i] !== null) {
                        ret = Highcharts.numberFormat(this.y / multi, -1) + numericSymbols[i];
                    }
                }
                return ret;
            }
        },
    

    And jsFiddle: http://jsfiddle.net/ynCKW/2/

    EDIT for Highcharts v6:

    We can call build-in method, which should be easier to maintain: http://jsfiddle.net/BlackLabel/ynCKW/104/

        tooltip: {
            valueSuffix: '',
            formatter: function () {
                var axis = this.series.yAxis;
    
                return axis.defaultLabelFormatter.call({
                    axis: axis,
                    value: this.y
                });
            }
        },
    
    0 讨论(0)
  • 2021-01-19 14:34

    Piggybacking off @Pawel Fus, a slight tweak allows you to have negative currency values as well but with the negative outside the $ (i.e. -$100K versus -$-100k).

    function () {
        var isNegative = this.value < 0 ? '-' : '';
        var absValue = Math.abs(this.value);
        return isNegative + '$' + this.axis.defaultLabelFormatter.call({
            axis: this.axis,
            value: absValue
        });
    }
    

    Here is a jsFiddle: http://jsfiddle.net/4yuo9mww/1/

    0 讨论(0)
提交回复
热议问题