Reputation: 819
I am trying to plot a c3 scatter chart. On mouse hover on tool tip, it shows data set name. Instead i want to display a custom text on that tool tip. My code snippet is below.current image
var chart = c3.generate({
bindto: '#scatter',
data: {
xs: {
positive: 'positive_x',
negative: 'negative_x',
neutral: 'neutral_x'
},
columns: [
$scope.positiveXvalue,
$scope.positiveYvalue,
$scope.negativeXvalue,
$scope.negativeYvalue,
$scope.neutralXvalue,
$scope.neutralYvalue
],
colors: {
positive: '#008000',
negative: '#FF0000',
neutral: '#A9A9A9'
},
type: 'scatter'
},
axis: {
x: {
label: 'Sentiment',
tick: {
fit: false
}
},
y: {
label: 'Followers'
}
});
How to add a custom label on mouse hover(as tool tip)?
Upvotes: 2
Views: 856
Reputation: 8197
You must be looking for tooltip.format.title.
For a scatter plot there is some difference.
Function specified at tooltip.format.title recieve coordinates of hovered data-point. For a traditional line/bar chart it is just integer index.
But for scatter plot it goes in 'x.y' format. So you may have a need to split it:
tooltip: {
format: {
title: function (coord) {
var xy = coord.toString().split('.');
return 'Data at [' + xy[0] + ',' + xy[1] + ']';
}
}
}
Further implementation depends on how your custom titles are stored.
Upvotes: 1