Apexcharts.js: Option to customize long label to multiple lines

[xgenvn]

Hi,

Is there any way to achieve multiple lines for a long label along the x-axis?
I played with customed formatter but no luck.

Thanks.

[Tieantono]

Yeah, I also would like to know about this.

[xgenvn]

It seems currently we cannot do it easily as the texts are drawn using svg engine. The tspan can be plugged attributes for further placement. I need some inputs from you guys to make a PR for this perhaps. Thanks.

[junedchhipa]

Related to #388

[xgenvn]

I reopen this issue due to misreading the title of referenced issue (which is the title of the axis). I think we should extend similar behavior for labels as well.

[xgenvn]

@junedchhipa Can you provide some infos so we can come up with a solution?

• As we reference from the #388, are we waiting for svgjs to update their docs to 3.0?
• Should I probably look into XAxis.js|YAxis.js for customizing the labels or we can do at Graphics.js@drawText?

Thanks.

[aviranmz]

anyone was able to do so ? two line on x-axis label

[xgenvn]

anyone was able to do so ? two line on x-axis label

I did a very small patch to support my work atm:

//apexcharts.js/src/modules/Graphics.js
//line 498
  addTspan(textEl, text, fontFamily) {
    //patched: used text instead of tspan for new line
    const tspan = textEl.text(text)

Then you will need to put y-offset for labels as well:

...
labels: {
          show: true,
          trim: false,
          rotate: 0,
          rotateAlways: false,
          offsetY: -10,
          style: {
            cssClass: "custom-label",
            fontSize: "7pt"
          }
        }
...

Here for the text you need to use \n to split into new lines.

[andersonscherrer]

@xgenvn how can I use that patch?

[xgenvn]

@xgenvn how can I use that patch?
Perhaps you can take a look at this package: https://www.npmjs.com/package/patch-package
For me, I cloned the project and did the patch instead of using npm.

[andersonscherrer]

thanks, it seems to work but the text param is 'elipsed' already independent if using tspan or text,
I thing it is becuase:
`
line 766 of Graphics.js
placeTextWithEllipsis(textObj, textString, width) {
textObj.textContent = textString

if (textString.length > 0) {
  // ellipsis is needed
  if (textObj.getComputedTextLength() >= width) {
    for (let x = textString.length - 3; x > 0; x -= 3) {
      if (textObj.getSubStringLength(0, x) <= width) {
        textObj.textContent = textString.substring(0, x) + '...'
        return
      }
    }
    textObj.textContent = '...' // can't place at all
  }
}

}`

[junedchhipa]

Since v3.15.0, ApexChart supports multiline text. Just place your strings in an array as described below.

xaxis: {
  categories: [
    'Apples',
    'Pineapples',
    'Pears',
    ['Quararibea', 'cordata'],
    ['Prickly', 'Pear'],
    'Tangerines'
  ]
}

Here's the doc - https://apexcharts.com/docs/multiline-text-and-line-breaks-in-axes-labels/

[DevChrisDev]

@junedchhipa i wonder if i can do this on yaxis on my multi range timeline. if my text is too long it changes other text to "..."