CODEWITHSUNDEEP
d3.jsc3.js
user3006967
user3006967

Reputation: 3545

are there any way to change c3js stacked area chart opacity on mouse hover

I have a question regarding c3.js. Currently, we are using c3js to display a stacked area chart, that is pretty fine, but our client asked us if we can change the individual area's opacity when customer is mouse hovering one area. I could not find any solution for this, and hope to hear your suggetions. Thanks

Upvotes: 0

Views: 306

Answers (1)

mgraham
mgraham

Reputation: 6207

Try adding this after you've set up your chart -->

d3.selectAll(".c3-area")
    .style ("pointer-events", "all")
    .on("mouseover", function (d) { return d3.select(this).style("opacity", 0.6)})
    .on("mouseout", function (d) { return d3.select(this).style("opacity", 0.2)})
;

The pointer-events setting is the important bit as by default most of the elements in the c3 chart are styled to ignore them.

Add it to the end of the c3 example to see it working --> https://c3js.org/samples/chart_area.html

Upvotes: 2

Related Questions