CODEWITHSUNDEEP
javascriptkendo-uikendo-chartdonut-chart
Ciccio
Ciccio

Reputation: 468

kendoui chart donut set highlight

i have a kendo ui chart donut, and i want to set the "path" with opacity: 0.5 in the drawing moment by reading a param, in my case the param is "active" i have tried write "visual" function but never is executed...

I have tried with toggleHighlight but not work.

$("#chart").kendoChart({
            chartArea: {
                width: 440,
                height:300
            },
            seriesDefaults: {
                labels: {
                    template: "# if(dataItem.active) { #☑# } else { #☐# }# #= kendo.format('{0:P}', percentage)#",
                    position: "outsideEnd",
                    visible: true,
                    background: "transparent",
                    font: "14px Verdana"
                },
                opacity: 1
            },
            series: [{
                type: "donut",
                data: [{
                    category: "Football",
                    value: 35,
                    active: false
                }, {
                    category: "Basketball",
                    value: 25,
                    active: false
                }, {
                    category: "Volleyball",
                    value: 20,
                    active: true
                }],
                highlight: {
                    visible: true,
                    opacity: 0.5,
                    toggle: function (e) {
                        e.preventDefault();
                        var opacity = e.dataItem.active ? 0.5 : 1;
                        e.visual.opacity(opacity);
                    }
                },
                visual: function (e) {
                    console.log("visual");
                    console.log(e);
                }
            }],
            seriesClick: function (e) {
                debugger;
                console.log(e);
                var $this = this;

                var series = $this.options.series[0].data;
                for (var i = 0; i < series.length; i++) {
                    if (series[i].category == e.category) {
                        series[i].active = !series[i].active;
                        if (series[i].active) {
                            console.log("TOOGLE");
                        }
                    }
                }
                //this.setOptions({ series: series });
                this.refresh();
            }
        });

Someone has some idea how to set the opacity=0.5 on specific "path"? thank you very much for all help!

Upvotes: 0

Views: 791

Answers (2)

ezanker
ezanker

Reputation: 24738

In the visual property of the series, you can do it like this:

visual: function (e) {
    var opacity = e.dataItem.active ? 0.5 : 1;
    e.options.opacity=opacity;
    var v = e.createVisual();
    return v;
}

DEMO

Upvotes: 2

Srinivasan Lakshmanan
Srinivasan Lakshmanan

Reputation: 433

In this code if you set border opacity mean it will affect 

$("#chart").kendoChart({
  series: [{
      type: "pie",
      data: [1, 2],
      highlight: {
        border: {
          opacity: 0.5,
          width: 5,
          color: "black"
        }
      }
  }]
});

Live Demo

Upvotes: 0

Related Questions