CODEWITHSUNDEEP
javascriptjqueryhtmlhighchartsfrontend
k.p
k.p

Reputation: 67

In highcharts, the data in the legend is overlapping incase of data less than 10000

When the user hovers on the map above the pointers shows tha data in the legend below it.If the data range is less than 10000 then it is overlapping as shown in the below image.Please suggest me how to format for the data below 10000( for data above 1000 the range is showing like 10k,12,5k etc.)enter image description here

Upvotes: 1

Views: 108

Answers (2)

k.p
k.p

Reputation: 67

ColorAxis: {
   labels: {
                        formatter: function() {
                            var value = this.value.toFixed( 0 ),
                                newValue = value,
                                shortNum,
                                precision;
                            if ( 1000 <= value ) {
                                var suffixes = ['', 'K', 'M', 'B', 'T', 'G' ],
                                    suffixNum = Math.floor( ( '' + value ).length / 3 ),
                                    shortValue = '';
                                for ( precision = 2; precision >= 1; precision = precision - 1 ) {
                                    shortValue = parseFloat( ( 0 !== suffixNum ? ( value / Math.pow( 1000, suffixNum ) ) : value ).toPrecision( precision ) );
                                    var dotLessShortValue = ( shortValue + '' ).replace( /[^a-zA-Z 0-9]+/g, '' );
                                    if ( dotLessShortValue.length <= 2 ) {
                                        break;
                                    }
                                }
                                if ( 0 !== shortValue % 1 ) {
                                    shortNum = shortValue.toFixed( 1 );
                                }
                                newValue = shortValue + suffixes[ suffixNum ];
                            }
                            return newValue;
                        }
                    }
}

Upvotes: 1

Luca Regazzi
Luca Regazzi

Reputation: 1395

You can use the colorAxis.labels.formatter to accomplish a custom styling for the labels of the colorAxis used in your legend.

colorAxis: {
    labels : {
        formatter: function() {
    return parseInt(this.value) >= 1000 ? parseInt(this.value)/1000 + 'k' : this.value ;
        }
    }
}

Upvotes: 1

Related Questions