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

[Megan]

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!

[Megan]

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();
}

 

[Tsvetomir]

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.

• https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/events/legenditemclick

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