Skip to content

PointLabels padding #5873

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

Closed
wants to merge 5 commits into from
Closed

PointLabels padding #5873

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
16e73f5
added padding options to pointLabels (radial charts)
ketys-from-meiro Nov 30, 2018
506b59b
sqrt(padding) instead of (padding / 2) in some cases
ketys-from-meiro Nov 30, 2018
dcb496c
fixed missing semicolon
ketys-from-meiro Nov 30, 2018
dcdfd45
added padding to docs, implemented via sin/cos functions
ketys-from-meiro Dec 15, 2018
9e853d8
fixed missing space
ketys-from-meiro Dec 15, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/axes/radial/linear.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,3 +109,4 @@ The following options are used to configure the point labels that are shown on t
| `fontFamily` | `String` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Font family to use when rendering labels.
| `fontSize` | `Number` | 10 | font size in pixels.
| `fontStyle` | `String` | `'normal'` | Font style to use when rendering point labels.
| `padding` | `Number` | 0 | Padding between chart and point labels.
11 changes: 9 additions & 2 deletions src/scales/scale.radialLinear.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -247,12 +247,19 @@ module.exports = function(Chart) {
}
}

function adjustPointPositionForLabelHeight(angle, textSize, position) {
function adjustPointPositionForLabelHeight(angle, textSize, position, padding) {
var rad;
var paddingValue = padding ? padding : 0;
if (angle === 90 || angle === 270) {
position.y -= (textSize.h / 2);
} else if (angle > 270 || angle < 90) {
position.y -= textSize.h;
}
if (paddingValue) {
rad = helpers.toRadians(angle);
position.x += Math.sin(rad) * paddingValue;
position.y -= Math.cos(rad) * paddingValue;
}
}

function drawPointLabels(scale) {
Expand Down Expand Up @@ -300,7 +307,7 @@ module.exports = function(Chart) {
var angleRadians = scale.getIndexAngle(i);
var angle = helpers.toDegrees(angleRadians);
ctx.textAlign = getTextAlignForAngle(angle);
adjustPointPositionForLabelHeight(angle, scale._pointLabelSizes[i], pointLabelPosition);
adjustPointPositionForLabelHeight(angle, scale._pointLabelSizes[i], pointLabelPosition, pointLabelOpts.padding);
fillText(ctx, scale.pointLabels[i] || '', pointLabelPosition, plFont.size);
}
}
Expand Down