# Kibana chart element opacity on legend hover

**URL:** <https://discuss.elastic.co/t/kibana-chart-element-opacity-on-legend-hover/47017>\
**Category:** Kibana\
**Created:** [April 11, 2016, 4:24pm UTC](https://discuss.elastic.co/t/kibana-chart-element-opacity-on-legend-hover/47017 "2016-04-11T16:24:29Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Adam\_Whittaker](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/adam_whittaker/32/75325_2.png) [@Adam\_Whittaker](https://discuss.elastic.co/u/Adam_Whittaker)\
**Post date:** [April 11, 2016, 4:24pm UTC](https://discuss.elastic.co/t/kibana-chart-element-opacity-on-legend-hover/47017/1 "2016-04-11T16:24:29Z")

</div>

Hello,

Is there a way in the code or otherwise to change the default opacity that is set on chart elements when one item is hovered over? I would like to to make the none selected items more transparent so that the item i am interested in is more apparent.

Thanks,

---

<div class="post-metadata">

**Author:** ![LeeDr](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/leedr/32/9289_2.png) [@LeeDr](https://discuss.elastic.co/u/LeeDr)\
**Post date:** [April 11, 2016, 5:09pm UTC](https://discuss.elastic.co/t/kibana-chart-element-opacity-on-legend-hover/47017/2 "2016-04-11T17:09:52Z")

</div>

There's no built-in setting for that. I found the code here in src/ui/public/vislib/lib/dispatch.js. I changed it from 0.5 to 0.1 and it made a big difference;

```
  /**
   * Mouseover Behavior
   *
   * @param element {D3.Selection}
   * @method highlight
   */
  Dispatch.prototype.highlight = function (element) {
    var label = this.getAttribute('data-label');
    if (!label) return;
    //Opacity 1 is needed to avoid the css application
    $('[data-label]', element.parentNode).css('opacity', 1).not(
      function (els, el) { return `${$(el).data('label')}` === label;}
    ).css('opacity', 0.5);
  };
```

---

<div class="post-metadata">

**Author:** ![LeeDr](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/leedr/32/9289_2.png) [@LeeDr](https://discuss.elastic.co/u/LeeDr)\
**Post date:** [April 11, 2016, 5:13pm UTC](https://discuss.elastic.co/t/kibana-chart-element-opacity-on-legend-hover/47017/3 "2016-04-11T17:13:32Z")

</div>

Feel free to create an issue for an enhancement to have a setting for it here; [https://github.com/elastic/kibana](https://github.com/elastic/kibana)

---

<div class="post-metadata">

**Author:** ![Adam\_Whittaker](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/adam_whittaker/32/75325_2.png) [@Adam\_Whittaker](https://discuss.elastic.co/u/Adam_Whittaker)\
**Post date:** [April 11, 2016, 5:43pm UTC](https://discuss.elastic.co/t/kibana-chart-element-opacity-on-legend-hover/47017/4 "2016-04-11T17:43:19Z")

</div>

@LeeDr Does kibana need to be built after making this change or can i just restart the server? I tried changing the opacity and then restarting but it didnt change anything - i am on the last release of kibana (not 4.5) and the code in that file is slightly different:

```
   /**
     * Mouseover Behavior
     *
     * @param element {D3.Selection}
     * @method highlightLegend
     */
    Dispatch.prototype.highlightLegend = function (element) {
      var label = this.getAttribute('data-label');
      if (!label) return;
      $('[data-label]', element.parentNode).not('[data-label="' + label + '"]').css('opacity', 0.5);
    };
```

---

<div class="post-metadata">

**Author:** ![LeeDr](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/leedr/32/9289_2.png) [@LeeDr](https://discuss.elastic.co/u/LeeDr)\
**Post date:** [April 11, 2016, 6:01pm UTC](https://discuss.elastic.co/t/kibana-chart-element-opacity-on-legend-hover/47017/5 "2016-04-11T18:01:42Z")

</div>

Hi,

Yes, you would have to checkout that 4.5 branch of source and run from that. That's why I suggested the enhancement issue so you could have a production-ready setting for it.

---

<div class="post-metadata">

**Author:** ![Adam\_Whittaker](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/adam_whittaker/32/75325_2.png) [@Adam\_Whittaker](https://discuss.elastic.co/u/Adam_Whittaker)\
**Post date:** [April 12, 2016, 12:34am UTC](https://discuss.elastic.co/t/kibana-chart-element-opacity-on-legend-hover/47017/6 "2016-04-12T00:34:27Z")

</div>

OK, will do. Thank you very much for your help.

---

<div class="post-metadata">

**Author:** ![LeeDr](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/leedr/32/9289_2.png) [@LeeDr](https://discuss.elastic.co/u/LeeDr)\
**Post date:** [September 23, 2016, 7:24pm UTC](https://discuss.elastic.co/t/kibana-chart-element-opacity-on-legend-hover/47017/7 "2016-09-23T19:24:11Z")

</div>

FYI, I created an issue for this and it was just merged into Kibana master. I'm not sure if it's making it into the 5.0 release that's coming up or not.

> <https://github.com/elastic/kibana/pull/8448>

---

<div class="post-metadata">

**Author:** ![Adam\_Whittaker](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/adam_whittaker/32/75325_2.png) [@Adam\_Whittaker](https://discuss.elastic.co/u/Adam_Whittaker)\
**Post date:** [March 15, 2017, 3:24am UTC](https://discuss.elastic.co/t/kibana-chart-element-opacity-on-legend-hover/47017/8 "2017-03-15T03:24:30Z")

</div>

Thanks for submitting this.. Much appreciated.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [July 6, 2017, 1:32pm UTC](https://discuss.elastic.co/t/kibana-chart-element-opacity-on-legend-hover/47017/9 "2017-07-06T13:32:43Z")

</div>