| 
 | 1 | +---  | 
 | 2 | +title: Highlighting Series on Legend Item Hover in Grouped and Stacked Bar Chart  | 
 | 3 | +description: Learn how to highlight all series across groups in a Kendo UI Bar Chart when hovering over a legend item.  | 
 | 4 | +type: how-to  | 
 | 5 | +page_title: How to Highlight All Series in Grouped and Stacked Bar Chart on Legend Hover - Kendo UI Chart  | 
 | 6 | +slug: highlight-all-series-on-legend-hover-kendo-ui-chart  | 
 | 7 | +tags: kendo ui, chart, bar chart, legend, hover, highlight, grouped, stacked  | 
 | 8 | +res_type: kb  | 
 | 9 | +ticketid: 723491  | 
 | 10 | +---  | 
 | 11 | + | 
 | 12 | +## Environment  | 
 | 13 | + | 
 | 14 | +<table>  | 
 | 15 | +<tbody>  | 
 | 16 | +<tr>  | 
 | 17 | +<td>Product</td>  | 
 | 18 | +<td>Chart for Progress® Kendo UI®</td>  | 
 | 19 | +</tr>  | 
 | 20 | +<tr>  | 
 | 21 | +<td>Version</td>  | 
 | 22 | +<td>2020.3.915</td>  | 
 | 23 | +</tr>  | 
 | 24 | +</tbody>  | 
 | 25 | +</table>  | 
 | 26 | + | 
 | 27 | +## Description  | 
 | 28 | + | 
 | 29 | +When using a grouped and stacked Bar Chart, I want to highlight all series within all groups when hovering over an item in the legend.   | 
 | 30 | + | 
 | 31 | +This KB article also answers the following questions:  | 
 | 32 | +- How to manually control the highlight of chart series on legend hover?  | 
 | 33 | +- How to implement custom highlighting for stacked and grouped charts in Kendo UI?  | 
 | 34 | +- How to use the `toggleHighlight()` method to highlight chart series?  | 
 | 35 | + | 
 | 36 | +## Solution  | 
 | 37 | + | 
 | 38 | +To highlight all series across groups in a Kendo UI Bar Chart when hovering over a legend item, prevent the Chart's internal highlighting logic and implement a custom highlight by using the [`toggleHighlight`](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/methods/togglehighlight) method. This can be accomplished within the [`legendItemHover`](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/events/legenditemhover) and [`legendItemLeave`](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/events/legenditemleave) event handlers.  | 
 | 39 | + | 
 | 40 | +1. Handle the `legendItemHover` event to prevent the default highlighting logic and manually apply the highlight to the series matching the legend item's text.  | 
 | 41 | +2. Use the `legendItemLeave` event to remove the highlight from the series when the mouse leaves the legend item.  | 
 | 42 | + | 
 | 43 | +The following example demonstrates how to configure the event handlers:  | 
 | 44 | + | 
 | 45 | +```javascript  | 
 | 46 | +$("#chart").kendoChart({  | 
 | 47 | +    // Chart configuration...  | 
 | 48 | +    legendItemHover: function(e) {  | 
 | 49 | +        e.preventDefault(); // Prevent default highlight  | 
 | 50 | +        e.sender.toggleHighlight(true, e.text); // Apply custom highlight  | 
 | 51 | +    },  | 
 | 52 | +    legendItemLeave: function(e) {  | 
 | 53 | +        e.sender.toggleHighlight(false, e.text); // Remove custom highlight  | 
 | 54 | +    }  | 
 | 55 | +    // Additional chart configuration...  | 
 | 56 | +});  | 
 | 57 | +```  | 
 | 58 | + | 
 | 59 | +For a practical demonstration, refer to the below Dojo demo.  | 
 | 60 | +```dojo  | 
 | 61 | + <div id="example">  | 
 | 62 | +        <div class="demo-section wide">  | 
 | 63 | +          <div id="chart"></div>  | 
 | 64 | +        </div>  | 
 | 65 | +        <script>  | 
 | 66 | +          function createChart() {  | 
 | 67 | +            $("#chart").kendoChart({  | 
 | 68 | +              title: {  | 
 | 69 | +                text: "World population by age group and sex"  | 
 | 70 | +              },  | 
 | 71 | +              legend: {  | 
 | 72 | +                visible: true  | 
 | 73 | +              },  | 
 | 74 | +              seriesDefaults: {  | 
 | 75 | +                type: "column",  | 
 | 76 | +                stack: {  | 
 | 77 | +                  type: "100%"  | 
 | 78 | +                }  | 
 | 79 | +              },  | 
 | 80 | +              series: [{  | 
 | 81 | +                name: "A",  | 
 | 82 | +                stack: {  | 
 | 83 | +                  group: "Company"  | 
 | 84 | +                },  | 
 | 85 | +                data: [10,5,15],  | 
 | 86 | +                highlight: {  | 
 | 87 | +                  visible: false  | 
 | 88 | +                },  | 
 | 89 | +              }, {  | 
 | 90 | +                name: "A",  | 
 | 91 | +                stack: {  | 
 | 92 | +                  group: "Mean"  | 
 | 93 | +                },  | 
 | 94 | +                data: [5,10,20],  | 
 | 95 | +                visibleInLegend: false  | 
 | 96 | +              }, {  | 
 | 97 | +                name: "B",  | 
 | 98 | +                stack: {  | 
 | 99 | +                  group: "Company"  | 
 | 100 | +                },  | 
 | 101 | +                data: [40,25,50]  | 
 | 102 | +              },{  | 
 | 103 | +                name: "B",  | 
 | 104 | +                stack: {  | 
 | 105 | +                  group: "Mean"  | 
 | 106 | +                },  | 
 | 107 | +                data: [50,10,15],  | 
 | 108 | +                visibleInLegend: false  | 
 | 109 | +              }, {  | 
 | 110 | +                name: "C",  | 
 | 111 | +                stack: {  | 
 | 112 | +                  group: "Company"  | 
 | 113 | +                },  | 
 | 114 | +                data: [30,35,5]  | 
 | 115 | +              }, {  | 
 | 116 | +                name: "C",  | 
 | 117 | +                stack: {  | 
 | 118 | +                  group: "Mean"  | 
 | 119 | +                },  | 
 | 120 | +                data: [40,25,35],  | 
 | 121 | +                visibleInLegend: false  | 
 | 122 | +              }, {  | 
 | 123 | +                name: "D",  | 
 | 124 | +                stack: {  | 
 | 125 | +                  group: "Company"  | 
 | 126 | +                },  | 
 | 127 | +                data: [20,35,30]  | 
 | 128 | +              }, {  | 
 | 129 | +                name: "D",  | 
 | 130 | +                stack: {  | 
 | 131 | +                  group: "Mean"  | 
 | 132 | +                },  | 
 | 133 | +                data: [5,55,30],  | 
 | 134 | +                visibleInLegend: false  | 
 | 135 | +              }],  | 
 | 136 | +              seriesColors: ["#02808B", "#02808B", "#37B1D4", "#37B1D4", "#41EDFC", "#41EDFC", "#81F3FD", "#81F3FD", "#C0F9FE", "#C0F9FE"],  | 
 | 137 | +              valueAxis: {  | 
 | 138 | +                line: {  | 
 | 139 | +                  visible: false  | 
 | 140 | +                }  | 
 | 141 | +              },  | 
 | 142 | +              categoryAxis: {  | 
 | 143 | +                categories: ["Total","Run","Invest"],  | 
 | 144 | +                majorGridLines: {  | 
 | 145 | +                  visible: false  | 
 | 146 | +                }  | 
 | 147 | +              },  | 
 | 148 | +              tooltip: {  | 
 | 149 | +                visible: true,  | 
 | 150 | +                template: "#= series.stack.group #s, age #= series.name #"  | 
 | 151 | +              },  | 
 | 152 | +              legendItemHover: function(e){  | 
 | 153 | +                e.preventDefault();  | 
 | 154 | +                  e.sender.toggleHighlight(true, e.text);  | 
 | 155 | +              },  | 
 | 156 | +              legendItemLeave: function(e) {  | 
 | 157 | +                e.sender.toggleHighlight(false, e.text);  | 
 | 158 | +              }  | 
 | 159 | +            });  | 
 | 160 | +          }  | 
 | 161 | +
  | 
 | 162 | +          $(document).ready(createChart);  | 
 | 163 | +          $(document).bind("kendo:skinChange", createChart);  | 
 | 164 | +        </script>  | 
 | 165 | +      </div>  | 
 | 166 | +```  | 
 | 167 | + | 
 | 168 | +## See Also  | 
 | 169 | + | 
 | 170 | +- [Chart Overview](https://docs.telerik.com/kendo-ui/controls/charts/chart/overview)  | 
 | 171 | +- [Chart toggleHighlight Method](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/methods/togglehighlight)  | 
 | 172 | +- [Chart legendItemHover Event](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/events/legenditemhover)  | 
 | 173 | +- [Kendo UI Dojo - Interactive Examples](https://dojo.telerik.com/)  | 
0 commit comments