Add image to the label text in Pie Chart

2 posts, 0 answers
  1. Mohamed
    Mohamed avatar
    1 posts
    Member since:
    Jul 2011

    Posted 22 Jul 2015 Link to this post

    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>​ 

     

  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 23 Jul 2015 Link to this post

    Hi Mohamed,

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

    For this scenario 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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top