[Solved] Issue with template for a funnel chart

[Michael]

I am currently using knockout-js with kendo to make a funnel chart. I have the following set-up:

 this.chartOptions = ko.observable({
series: [{
                type: "funnel",
                dynamicSlope: false,
                field: "data",
                categoryField: "description",
                dynamicHeight: false,
                segmentSpacing: 5,
                labels: {
                    color: "#000",
                    visible: true,
                    background: "transparent",
                    align: "center",
                 //   template: "#= category#<br/>#= value#",
                    template: "#= category#: #= kendo.format('{0:p}',value)#",
                    font: "11px sans-serif; font-weight: bold",
                },
            }],
            tooltip: { 
                visible: true,
                template: "#= category#<br/>#= kendo.format('{0:p}',value/dataItem.parent()[0].data)#",
                color: "#FFF"
            }

});
My issue is that for some reason, if I add a breakline in the template string for the chart labels, it stops rendering. It completely breaks. However, the exact same template layout in the tooltip works perfectly. This is what I want:  template: "#= category#: <br /> #= kendo.format('{0:p}',value)#", Many thanks for any help.

[T. Tsonev]

Hello,

What's happening here is that the labels are rendered as part of the vector graphics (SVG, VML or Canvas) whilte the tooltip is an overlay element implemented in HTML.

As such <br> is not supported, but \n will work fine.

I understand that the difference is non-obvious when looking at the configuration. We'll try to improve the documentation on this topic.

Regards,
T. Tsonev
Telerik

 

 

[Michael]

Thank you for the reply. Unfortunately I still can't get it to work...

this.chartOptions = ko.observable({
        series: [{
                         // other options removed for brevity
                         template: "#= category#:\n\n  #= kendo.format('{0:p}',value)#"
                     }];
});

[T. Tsonev]

Hi,

I tried to reproduce the issue in this snippet, but without success. The newlines are rendered.

I didn't use knockout, but this shouldn't have effect in this case as the chart only cares for the template value.

Regards,
T. Tsonev
Telerik