c3.js - How to manually trigger the hover of a donut arc? - d3.js

Question

I'm using c3.js and have a donut chart that has custom text inside the donut as you hover over each category. I got that all working great.
I have some custom elements relating to the chart but are detached from the chart completely... if user hovers on those custom elements, i need to trigger a hover over a specific donut arc so the "onmouseover" triggers and the middle of donut gets updated as well.
var chart = c3.generate({
data: {
columns: [
['data1', 30],
['data2', 120],
],
type: 'donut',
onmouseover: (d) => {
// does stuff to middle of donut not included here
console.log("onmouseover", d);
}
},
donut: {
title: "custom data here"
},
});
// i want to highlight and run onmouseover for specific chart arc
$('.custom-bars .bar').hover(
function() {
var id = $(this).data('id');
console.log('trigger ' + id + ' arc hover state');
}, function() {
// remove hover
}
);
.custom-bars .bar {
background: #ccc;
margin-bottom: 10px;
padding: 10px;
display: inline-block;
cursor: pointer;
}
<div class="custom-bars">
<div class="bar bar1" data-id="data1">data1 related stuff</div>
<div class="bar bar2" data-id="data2">data2 related stuff</div>
</div>
<div id="chart" style="width:100%; height: 350px;"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.3.0/c3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.12/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
so when someone hovers over .bar1 I want to manually trigger data1 column on the chart so it highlights that arc and runs the "onmouseover" callback which updates the middle of the donut and everything else I need to do. The handling of generating chart and custom-bars will be in separate class methods.

Answer 1

https://jsfiddle.net/pelluche/2adtw71o/30/
Thanks to Ruben I think I figured out how to manually trigger a donut arc. I updated my fiddle. chart.focus() trigger the highlight but it doesn't run the onmouseover, so to grab it's values you can use chart.data.shown(). If someone knows a way to trigger the onmouseover of that arc please let me know.
$('.custom-bars .bar').hover(
function() {
var id = $(this).data('id');
var arcData = chart.data.shown(id);
chart.focus(id);
console.log(arcData);
}, function() {
chart.revert();
}
);