Wrapping text within a series label

[Robert]

I found a few threads where Telerik responded that this feature was being implemented, and the threads were from around 2014 I think.  I have not found any threads with examples of how this is done, so not sure if it was ever implemented?  An example of what I'm looking for is attached.

Thanks

 

[Eyup]

Hello Robert,

 

Here is the item regarding this scenario and I hope the suggestions provided inside will prove helpful to you:
https://feedback.telerik.com/kendo-jquery-ui/1359025-enable-dynamic-text-wrapping-for-category-axis-labels-when-resizing-charts

 

Regards,
Eyup
Progress Telerik

[Robert]

Ok, so I got the wrapping.  Related question, is there a way to turn off the labels of the inner circle in a nested donut chart?  or have the inner pieces be tooltips and outer pieces be labeled?  See attached chart for problem.

[Eyup]

Hi Robert,

 

Could you modify the following live sample to demonstrate your configuration and send the new updated URL back to us?

https://dojo.telerik.com/azAHaKob

 

Regards,
Eyup
Progress Telerik

[Robert]

I work in MVC and find it difficult to translate from razor syntax to jquery for kendo elements.

Here is the data:

[
{
ID: 13315,
category: "High Yield Bond",
value: 0.1,
GroupName: "Class",
color: "#7198FF",
IsClass: true
},
{
ID: 43360,
category: "BIL",
value: 0.1,
GroupName: "Product",
color: "#7198FF",
IsClass: false
},
{
ID: 13319,
category: "Large Blend",
value: 0.3,
GroupName: "Class",
color: "#DE5A43",
IsClass: true
},
{
ID: 42686,
category: "IVV",
value: 0.15,
GroupName: "Product",
color: "#DE5A43",
IsClass: false
},
{
ID: 70860,
category: "Raub Brock Dividend Growth",
value: 0.15,
GroupName: "Product",
color: "#BC4C38",
IsClass: false
},
{
ID: 13321,
category: "Large Value",
value: 0.3,
GroupName: "Class",
color: "#618DBE",
IsClass: true
},
{
ID: 272,
category: "Federated Strat Value Dividend",
value: 0.3,
GroupName: "Product",
color: "#618DBE",
IsClass: false
},
{
ID: 13333,
category: "Small Growth",
value: 0.1,
GroupName: "Class",
color: "#81ddf1",
IsClass: true
},
{
ID: 70447,
category: "Bahl & Gaynor Small Cap Quality Growth",
value: 0.1,
GroupName: "Product",
color: "#81ddf1",
IsClass: false
},
{
ID: 13338,
category: "World Stock",
value: 0.1,
GroupName: "Class",
color: "#6ec5ab",
IsClass: true
},
{
ID: 70414,
category: "HJIM International Select",
value: 0.1,
GroupName: "Product",
color: "#6ec5ab",
IsClass: false
},
{
ID: 13407,
category: "Volatility",
value: 0.1,
GroupName: "Class",
color: "#499aa6",
IsClass: true
},
{
ID: 70421,
category: "12th Street Asset Opportunity",
value: 0.1,
GroupName: "Product",
color: "#499aa6",
IsClass: false
}
]

and here is the razor cshtml:

@(Html.Kendo().Chart<APLiteModels.Charts.AllocationChartItem>()
     .Name("allocation")
     .ChartArea(chartArea => chartArea
         .Background("transparent")
         .Margin(0)
         .Height(300))
     .PlotArea(plotArea => plotArea.Margin(0))
     .Title(title => title
         .Position(ChartTitlePosition.Top)
         .Color("#FFFFFF")
         .Margin(0)
         .Padding(0)
     )
     .Legend(legend => legend
         .Visible(false)
     )
     .SeriesColors(APLiteCore.ThemeHelper.AllChartTheme)
     .SeriesDefaults(series =>
         series.Donut().StartAngle(150)
     )
     .DataSource(dataSource => dataSource
         .Group(group => group.Add(item => item.GroupName))
                     .Read(read => read.Action("AllocationPieChartData", "Investments").Data("sendId"))
     )
     .Series(series =>
     {
         series.Donut("value", "category")
         .Size(35)
         .Name("Allocations")
         .Overlay(ChartPieSeriesOverlay.None)
         .Labels(labels => labels
                         .Template("#= category # : #= kendo.format('{0:P}', percentage) #")
                         .Background("transparent")
                         .Visible(true)
                         .Align(ChartPieLabelsAlign.Circle)
                         .Position(ChartPieLabelsPosition.OutsideEnd)
                     );
     })

     .Tooltip(tooltip => tooltip
         .Visible(false)
         .Template("#= category # : #= kendo.format('{0:P}', percentage) #")
     )
 )

[Robert]

public class AllocationChartItem
{
    public int ID { get; set; }
    public string category { get; set; }
    public decimal value { get; set; }
    public string GroupName { get; set; }
    public string color { get; set; }
    public bool IsClass { get; set; }
}

[Eyup]

Hi Robert,

 

You can try to use the visual or template capability provided by the Kendo Chart's series.labels API:
https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/series.labels.visual

Feel free to give it a try and let me know if it works for you.

 

Regards,
Eyup
Progress Telerik