CODEWITHSUNDEEP
javascripthtmlcsshighcharts
JaskeyLam
JaskeyLam

Reputation: 15755

Setting Highcharts x axis label's width

I need to set max width for xAxis Label so that when it is too long and rest letters(characters) will go to the next line.

I read Highcharts x axis label text wrapping lost on setting label step and find setting "width" is working fine for English words(separated by empty space).

But when there is no empty space, say "VeryLongLongLongWord" or "这是一个很长很长很长的中文" , that is not working.

I also tried setting wordWrap: break-word, still no use.

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column',
        },
        xAxis: {
            categories: ['This is a long Text', 'VeryLongLongLongWord', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec','这是一个很长很长很长的中文'],
        labels: {
                style:{
                    width:'30px',// not work for text without empty space
                    wordWrap: 'break-word'//no use
                },
                step: 1
            }
        },

        plotOptions: {
            series: {
                pointWidth: 30
            }
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    });
});

fidder: http://jsfiddle.net/uehbmzgx/

Upvotes: 4

Views: 18489

Answers (3)

Tushar Prajapati
Tushar Prajapati

Reputation: 141

Best way is dynamically formatting the string :

   xAxis : {
          type: 'category', 
          labels: {
            rotation: -90,
            style: {
              color: "#ff0000",
            },
            formatter: function () {//use formatter to check if length of string is greater than 20 and maintain its width.
              if(this.value.length > 20){
                return this.value.substring(0, 17) + '...';
              }
              return this.value;
            }
          },

Upvotes: 1

JaskeyLam
JaskeyLam

Reputation: 15755

@Sebastian's solutions works fine.

And I found another solution that using formatter to limit it's width : 

        labels: {
            useHTML:true,//Set to true
            style:{
                width:'50px',
                whiteSpace:'normal'//set to normal
            },
            step: 1,
            formatter: function () {//use formatter to break word.
                return '<div align="center" style="word-wrap: break-word;word-break: break-all;width:50px">' + this.value + '</div>';
            }
        },

http://jsfiddle.net/uehbmzgx/5/

Upvotes: 11

Sebastian Bochan
Sebastian Bochan

Reputation: 37588

You need to add css styles with !important declaration.

CSS

.highcharts-axis-labels span{ 
  word-break:break-all!important;
  width:50px!important;
  white-space:normal!important;
}

Highcharts

 xAxis: {
      categories: ['This is a long Text', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec','这是一个很长很长很长的中文'],
      labels: {
          useHTML:true,
          style:{
                width:'50px',
          },
          step: 1
      }
},

Example: http://jsfiddle.net/uehbmzgx/3/

Upvotes: 3

Related Questions