how to set character limit to 4-5 in axis labels in highcharts in angular 7

Question

I'm using column, I need to reduce x axis characters to max 4-5 character which is dynamically coming from database.

xAxis: { categories: labesldata, crosshair: true }

This should be done at data manipulation level, not a highchart issue IMHO. — santamanno, Mar 23 '20 at 10:50
yeah. but can we do it at highcharts?. using formatter: function (). I tried. — Deep Shikha, Mar 23 '20 at 10:53
formatter: function () { return this.value.toString().substring(0, 5); } — Deep Shikha, Mar 23 '20 at 11:04

score 0 · Answer 1 · answered Mar 23 '20 at 12:31

0

You can use the formatter callback function and modify the default string:

xAxis: {
  ...,
  labels: {
    formatter: function() {
      return this.value.slice(0, 5);
    }
  }
}

Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4931/

API Reference: https://api.highcharts.com/highcharts/xAxis.labels.formatter

answered Mar 23 '20 at 12:31

ppotaczek

i've used formatter: function () { return this.value.toString().substring(0, 5); } this works fine. But I want to display the whole level in tooltip too. – Deep Shikha Mar 23 '20 at 12:46
Hi @Deep Shikha, What do you exactly mean? What is 'whole level' for you? – ppotaczek Mar 23 '20 at 15:07
sorry that was typo. I meant to say x-axis labels. – Deep Shikha Mar 24 '20 at 09:45
@Deep Shikha, In the example that I have provided, the entire category name is displayed – ppotaczek Mar 24 '20 at 11:52

1 Answers1