Incubator-echarts: Long label at category axis

[norecces]

Hi,

And I would like to know if it's possible to split long label at category axis in multiple lines.
I'm using axis.axisLabel.interval = 0, because in category axis I have to show all labels and also chart width is fixed, so playing with grid didn't help.

Thanks

[norecces]

I've modified _buildAxisLabel in categoryAxis for case when category axis is vertical

else {
                var xPosition;
                var align;
                var labelSpace = this.grid.getX() - margin;
                var gap = this.getGap();
                if (this.option.position == 'left') {
                    xPosition = this.grid.getX() - margin;
                    align = 'right';
                } else {
                    xPosition = this.grid.getXend() + margin;
                    align = 'left';
                }
                for (var i = 0; i < dataLength; i += this._interval) {
                    if (intervalFunction && !intervalFunction(i, data[i]) || this._getReformedLabel(i) === '') {
                        continue;
                    }
                    dataTextStyle = zrUtil.merge(data[i].textStyle || {}, textStyle);
                    var axLabelSplited = this._getReformedLabel(i).split(/\s+/).reverse();

                    var axLabel;
                    var line = [];
                    var axLabelsArray = [];
                    var wasUsed = false;
                    var fontSize = this.option.axisLabel.textStyle.fontSize;
                    while (axLabel = axLabelSplited.pop()){
                        wasUsed = false;
                        line.push(axLabel);
                        labelSize = zrArea.getTextWidth(line.join(' '), fontSize);
                        if (labelSize >= labelSpace){
                            if (line.length == 1){
                                wasUsed = true;
                            }else{
                                line.pop();
                            }
                            axLabelsArray.push(line.join(' '));
                            line = [];
                            if (!wasUsed){
                                line = [axLabel];
                            }

                        }
                    }

                    axLabelsArray.push(line.join(' '));
                    var meanYPosition = parseInt(axLabelsArray.length/2);
                    console.log(axLabelsArray);

                    for (var lineNumber = 0; lineNumber < axLabelsArray.length; lineNumber++){
                        axShape = {
                            zlevel: this.getZlevelBase(),
                            z: this.getZBase() + 3,
                            hoverable: false,
                            style: {
                                x: xPosition,
                                y: this.getCoordByIndex(i) + fontSize * (lineNumber - meanYPosition),
                                color: dataTextStyle.color,
                                text: axLabelsArray[lineNumber],
                                textFont: fontSize,
                                textAlign: dataTextStyle.align || align,
                                textBaseline: dataTextStyle.baseline || i === 0 && this.option.name !== '' ? 'bottom' : i == dataLength - 1 && this.option.name !== '' ? 'top' : 'middle'
                            }
                        };

                        if (rotate) {
                            axShape.rotation = [
                                rotate * Math.PI / 180,
                                axShape.style.x,
                                axShape.style.y
                            ];
                        }
                        this.shapeList.push(new TextShape(this._axisLabelClickable(clickable, axShape)));
                    }
                }
            }

I use idea from how its done in d3.js ( http://bl.ocks.org/mbostock/7555321 ) and I get:

It would be nice if it will help

[pissang]

Hi norecces. Inserting '\n' is a way to split text into multiple lines. It's simple but not so smart for text wrapping. And in your code maybe its better to add a '\n' into the text when it needs a newline instead of creating a new TextShape.

Thanks for the advise and we will think about adding text wrapping in the TextShape.

[norecces]

@pissang Thanks!

Yes, using axLabelsArray.join('\n') much better than creating TextShapes, no need to calculate y position of every line.

[dogrocker]

Hello I've got the same problem with axis too.

How to fix this I try to use rotate but it not help.

Thanks for help.

[sbokorna]

Hello, is there any update about this feature? Thanks!

[dogrocker]

no.

[cgat]

@dogrocker This can be done by increasing the y2 value of the the grid option (it will give your chart more space, and thus not cut off your labels)