Search code examples
javascripthtmlangularjskendo-uikendo-chart

kendo ui always show tooltip on top for pie chart angularjs


I have created a pie chart using kendoui referring to below link on telerik :-

https://demos.telerik.com/kendo-ui/pie-charts/angular

I tried to show tooltip on pie chart created which will always show without hover on pie chart.

I have referred below pages but not found any solution :-

  1. https://demos.telerik.com/kendo-ui/line-charts/local-data-binding

  2. Kendo UI Chart - Want tooltip to always show

  3. http://dojo.telerik.com/@Iliana/OnINu

  4. Kendo-ui tooltip in Angularjs

My code is below :-

<!-- Pie chart -->
<div class="demo-section k-content" ng-if="widget.id === 'pie'" id="widgetPie">
    <div id="pieWrapper">
        <div kendo-chart
            k-rebind="firmwareDevices"
            k-title="{ text: 'SLC Firmware Distribution', position: 'top' }"
            k-series-defaults="{ type: 'pie', labels: { visible: true }}"
            k-series="[{
                            field: 'doc_count',
                            name: 'SLC',
                            categoryField: 'key',
                            padding: 0,
                            color: '#b8b8b8'
                        }]"
            k-data-source="deviceObject"
            k-series-hover="onSeriesHover"
            k-series-colors="['#66b3ff', '#b2d9ff']"
            k-tooltip="{ visible: true, template: '#= category # device_count: #= value #' }"
            k-legend = "{ position: 'left' }",
            style="height: 270px; width:450px;"
            id="ltxPie">
        </div>
    </div>
</div> 


Solution

  • Referring to the demo example below:

    http://demos.telerik.com/kendo-ui/line-charts/local-data-binding

    Try to set k-series-defaults as follows :-

     k-series-defaults="{ type: 'pie', 
                          labels: {
                              visible: true,
                              format: '{0}%',
                              background: 'transparent'
                          }
                         }"