How to do multiline textsymbol or textsymbol with linebreaks?

[MichaelTakiti]

I have a text symbol like the following:


            var textSymbol = new esri.symbol.TextSymbol(
              "Row 1 \n Row 2 \n Row 3",
              font, new dojo.Color([0, 0, 0])
            );
            var labelPointGraphic = new esri.Graphic(labelPoint,textSymbol);
            map.graphics.add(labelPointGraphic);

I want to be able to separate out the Row1, Row2, and Row3 into separate lines, but it appears that having "\n" does not work andstill shows up on the same line. If there is not a simple way to have a single textSymbol with multiple lines, then is there some way I can create two textSymbols such that the second is offset to be just below first text symbol? Something like:

            var textSymbol = new esri.symbol.TextSymbol(
              "Row 1",
              font, new dojo.Color([0, 0, 0])
            );
            var anothertextSymbol = new esri.symbol.TextSymbol(
              "Row 2",
              font, new dojo.Color([0, 0, 0])
            );

            var labelPointGraphic = new esri.Graphic(labelPoint,textSymbol);
            map.graphics.add(labelPointGraphic);
            var labelPointGraphic = new esri.Graphic(labelPoint,anothertextSymbol).offset("someamount", "someamount");
            map.graphics.add(labelPointGraphic);

Note that I have tried using offset, but it appears to space them out way more than I would like and the gaps appear to widen whenever I zoom in or out. Feels like this should be simple...

Please help.

[derekswingley1]

We do not have a good way to do a multi-line text symbol as a graphic. We're working on improving this (moving away from gfx text to use DOM elements) but don't have it ready yet. In the meantime, the only approach I can recommend is multiple symbols and trial and error.

[GauravKumar3]

Hi Derek

I am facing similar issue while working on globe.
Did you find any workaround in globe as well........

[SimonUyttendaele]

Hello,

Using newlines "\n" can be supported using the following solution.

Please vote upon the following idea which is precisely about this.

Regards

[JamalWest2]

Can this be done in wbappbuilder?

[MattiasEkström]

Did you ever figured it out @JamalWest2 ?
\n worked just fine for me in FireFox but recently I noticed that it doesn't work in Google Chrome.

[JamalWest2]

You can accomplish this using Arcade. 

var tempArcade2 = "$feature."+field1TextLB;//Website";

				var tempClass2 = new LabelClass({
				  labelExpressionInfo: {
					expression: tempArcade2
				  },
				  labelPlacement: placementLB,
				  minScale: MinScaleB,
				  maxScale: MaxScaleB
				});
				tempClass2.symbol = textSymB;
				tempClass2.PoS = "S";

this.sLayer.setLabelingInfo([tempClass,tempClass2]

[MattiasEkström]

I'm working with labels as TextSymbols created for a GraphicsLayer, it doesn't seem to be a setLabelingInfo method for a Graphic layer. Your example is for a feature Layer right?

[JamalWest2]

I'll have to go look at some of my code, but I think I did something on a graphic layer by creating an empty layer and cloning graphics layer to it and labeling.  basically i had something similar but need to look at it to let you know.