Chart tooltip does not wrap text

[jovaughn]

Is there anyway to force the text to wrap inside of a chart tool tip? I want to display a system message that is several lines long.

I cant add line break inside the template because i am only displaying one large message.

Placing it inside of a div with a defined width did not change anything.

See dataitem.SystemMessage-

<kendo-chart>
                <tooltip template="<div style='word-wrap:break-word;width:auto;word-break:break-all;'>#=dataItem.SystemMessage#</div>" visible="true">


                </tooltip>
            </kendo-chart>

 

Example:

https://dojo.telerik.com/umEGOBes/4

[Tsvetina]

Hi jovaughn,

Apart from placing the tooltip template in a div with defined width, you also need to apply a white-space: normal style in order to wrap the text when it overflows the div with:

tooltip: {
    visible: true,
    format: "{0}%",
    template: "<div style='width:200px; white-space:normal'>#= series.name #: #= value #</div>"
}

Here is an updated version of your client-side example:
https://dojo.telerik.com/umEGOBes/6

Regards,
Tsvetina
Progress Telerik