c3js / c3js/c3

Legend position on chart interferes with tooltip functionality

Open
#2,189 1 comment 0 reactions 0 assignees View on GitHub
waiting on submitter
Dominant language
JavaScript
Stars
9.3k
Forks
1.4k
Avg merge
6d 16h
Merged PRs (30d)
1

Description

* **C3 version**: 0.4.18
* **D3 version**: 3.5.0
* **Browser**: IE 11.0.9600.18426, Chrome 61.0.3163.100
* **OS**: Windows 7 (64-bit)

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 }
});

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.