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

Pop-up chart in tooltip - border problem

2 Answers 26 Views
Chart
This is a migrated thread and some comments may be shown as answers.
AP
Top achievements
Rank 1
Veteran
AP asked on 26 May 2017, 08:26 AM

I have a bar chart, which has a pop-up pie chart (showing some more granular information) in a tooltip.

This works well, except I don't seem able to change the thick border surrounding the pop-up chart (image attached). I've tried configuring the various borders (tooltip on the main chart, chartArea on the pop-Up chart etc..), but nothing makes any difference.  What do I need to set to reduce the border thickness?

The main chart tooltip is defined here:-

.Tooltip(tooltip => tooltip
            .Visible(true)
           .Template("#=tooltipTemplate(dataItem)#")
        )

 

The tooltip template here:-

<script id="childChartTemplate" type="text/x-kendo-template">
    <div id="childChart" />
    # setTimeout(function() { createChildChart(AdditionalID,Year,Mth,XValue); }) #
</script>

 

The JavaScript is:-

var tooltipTemplate = kendo.template($("#childChartTemplate").html());
 
 
           function createChildChart(medicID,Year, Mth, PractName) {
 
               var childDataSource = new kendo.data.DataSource({
 
                   transport: {
                       read: {
                           url: "@Url.Content("~/Dashboard/GetMonthlyMedicSessionSummary/Get")",
                   dataType: "json",
                   data: {
                       MedicID: medicID,
                       year: Year,
                       mth:Mth,
                       DirectorateID: selectedDirectorate
                   }
               }
               }
           });
           $("#childChart").kendoChart({
               dataSource: childDataSource,
               title: {
                   text: "Session Type Split - " + PractName,
                   font: "11px Arial"
 
               },
               theme:"bootstrap",
               legend: {
                   visible: true
               },
               seriesDefaults: {
                   type: "pie",
                   labels: {
                       visible: true,
                       format: "{0}"
                   }
               },
               
               series: [{
                   field: "YIntValue",
                   categoryField: "XValue",
                   name: "Session Type",
                   labels: {
                       visible: true,
                       distance: 15
 
                   }
               }]
           });
           }

Thanks

 

2 Answers, 1 is accepted

Sort by
0
Accepted
Stefan
Telerik team
answered on 30 May 2017, 05:49 AM
Hello Andrew,

After testing similar scenario, I notice that this is not only the border of the ToolTip but its background as well.

Please change the ToolTip background to white, for example, to observe if this will leave only the border in a different colour:

http://docs.telerik.com/aspnet-mvc/api/Kendo.Mvc.UI.Fluent/ChartTooltipBuilder#methods-Background(System.String)

Then if needed, the border can be modified as well:

http://docs.telerik.com/aspnet-mvc/api/Kendo.Mvc.UI.Fluent/ChartTooltipBuilder#methods-Border(System.Int32,System.String)

If additional assistance is needed, please send a fully runnable example and I will gladly assist.

Regards,
Stefan
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data (charts) and form elements.
0
AP
Top achievements
Rank 1
Veteran
answered on 30 May 2017, 07:15 AM
Thanks, setting the tooltip background to white has removed the thick blue border around the pop-up charts.
Tags
Chart
Asked by
AP
Top achievements
Rank 1
Veteran
Answers by
Stefan
Telerik team
AP
Top achievements
Rank 1
Veteran
Share this question
or