No option for chartcolor on mousehover

[Lars-Sommer]

When you hover a chart, donut chart for an example, the color on the current highlighted data fades out. Its like the transparency of the color sets to around 50%.

I would really like to alter this behaviour. Either remove the effect, or just change the color.
As far as I can see, this currently isn´t an option?

[junedchhipa]

states: {
  hover: {
   filter: {
      type: 'none'
    }
  }
}

Enable/disable hover and selected states - https://apexcharts.com/docs/options/states/

As for your other question to change the hover color, currently, that's not possible.

[Lars-Sommer]

Oh in the states object..
Thanks alot, and thanks for the great chart!

[DharmarajPS]

I found a workaround for this using CSS. Please correct if I am wrong.

.apexcharts-bar-area[filter^="url(#SvgjsFilter"]{
fill: red;
}

[Elaniobro]

@DharmarajPS interesting. This works just fine for me without all the added specificity

.apexcharts-bar-area:hover {
  fill: #FF0099;
}

[JenniferTactill]

@DharmarajPS interesting. This works just fine for me without all the added specificity

.apexcharts-bar-area:hover {
  fill: #FF0099;
}

How do you override the css ?

[DharmarajPS]

@JenniferTactill

You can override the css by using "!important".

Example:

.apexcharts-bar-area:hover { fill: #FF0099 !important; }

[JenniferTactill]

@JenniferTactill

You can override the css by using "!important".

Example:

.apexcharts-bar-area:hover { fill: #FF0099 !important; }

That is not my question. I'm asking how do we override the css of this typical file.
Where do I write this style ?
How do I tell apexchart component to take this css file ?

[DharmarajPS]

@JenniferTactill
You can override the css by using "!important".
Example:
.apexcharts-bar-area:hover { fill: #FF0099 !important; }

That is not my question. I'm asking how do we override the css of this typical file.
Where do I write this style ?
How do I tell apexchart component to take this css file ?

Each Vue component will be having <style></style> tags(scoped/universal). You can specify in universal css

[JenniferTactill]

@JenniferTactill
You can override the css by using "!important".
Example:
.apexcharts-bar-area:hover { fill: #FF0099 !important; }

That is not my question. I'm asking how do we override the css of this typical file.
Where do I write this style ?
How do I tell apexchart component to take this css file ?

Each Vue component will be having <style></style> tags(scoped/universal). You can specify in universal css

Thank you

[sacalata]

@JenniferTactill

You can override the css by using "!important".

Example:

.apexcharts-bar-area:hover { fill: #FF0099 !important; }

Thank you, is there any alternative for when clicking the bar?, I want to change the bar's style when it is selected.