Pop-up chart in tooltip - border problem

[AP]

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

 

[Stefan]

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

[AP]

Thanks, setting the tooltip background to white has removed the thick blue border around the pop-up charts.