Skip to content

ticks.display: 'above' #6226

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
kurkle wants to merge 4 commits into from
Closed

ticks.display: 'above' #6226

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f53c872
ticks.display: 'top'
kurkle Dec 13, 2018
a3d1435
'above' instead of 'top'
kurkle Apr 26, 2019
6195c32
Add documentation
kurkle Apr 26, 2019
48562e0
restore unintentionally removed checks
kurkle Apr 26, 2019
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
2 changes: 1 addition & 1 deletion docs/axes/styling.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ The tick configuration is nested under the scale configuration in the `ticks` ke
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `callback` | `function` | | Returns the string representation of the tick value as it should be displayed on the chart. See [callback](../axes/labelling.md#creating-custom-tick-formats).
| `display` | `boolean` | `true` | If true, show tick marks.
| `display` | <code>boolean&#124;string</code> | `true` | Controls visibility of tick marks (visible when `true`, hidden when `false`). When `'above'`, tick marks are drawn above datasets.
| `fontColor` | `Color` | `'#666'` | Font color for tick labels.
| `fontFamily` | `string` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Font family for the tick labels, follows CSS font-family options.
| `fontSize` | `number` | `12` | Font size for the tick labels.
Expand Down
7 changes: 6 additions & 1 deletion src/core/core.controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -645,10 +645,15 @@ helpers.extend(Chart.prototype, /** @lends Chart */ {

// Draw all the scales
helpers.each(me.boxes, function(box) {
box.draw(me.chartArea);
box.draw(me.chartArea, false);
}, me);

me.drawDatasets(easingValue);

helpers.each(me.boxes, function(box) {

@simonbrunel simonbrunel Apr 26, 2019

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

I'm really not fan of this extra loop calling draw() a second time for all scales and as you said, it would draw existing custom scales 2 times. I don't think scales should be aware of the drawing order and check internally this extra argument "to draw or not to draw". IMO, draw() should be called only one time before or after datasets.

box.draw(me.chartArea, true);
}, me);

me._drawTooltip(easingValue);

plugins.notify(me, 'afterDraw', [easingValue]);
Expand Down
11 changes: 6 additions & 5 deletions src/core/core.scale.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -726,18 +726,19 @@ module.exports = Element.extend({
/**
* Actually draw the scale on the canvas
* @param {object} chartArea - the area of the chart to draw full grid lines on
* @param {boolean} above - drawing above (after) of datasets
*/
draw: function(chartArea) {
draw: function(chartArea, above) {
var me = this;
var options = me.options;
var optionTicks = options.ticks;

if (!me._isVisible()) {
if (!me._isVisible() || (above && optionTicks.display !== 'above')) {
return;
}

var chart = me.chart;
var context = me.ctx;
var optionTicks = options.ticks;
var gridLines = options.gridLines;
var scaleLabel = options.scaleLabel;
var position = options.position;
Expand Down Expand Up @@ -891,7 +892,7 @@ module.exports = Element.extend({
var glWidth = itemToDraw.glWidth;
var glColor = itemToDraw.glColor;

if (gridLines.display && glWidth && glColor) {
if (gridLines.display && glWidth && glColor && !above) {
context.save();
context.lineWidth = glWidth;
context.strokeStyle = glColor;
Expand All @@ -916,7 +917,7 @@ module.exports = Element.extend({
context.restore();
}

if (optionTicks.display) {
if (optionTicks.display && (optionTicks.display === 'above') === above) {
var tickFont = itemToDraw.major ? tickFonts.major : tickFonts.minor;

// Make sure we draw text in the correct color and font
Expand Down
85 changes: 48 additions & 37 deletions src/scales/scale.radialLinear.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -473,60 +473,71 @@ module.exports = LinearScaleBase.extend({
0);
},

draw: function() {
/**
* Actually draw the scale on the canvas
* @param {object} chartArea - the area of the chart
* @param {boolean} above - drawing above (after) of datasets
*/
draw: function(chartArea, above) {
var me = this;
var opts = me.options;
var gridLineOpts = opts.gridLines;
var tickOpts = opts.ticks;

if (opts.display) {
var ctx = me.ctx;
var startAngle = this.getIndexAngle(0);
var tickFont = helpers.options._parseFont(tickOpts);
if (!opts.display || (above && tickOpts.display !== 'above')) {
return;
}

if (opts.angleLines.display || opts.pointLabels.display) {
drawPointLabels(me);
}
var ctx = me.ctx;
var startAngle = this.getIndexAngle(0);
var tickFont = helpers.options._parseFont(tickOpts);

helpers.each(me.ticks, function(label, index) {
// Don't draw a centre value (if it is minimum)
if (index > 0 || tickOpts.reverse) {
var yCenterOffset = me.getDistanceFromCenterForValue(me.ticksAsNumbers[index]);
if (!above && (opts.angleLines.display || opts.pointLabels.display)) {
drawPointLabels(me);
}

// Draw circular lines around the scale
if (gridLineOpts.display && index !== 0) {
drawRadiusLine(me, gridLineOpts, yCenterOffset, index);
}
helpers.each(me.ticks, function(label, index) {
// Don't draw a centre value (if it is minimum)
if (index > 0 || tickOpts.reverse) {
var yCenterOffset = me.getDistanceFromCenterForValue(me.ticksAsNumbers[index]);

if (tickOpts.display) {
var tickFontColor = valueOrDefault(tickOpts.fontColor, defaults.global.defaultFontColor);
ctx.font = tickFont.string;

ctx.save();
ctx.translate(me.xCenter, me.yCenter);
ctx.rotate(startAngle);

if (tickOpts.showLabelBackdrop) {
var labelWidth = ctx.measureText(label).width;
ctx.fillStyle = tickOpts.backdropColor;
ctx.fillRect(
-labelWidth / 2 - tickOpts.backdropPaddingX,
-yCenterOffset - tickFont.size / 2 - tickOpts.backdropPaddingY,
labelWidth + tickOpts.backdropPaddingX * 2,
tickFont.size + tickOpts.backdropPaddingY * 2
);
}
// Draw circular lines around the scale
if (gridLineOpts.display && index !== 0 && !above) {
drawRadiusLine(me, gridLineOpts, yCenterOffset, index);
}

if (tickOpts.display) {
var tickFontColor = valueOrDefault(tickOpts.fontColor, defaults.global.defaultFontColor);
ctx.font = tickFont.string;

ctx.save();
ctx.translate(me.xCenter, me.yCenter);
ctx.rotate(startAngle);

// Backdrop is drawn below even if label is drawn above
if (tickOpts.showLabelBackdrop && !above) {
var labelWidth = ctx.measureText(label).width;
ctx.fillStyle = tickOpts.backdropColor;
ctx.fillRect(
-labelWidth / 2 - tickOpts.backdropPaddingX,
-yCenterOffset - tickFont.size / 2 - tickOpts.backdropPaddingY,
labelWidth + tickOpts.backdropPaddingX * 2,
tickFont.size + tickOpts.backdropPaddingY * 2
);
}

if ((tickOpts.display === 'above') === above) {
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillStyle = tickFontColor;
ctx.fillText(label, 0, -yCenterOffset);
ctx.restore();
}
ctx.restore();
}
});
}
}
});
}

});

// INTERNAL: static default options, registered in src/index.js
Expand Down