Add image to the label text in Pie Chart

[Mohamed]

I want to add an ​img to the series label and put the same image into the series drawing area if possible, i did the following:

  <script>

            function createChart() {
                $("#chart").kendoChart({
                    title: {
                        position: "bottom",
                        text: "Shareholders Share Percentage"
                    },
                    legend: {
                        visible: false
                    },
                    chartArea: {
                        background: "#f4f4f4"
                    },
                    seriesDefaults: {
                        labels: {
                            visible: true,
                            background: "transparent",
                            template: function(e) { 

return ' A  ';



}, //"  #= category # \n #=value#% ",
                            font: "18px 'ralewayregular'"
                        }
                    },
                    series: [{
                        type: "pie",
                        startAngle: 150,
                        data: [{
                            category: "ADNOC",
                            value: 60.0,
                            color: "#3b6492"
//explode: "explode"
                        }, {
                            category: "JODCO",
                            value: 12.0,
                            color: "#b3c1db",
                        }, {
                            category: "BP",
                            value: 14.64,
                            color: "#7d9ac6",
                        }, {
                            category: "Total",
                            value: 13.32,
                            color: "#4877af",
                        }]
                    }],
                    tooltip: {
                        visible: true,
                        format: " <b style='font-size:16px'>{0}%</b> "
                    }
                });
            }

            $(document).ready(createChart);
            $(document).bind("kendo:skinChange", createChart);
        </script>​ 

 

[Iliana Dyankova]

Hi Mohamed,

I posted a reply in your other thread on the same subject, however here is quote from my answer:

For this  you could use the series.labels.visual feature. Take a look at the following examples:
- Demo 1
- Demo 2
as well as the drawing API docs. For your convenience here is a basic example which demonstrates how to add images in pie chart labels.

Regards,
Iliana Nikolova
Telerik