Pie Chart Legend Configuration: How to implement labels after custom marker & make static?

3 posts, 0 answers
  1. Megan
    Megan avatar
    2 posts
    Member since:
    Aug 2018

    Posted 01 Nov Link to this post

    Hi,

    I'm trying to implement the legend into my Pie Chart. I have two questions. 

    1.) I've noticed that if the user selects the an item in the legend, the data in the graph changes to either include or exclude that data items. I do not want my users to be able to do so in my graph. Is there a way to shut this off?

    2.) I changed the marker in the legend to be a square instead of a slim rectangle. I can't figure out how to get my labels back to how they were originally, only with the new marker. I keep getting 'undefined' labels. Please review the code below and provide any clues.

        $("#pie1").kendoChart({
            chartArea: {
                width: 500,
                height: 500
            },
            title: {
                position: "top",
                text: "2017 "
            },
            seriesDefaults: {
                labels: {
                    background: "transparent",
                    template: "#= category #: \n #= value#%"
                }
            },
            series: [{
                type: "pie",
                startAngle: 150,
                data: [{
                    category: "example 1",
                    value: 35.8,
                    color: "#f2ea39"
                },{
                    category: "example 2",
                    value: 33.9,
                    color: "#0e1b2d"
                },{
                    category: "example 3",
                    value: 16.4,
                    color: "#134475"
                },{
                    category: "example 4,
                    value: 9.1,
                    color: "#507da8"
                },{
                    category: "example 5",
                    value: 2.8,
                    color: "#b6c8db"
                },{
                    category: "example 6",
                    value: 1.9,
                    color: "#fbf9c9"
                }]
            }],
            tooltip: {
                visible: true,
                background: "#",
                format: "#= category #: \n #= value#%"
            },
            legend: {
                position: "bottom",
    labels: {
                    font: "1em Avenir",
                    padding: 10
                    },
                align: "center" ,
                item:{
                    visual: function (e) {
                        var color = e.options.markers.background;
                        var labelColor = e.options.labels.color;
                        var rect = new kendo.geometry.Rect([0,0],[150,100]);
                        var layout = new kendo.drawing.Layout(rect, {
                         spacing: 5,
                         alignItems: "center"
                        });

                        var marker = new kendo.drawing.Path({
                         fill: {
                            color: color
                         }
                        }).moveTo(0, 0).lineTo(0, 15).lineTo(15, 15).lineTo(15, 0).lineTo(0, 0).close();

                        var label = new kendo.drawing.Text(e.series.data.category, [0, 0], {
                         fill: {
                            color: labelColor
                         }
                        });

                        layout.append(marker, label);
                        layout.reflow()

                        return layout;
                    }
                }

            }
        });

     

     

    Thank You!

  2. Megan
    Megan avatar
    2 posts
    Member since:
    Aug 2018

    Posted 02 Nov Link to this post

    I submitted the above question in a support ticket. Here's the response for future reference:

     

    To access the category field for the labels:

    var label = new kendo.drawing.Text(e.series.data[e.pointIndex].category, [0, 0], {
        fill: {
            color: labelColor
        }
    });

     

    To prevent the user's ability to toggle on the legend:

    legendItemClick: function(e){
        e.preventDefault();
    }

     

  3. Tsvetomir
    Admin
    Tsvetomir avatar
    87 posts

    Posted 02 Nov Link to this post

    Hi Megan,

    Including and excluding items based on a legend item click is a default behavior which all charts support. A possible approach to prevent toggling the series visibility is to subscribe to the legendItemClick event and call the preventDefault() method.
    The return value of the e.series.data.category is 'undefined'. The data property returns an array of the items in the chart. In order to access their category values, try alternating the expression as follows:

    var label = new kendo.drawing.Text(e.series.data[e.pointIndex].category, [0, 0], {
                             .  .  .
                        });

    For your convenience, I have created a Dojo sample using the provided declaration of the Kendo UI Chart and implemented the abovementioned suggestions:

    https://dojo.telerik.com/iRuxEyiV

    Let me know if you need further assistance.


    Kind regards,
    Tsvetomir
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top