Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add tooltip textLabelColor callback #4199

Merged
merged 7 commits into from May 28, 2017
Merged

Add tooltip textLabelColor callback #4199

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
8141200
issue #4191
apoorvasrinivasan Apr 29, 2017
5623320
mass 50 error
apoorvasrinivasan Apr 29, 2017
6c0acdd
updated doc, test and default value of tooltip
apoorvasrinivasan Apr 29, 2017
4b04466
lint
apoorvasrinivasan Apr 29, 2017
d91c759
changed dependency to the tooltip obejct
apoorvasrinivasan Apr 29, 2017
4d242ac
removed function params
apoorvasrinivasan Apr 30, 2017
61410da
to labelTextColor
apoorvasrinivasan May 9, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 4 additions & 0 deletions docs/configuration/tooltip.md
View file
Open in desktop
Expand Up @@ -74,6 +74,7 @@ All functions are called with the same arguments: a [tooltip item](#chart-config
| `beforeLabel` | `tooltipItem, data` | Returns text to render before an individual label. This will be called for each item in the tooltip.
| `label` | `tooltipItem, data` | Returns text to render for an individual item in the tooltip.
| `labelColor` | `tooltipItem, chart` | Returns the colors to render for the tooltip item. [more...](#label-color-callback)
| `textLabelColor` | `tooltipItem, chart` | Returns the colors for the text of the label for the tooltip item.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What about labelTextColor instead?

| `afterLabel` | `tooltipItem, data` | Returns text to render after an individual label.
| `afterBody` | `Array[tooltipItem], data` | Returns text to render after the body section
| `beforeFooter` | `Array[tooltipItem], data` | Returns text to render before the footer section.
Expand All @@ -95,6 +96,9 @@ var chart = new Chart(ctx, {
borderColor: 'rgb(255, 0, 0)',
backgroundColor: 'rgb(255, 0, 0)'
}
},
textLabelColor:function(tooltipItem, chart){
return '#543453';
}
}
}
Expand Down
12 changes: 8 additions & 4 deletions src/core/core.tooltip.js
View file
Open in desktop
Expand Up @@ -87,6 +87,9 @@ module.exports = function(Chart) {
backgroundColor: view.backgroundColor
};
},
textLabelColor: function(tooltipItem, chart) {
return chart.tooltip._options.bodyFontColor;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it might be an idea here to pass the tooltip object as a parameter so that we're not reliant on it being a property of the chart. I know some users programmatically add extra tooltips and this would break that

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@etimberg can you please elaborate on this one. I'm not sure i understood that.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i have updated the code using this.
since we need to pass the chart object, how to bypass the eslint error ?

},
afterLabel: helpers.noop,

// Args are: (tooltipItems, data)
Expand Down Expand Up @@ -487,6 +490,7 @@ module.exports = function(Chart) {
model.opacity = 1;

var labelColors = [];
var textLabelColors = [];
tooltipPosition = Chart.Tooltip.positioners[opts.position](active, me._eventPosition);

var tooltipItems = [];
Expand All @@ -511,8 +515,10 @@ module.exports = function(Chart) {
// Determine colors for boxes
helpers.each(tooltipItems, function(tooltipItem) {
labelColors.push(opts.callbacks.labelColor.call(me, tooltipItem, me._chart));
textLabelColors.push(opts.callbacks.textLabelColor.call(me, tooltipItem, me._chart));
});


// Build the Text Lines
model.title = me.getTitle(tooltipItems, data);
model.beforeBody = me.getBeforeBody(tooltipItems, data);
Expand All @@ -525,6 +531,7 @@ module.exports = function(Chart) {
model.y = Math.round(tooltipPosition.y);
model.caretPadding = opts.caretPadding;
model.labelColors = labelColors;
model.textLabelColors = textLabelColors;

// data points
model.dataPoints = tooltipItems;
Expand Down Expand Up @@ -657,9 +664,6 @@ module.exports = function(Chart) {

ctx.textAlign = vm._bodyAlign;
ctx.textBaseline = 'top';

var textColor = mergeOpacity(vm.bodyFontColor, opacity);
ctx.fillStyle = textColor;
ctx.font = helpers.fontString(bodyFontSize, vm._bodyFontStyle, vm._bodyFontFamily);

// Before Body
Expand Down Expand Up @@ -693,7 +697,7 @@ module.exports = function(Chart) {
// Inner square
ctx.fillStyle = mergeOpacity(vm.labelColors[i].backgroundColor, opacity);
ctx.fillRect(pt.x + 1, pt.y + 1, bodyFontSize - 2, bodyFontSize - 2);

var textColor = mergeOpacity(vm.textLabelColors[i], opacity);
ctx.fillStyle = textColor;
}

Expand Down
5 changes: 5 additions & 0 deletions test/specs/core.tooltip.tests.js
View file
Open in desktop
Expand Up @@ -330,6 +330,7 @@ describe('Core.Tooltip', function() {
afterBody: [],
footer: [],
caretPadding: 2,
textLabelColors: ['#fff'],
labelColors: [{
borderColor: 'rgb(255, 0, 0)',
backgroundColor: 'rgb(0, 255, 0)'
Expand Down Expand Up @@ -393,6 +394,9 @@ describe('Core.Tooltip', function() {
},
afterFooter: function() {
return 'afterFooter';
},
textLabelColor: function() {
return 'textLabelColor';
}
}
}
Expand Down Expand Up @@ -476,6 +480,7 @@ describe('Core.Tooltip', function() {
afterBody: ['afterBody'],
footer: ['beforeFooter', 'footer', 'afterFooter'],
caretPadding: 2,
textLabelColors: ['textLabelColor', 'textLabelColor'],
labelColors: [{
borderColor: 'rgb(255, 0, 0)',
backgroundColor: 'rgb(0, 255, 0)'
Expand Down