Having CSS classes for the legend when handling :hover styling
- Dominant language
- JavaScript
- Stars
- 9.3k
- Forks
- 1.4k
- Avg merge
- 6d 16h
- Merged PRs (30d)
- 1
Description
Hi and thank you for your terrific job with this thing.
I was trying to use `.c3-legend-item-hidden` class style to control how c3 handles displaying the chart legend when the user hovers over it - unsuccessfully I might add. I peeked into the `c3.js` source code and discovered that c3 does handle this directly by setting/animating the `opacity` property itself on specific affected elements in the DOM.
This is highly uncustomizable :cry: What if I wanted to handle this myself using CSS with no transition and with custom styling? For example I don't like having medium-slow opacity transition to hide all legend items but the one I hover over, but currrently I do not have the option to do this by myself with CSS.
Additionaly: this current c3's hover-animation which c3 now does to handle hovering over legend is _not_ controllable with `transition.duration` c3 setting.
I think something like implementing this possibility:
```
.c3-legend-hover { // or .c3-legend:hover, but having ability to switch off internal c3 transition handling
opacity: 0.5;
}
.c3-legend-hover .c3-legend-item {
font-weight: bold;
text-decoration: underline;
opacity: 1;
}
```
...would be a great feature to have. :) Would you please consider adding it?
_I would have tried it and then created a PR myself, but as this is the first day I am actively trying to create something with your otherwise great piece of software, I'm absolutely unsure what to do and where and how to do it._
_That's also me saying that **if I missed something and this is in fact possible to control with pure CSS, please do tell me.**_
Contributor guide
Assessment
This issue has not been assessed yet.