c3js synchronize tooltips of areachart and piechart showing the same data

I have a piechart and a arechart showing the same data. The piechart shows the summarized data of the areachart. Now I want to show the tooltip /highlight the data of the other chart if the respective data is selected.

jsfiddle: http://jsfiddle.net/gothmogg/m59poqcd/18/

I found a hint that I should use

onmouseover: function (d) { 
   chart2.tooltip.show({ x: d.x });
}

As a sample my code would look like (same as in jsfiddle)

var columns = ['data1', 'data2', 'data3', 'data4'];
var data = [];
data.push([20, 40, 30, 10, 50]);
data.push([50, 50, 50, 40, 60]);
data.push([10, 40, 60, 25, 30]);
data.push([80, 60, 30, 25, 35]);


var pieChart = c3.generate({
  bindto: d3.select('#pie-chart'),
  data: {
    columns: [
      [columns[0]].concat(data[0])
    ],
    type: 'pie',
    onmouseover: function(d, i) {
      if (areaChart)
        areaChart.tooltip.show({
          x: d.x
        });
    },

  }
});

var areaChart = c3.generate({
  bindto: d3.select('#area-chart'),
  data: {
    columns: [
      [columns[0]].concat(data[0])
    ],
    type: 'area-spline',
    onmouseover: function(d, i) {
      if (pieChart)
        pieChart.tooltip.show({
          x: d.x
        });
    },

  }
});

for (i = 1; i < columns.length; i++) {
  setTimeout(function(column) {
    pieChart.load({
      columns: [
        [columns[column]].concat(data[column]),
      ]
    });
    areaChart.load({
      columns: [
        [columns[column]].concat(data[column]),
      ]
    });
  }, (i * 5000 / columns.length), i);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.9/c3.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.9/c3.min.js"></script>

<div id="area-chart"></div>
<div id="pie-chart"></div>

The highlighting/tooltip of course does not work that way...

Any ideas except of manually highlighting with d3?

Solution

The trouble, in a logical sense, is the pie chart is an aggregation of the area chart - you can't match up the tooltips for the data series in each chart one to one between them.

If you highlighted a data series (a slice) in a pie chart, which of the 5 tooltips for that series would you expect to show up in the area chart? And if you tooltipped over one of the points in the area chart, would you expect the default tooltip for the pie chart to show up - which would show say 18.9% for the blue slice, when in reality you've only chosen/queried a small portion of it?

You might be better to synchronise the highlighting rather than the tooltips, but there's a problem there when the points overlap in the area chart too

http://jsfiddle.net/43ane5jk/1/

var pieChart = c3.generate({
  bindto: d3.select('#pie-chart'),
  data: {
    columns: [
      [columns[0]].concat(data[0])
    ],
    type: 'pie',
    onmouseover: function(d, i) {
      if (areaChart)
        areaChart.focus(d.id);
    },
    onmouseout: function(d, i) {
      if (areaChart)
        areaChart.revert();
    },

  }
});

var areaChart = c3.generate({
  bindto: d3.select('#area-chart'),
  data: {
    columns: [
      [columns[0]].concat(data[0])
    ],
    type: 'area-spline',
    onmouseover: function(d, i) {
      if (pieChart)
        pieChart.focus(d.id);
    },
    onmouseout: function(d, i) {
      if (pieChart)
        pieChart.revert();
    },

  }
});