Solution for axis label text in highcharts

H⃰U⃰A⃰ 2021-09-15 09:16:52



Problem description

in application , There will always be some , (biàn) Especially (tài) demand , For example, the text of some chart axes is very long .
for example :
A serious chart :
highcharts The axis label text in exceeds the solution _ solve
Chart after demand :
highcharts The axis label text in exceeds the solution _ beyond _02
product : eldest brother ! My charts are almost out of sight. Okay , Put this bug Publish it , Let the front end change !!!

Or this , Just squeezed out
highcharts The axis label text in exceeds the solution _ Axis _03

product :WHAT ? My words are gone , Change !!!

N     S       S       M      D       X
(i)   (hi)   (hen)   (e)   (ong)   (i)

Good good , It's actually “ Whatever you say ” La


Get into the business

Although related problems are rarely found on the Internet , But in fact, there are some in the document .
Pictured :
highcharts The axis label text in exceeds the solution _ beyond _04
x Axis y All shafts have , He can customize labels, You can also add html Labels and styles

I wrote a small example below , You can refer to .

highcharts The axis label text in exceeds the solution _highcharts_05

Part of the code :

xAxis: {
categories: [' Yes, this is the super red, super big and super popular apple that smashed Newton ( Later, she was bitten by snow white ) Apple ',
' This is an orange that someone's father bought ',
' This is Kong rongrang's ',
' This is a grape that doesn't spit grape skin ',
' I am a banana who has nothing to say... Banana banana banana banana banana banana banana banana banana banana banana banana banana banana banana banana banana banana banana banana banana banana banana banana banana banana banana banana banana banana banana banana banana banana banana banana banana banana banana banana banana banana banana banana banana banana banana banana banana banana banana banana banana banana banana banana banana banana banana banana banana banana banana banana banana banana banana banana ~'],
labels:{
formatter: function() {
return '<span class="x-labels" title="' + this.value + '">' + this.value + '</span>'
},
useHTML: true
}
},

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.

css:

.x-labels{
color:blue;
max-width: 50px;
display: inline-block;
overflow:hidden;
text-overflow:ellipsis;
white-space: nowrap;
}

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
If you think it's helpful, remember to praise and encourage ~ highcharts The axis label text in exceeds the solution _ Axis _06 Scan the QR code above for my subscription number ~
Please bring the original link to reprint ,thank
Similar articles

2021-09-15

2021-09-15