c3js / c3

:bar_chart: A D3-based reusable chart library
http://c3js.org
MIT License
9.34k stars 1.39k forks source link

Legend position on chart interferes with tooltip functionality #2189

Open heaton84 opened 6 years ago

heaton84 commented 6 years ago

Using a timeseries chart, with legend position inset, anchored top-left with x=0 and y=0, the mouseover functionality of the chart stops working when the vertical line intersects with the legend (tooltip no longer displays).

Exact chart configuration is as follows (data removed for brevity):

document.chart = c3.generate({ bindto: '#chart', size: { height: 768 }, transition: { duration: 0 }, onrendered: clearWorkingNotification, legend: { position: 'inset', inset: { anchor: 'top-left', x: 0, y: 0, step: 99 }, item: { onclick: function(id) { document.chart.unload({ ids: [ id ] }); } } }, data: { x: 'TimeStamp', xFormat: '%m/%d/%Y %H:%M:%S', // 'xFormat' can be used as custom format of 'x' columns: [ / data truncated / ] }, axis: { x: { type: 'timeseries', tick: { format: '%m/%d/%Y %H:%M:%S', count: 20, culling: { max: 10 } } }, y2: { show: false } }, grid: { x: { show: true }, y: { show: true } }, point: { show: false }, subchart: { show: false } });

panthony commented 6 years ago

Hi,

Could you provide a JSFiddle or Plunkr highlighting the issue?

It makes reproduction much easier for everyone.

Thank you!