This is a migrated thread and some comments may be shown as answers.

Tooltip Template background not wide enough

4 Answers 15 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Robert
Top achievements
Rank 1
Veteran
Robert asked on 10 Sep 2019, 07:13 PM

Pie chart with a tooltip that uses a template.  The tooltip has a backgound color that is not wide enough to cover all the text in the label.  See attached image.

It doesn't appear there is a width property that I could increase.  Suggestions?

.Tooltip(tooltip => tooltip.Visible(true).Template("#= category # : #= kendo.format('{0:p}', dataItem.value)#"))

4 Answers, 1 is accepted

Sort by
0
Tsvetomir
Telerik team
answered on 12 Sep 2019, 10:19 AM
Hi Robert,

By default, the tooltip of the Kendo UI Chart expands until all of the content is shown. Therefore, there should be external logic which modifies the width of the tooltip. 

In terms of modifying the visual appearance of the tooltip, it could be done via the following CSS rule:

<style>
  .k-tooltip{
    width: 200px;
  }
</style>

In case the issue is still present is it possible for you to isolate the faulty behavior in a sample project and send it back to me?

Looking forward to your reply.


Best regards,
Tsvetomir
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Robert
Top achievements
Rank 1
Veteran
answered on 13 Sep 2019, 01:05 PM

This should reproduce the issue.

Class

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; }
       }

Chart

@(Html.Kendo().Chart<AllocationChartItem>()
            .Name("chartAllocations")
            .ChartArea(chartArea => chartArea
                .Background("transparent"))
            .Title(title => title
                .Text("Allocations")
                .Position(ChartTitlePosition.Top)
            )
            .Legend(legend => legend
                .Visible(false)
            )
            .SeriesDefaults(series =>
                series.Donut().StartAngle(150)
            )
            .DataSource(dataSource => dataSource
                .Group(group => group.Add(item => item.GroupName))
                            .Read(read => read.Action("AllocationPieChartData", "Account").Data("sendId"))                                  
            )
            .Series(series =>
            {
                series.Donut("value", "category")
                        .Name("Allocations");
            })
            .Tooltip(tooltip => tooltip.Visible(true).Template("#= category # : #= kendo.format('{0:p}', dataItem.value)#"))
             
)

Data for Chart

[
{
ID: 0,
category: "No Class",
value: 1,
GroupName: "Class",
color: "#79f747"
},
{
ID: 80873,
category: "Dorsey Wright SRS International",
value: 0.6,
GroupName: "Product",
color: "#5AB935"
},
{
ID: 2848,
category: "CLS Protected Equities",
value: 0.4,
GroupName: "Product",
color: "#438A27"
}
]

 

0
Robert
Top achievements
Rank 1
Veteran
answered on 13 Sep 2019, 01:09 PM
If I use your styling it will fix the one outlier with the long name but then every tooltip is really wide.  Ideally it should resize depending on the length of the text, or pick the longest item and size to that.
0
Tsvetomir
Telerik team
answered on 17 Sep 2019, 10:24 AM
Hi Robert,

I have created a sample project with the provided code snippets. However, it appears that the tooltip's background is automatically adjusted according to the content. Here is a short video demonstration:

https://screencast-o-matic.com/watch/cqQb6qtKlc

Can you ensure that there is no external CSS which might be interfering with the widths of the tooltip? 

I am attaching the sample project to my response. Is it possible for you to modify it in order to replicate the faulty behavior and send it back to me?

Looking forward to your reply.


Best regards,
Tsvetomir
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Chart
Asked by
Robert
Top achievements
Rank 1
Veteran
Answers by
Tsvetomir
Telerik team
Robert
Top achievements
Rank 1
Veteran
Share this question
or