archive-gh-me/Chart.js
1
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2025-12-08 20:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #2276 from nnnick/fix/2229

Browse Source 
Improved sizing when grid lines are not display
This commit is contained in:
Evert Timberg 2016-04-17 10:38:45 -04:00
commit 7c7739c25f
8 changed files with 16 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/01-Scales.md
View File

@ -35,6 +35,7 @@ afterUpdate | Function | undefined | Callback that runs at the end of the update
*gridLines*.lineWidth | Number | 1 | Stroke width of grid lines
*gridLines*.drawOnChartArea | Boolean | true | If true, draw lines on the chart area inside the axis lines. This is useful when there are multiple axes and you need to control which grid lines are drawn
*gridLines*.drawTicks | Boolean | true | If true, draw lines beside the ticks in the axis area beside the chart.
*gridLines*.tickMarkLength | Number | 10 | Length in pixels that the grid lines will draw into the axis area.
*gridLines*.zeroLineWidth | Number | 1 | Stroke width of the grid line for the first index (index 0).
*gridLines*.zeroLineColor | Color | "rgba(0, 0, 0, 0.25)" | Stroke color of the grid line for the first index (index 0).
*gridLines*.offsetGridLines | Boolean | false | If true, offset labels from grid lines.

12
src/core/core.scale.js
View File

@ -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";

4
test/core.helpers.tests.js
View File

@ -217,6 +217,7 @@ describe('Core helper tests', function() {
color: "rgba(0, 0, 0, 0.1)",
drawOnChartArea: true,
drawTicks: true, // draw ticks extending towards the label
tickMarkLength: 10,
lineWidth: 1,
offsetGridLines: false,
display: true,
@ -246,7 +247,8 @@ describe('Core helper tests', function() {
gridLines: {
color: "rgba(0, 0, 0, 0.1)",
drawOnChartArea: true,
drawTicks: true, // draw ticks extending towards the label
drawTicks: true, // draw ticks extending towards the label,
tickMarkLength: 10,
lineWidth: 1,
offsetGridLines: false,
display: true,

1
test/scale.category.tests.js
View File

@ -16,6 +16,7 @@ describe('Category scale tests', function() {
color: "rgba(0, 0, 0, 0.1)",
drawOnChartArea: true,
drawTicks: true, // draw ticks extending towards the label
tickMarkLength: 10,
lineWidth: 1,
offsetGridLines: false,
display: true,

1
test/scale.linear.tests.js
View File

@ -15,6 +15,7 @@ describe('Linear Scale', function() {
color: "rgba(0, 0, 0, 0.1)",
drawOnChartArea: true,
drawTicks: true, // draw ticks extending towards the label
tickMarkLength: 10,
lineWidth: 1,
offsetGridLines: false,
display: true,

1
test/scale.logarithmic.tests.js
View File

@ -14,6 +14,7 @@ describe('Logarithmic Scale tests', function() {
color: "rgba(0, 0, 0, 0.1)",
drawOnChartArea: true,
drawTicks: true,
tickMarkLength: 10,
lineWidth: 1,
offsetGridLines: false,
display: true,

1
test/scale.radialLinear.tests.js
View File

@ -20,6 +20,7 @@ describe('Test the radial linear scale', function() {
color: "rgba(0, 0, 0, 0.1)",
drawOnChartArea: true,
drawTicks: true,
tickMarkLength: 10,
lineWidth: 1,
offsetGridLines: false,
display: true,

1
test/scale.time.tests.js
View File

@ -40,6 +40,7 @@ describe('Time scale tests', function() {
color: "rgba(0, 0, 0, 0.1)",
drawOnChartArea: true,
drawTicks: true,
tickMarkLength: 10,
lineWidth: 1,
offsetGridLines: false,
display: true,