mirror of
https://github.com/chartjs/Chart.js.git
synced 2026-02-01 17:47:09 +00:00
Add configurable tick mark length. Use it to calculate appropriate sizing
This commit is contained in:
parent
d5af01b2c7
commit
58d18d6a48
@ -14,6 +14,7 @@ module.exports = function(Chart) {
|
||||
lineWidth: 1,
|
||||
drawOnChartArea: true,
|
||||
drawTicks: true,
|
||||
tickMarkLength: 10,
|
||||
zeroLineWidth: 1,
|
||||
zeroLineColor: "rgba(0,0,0,0.25)",
|
||||
offsetGridLines: false
|
||||
@ -271,12 +272,12 @@ module.exports = function(Chart) {
|
||||
// subtract the margins to line up with the chartArea if we are a full width scale
|
||||
this.minSize.width = this.isFullWidth() ? this.maxWidth - this.margins.left - this.margins.right : this.maxWidth;
|
||||
} else {
|
||||
this.minSize.width = this.options.gridLines.display && this.options.display ? 10 : 0;
|
||||
this.minSize.width = this.options.gridLines.tickMarkLength;
|
||||
}
|
||||
|
||||
// height
|
||||
if (this.isHorizontal()) {
|
||||
this.minSize.height = this.options.gridLines.display && this.options.display ? 10 : 0;
|
||||
this.minSize.height = this.options.gridLines.tickMarkLength;
|
||||
} else {
|
||||
this.minSize.height = this.maxHeight; // fill all the height
|
||||
}
|
||||
@ -451,6 +452,7 @@ module.exports = function(Chart) {
|
||||
var tickFontStyle = helpers.getValueOrDefault(this.options.ticks.fontStyle, Chart.defaults.global.defaultFontStyle);
|
||||
var tickFontFamily = helpers.getValueOrDefault(this.options.ticks.fontFamily, Chart.defaults.global.defaultFontFamily);
|
||||
var tickLabelFont = helpers.fontString(tickFontSize, tickFontStyle, tickFontFamily);
|
||||
var tl = this.options.gridLines.tickMarkLength;
|
||||
|
||||
var scaleLabelFontColor = helpers.getValueOrDefault(this.options.scaleLabel.fontColor, Chart.defaults.global.defaultFontColor);
|
||||
var scaleLabelFontSize = helpers.getValueOrDefault(this.options.scaleLabel.fontSize, Chart.defaults.global.defaultFontSize);
|
||||
@ -468,8 +470,8 @@ module.exports = function(Chart) {
|
||||
|
||||
if (this.isHorizontal()) {
|
||||
setContextLineSettings = true;
|
||||
var yTickStart = this.options.position === "bottom" ? this.top : this.bottom - 10;
|
||||
var yTickEnd = this.options.position === "bottom" ? this.top + 10 : this.bottom;
|
||||
var yTickStart = this.options.position === "bottom" ? this.top : this.bottom - tl;
|
||||
var yTickEnd = this.options.position === "bottom" ? this.top + tl : this.bottom;
|
||||
skipRatio = false;
|
||||
|
||||
if (((longestRotatedLabel / 2) + this.options.ticks.autoSkipPadding) * this.ticks.length > (this.width - (this.paddingLeft + this.paddingRight))) {
|
||||
@ -537,7 +539,7 @@ module.exports = function(Chart) {
|
||||
|
||||
if (this.options.ticks.display) {
|
||||
this.ctx.save();
|
||||
this.ctx.translate(xLabelValue, (isRotated) ? this.top + 12 : this.options.position === "top" ? this.bottom - 10 : this.top + 10);
|
||||
this.ctx.translate(xLabelValue, (isRotated) ? this.top + 12 : this.options.position === "top" ? this.bottom - tl : this.top + tl);
|
||||
this.ctx.rotate(helpers.toRadians(this.labelRotation) * -1);
|
||||
this.ctx.font = tickLabelFont;
|
||||
this.ctx.textAlign = (isRotated) ? "right" : "center";
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user