c3js / c3js/c3

Having CSS classes for the legend when handling :hover styling

Open
#1,006 1 comment 1 reaction 0 assignees View on GitHub
C-feature-request
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.