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

Added borderDash support for grid lines (#3136) #3142

Merged
merged 4 commits into from
Aug 12, 2016
Merged

Added borderDash support for grid lines (#3136) #3142

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
db457fe
Added borderDash support for grid lines (#3136)
karthikiyengar Aug 12, 2016
4eaa7f2
Save and restore context to prevent border dash being applied to othe…
karthikiyengar Aug 12, 2016
7cb83d7
Adds support for borderDashOffset, checks for setLineDash (IE9/IE10)
karthikiyengar Aug 12, 2016
2478e6c
Fixes tests
karthikiyengar Aug 12, 2016
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: 2 additions & 0 deletions docs/02-Scales.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,8 @@ Name | Type | Default | Description
--- | --- | --- | ---
display | Boolean | true |
color | Color or Array[Color] | "rgba(0, 0, 0, 0.1)" | Color of the grid lines.
borderDash | Array[Number] | [] | Length and spacing of dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash)
borderDashOffset | Number | 0.0 | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset)
lineWidth | Number or Array[Number] | 1 | Stroke width of grid lines
drawBorder | Boolean | true | If true draw border on the edge of the chart
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
Expand Down
14 changes: 13 additions & 1 deletion src/core/core.scale.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,9 @@ module.exports = function(Chart) {
tickMarkLength: 10,
zeroLineWidth: 1,
zeroLineColor: "rgba(0,0,0,0.25)",
offsetGridLines: false
offsetGridLines: false,
borderDash: [],
borderDashOffset: 0.0
},

// scale label
Expand Down Expand Up @@ -502,6 +504,8 @@ module.exports = function(Chart) {
var tickFontFamily = helpers.getValueOrDefault(optionTicks.fontFamily, globalDefaults.defaultFontFamily);
var tickLabelFont = helpers.fontString(tickFontSize, tickFontStyle, tickFontFamily);
var tl = gridLines.tickMarkLength;
var borderDash = helpers.getValueOrDefault(gridLines.borderDash, globalDefaults.borderDash);
var borderDashOffset = helpers.getValueOrDefault(gridLines.borderDashOffset, globalDefaults.borderDashOffset);

var scaleLabelFontColor = helpers.getValueOrDefault(scaleLabel.fontColor, globalDefaults.defaultFontColor);
var scaleLabelFontSize = helpers.getValueOrDefault(scaleLabel.fontSize, globalDefaults.defaultFontSize);
Expand Down Expand Up @@ -641,6 +645,8 @@ module.exports = function(Chart) {
labelY: labelY,
glWidth: lineWidth,
glColor: lineColor,
glBorderDash: borderDash,
glBorderDashOffset: borderDashOffset,
rotation: -1 * labelRotationRadians,
label: label,
textBaseline: textBaseline,
Expand All @@ -651,8 +657,13 @@ module.exports = function(Chart) {
// Draw all of the tick labels, tick marks, and grid lines at the correct places
helpers.each(itemsToDraw, function(itemToDraw) {
if (gridLines.display) {
context.save();
context.lineWidth = itemToDraw.glWidth;
context.strokeStyle = itemToDraw.glColor;
if (context.setLineDash) {
context.setLineDash(itemToDraw.glBorderDash);
context.lineDashOffset = itemToDraw.glBorderDashOffset;
}

context.beginPath();

Expand All @@ -667,6 +678,7 @@ module.exports = function(Chart) {
}

context.stroke();
context.restore();
}

if (optionTicks.display) {
Expand Down
4 changes: 4 additions & 0 deletions test/core.helpers.tests.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -224,6 +224,8 @@ describe('Core helper tests', function() {
display: true,
zeroLineColor: "rgba(0,0,0,0.25)",
zeroLineWidth: 1,
borderDash: [],
borderDashOffset: 0.0
},
position: "right",
scaleLabel: {
Expand Down Expand Up @@ -258,6 +260,8 @@ describe('Core helper tests', function() {
display: true,
zeroLineColor: "rgba(0,0,0,0.25)",
zeroLineWidth: 1,
borderDash: [],
borderDashOffset: 0.0
},
position: "left",
scaleLabel: {
Expand Down
4 changes: 3 additions & 1 deletion test/scale.category.tests.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,9 @@ describe('Category scale tests', function() {
offsetGridLines: false,
display: true,
zeroLineColor: "rgba(0,0,0,0.25)",
zeroLineWidth: 1
zeroLineWidth: 1,
borderDash: [],
borderDashOffset: 0.0
},
position: "bottom",
scaleLabel: {
Expand Down
2 changes: 2 additions & 0 deletions test/scale.linear.tests.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,8 @@ describe('Linear Scale', function() {
display: true,
zeroLineColor: "rgba(0,0,0,0.25)",
zeroLineWidth: 1,
borderDash: [],
borderDashOffset: 0.0
},
position: "left",
scaleLabel: {
Expand Down
2 changes: 2 additions & 0 deletions test/scale.logarithmic.tests.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,8 @@ describe('Logarithmic Scale tests', function() {
display: true,
zeroLineColor: "rgba(0,0,0,0.25)",
zeroLineWidth: 1,
borderDash: [],
borderDashOffset: 0.0
},
position: "left",
scaleLabel: {
Expand Down
2 changes: 2 additions & 0 deletions test/scale.radialLinear.tests.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,8 @@ describe('Test the radial linear scale', function() {
display: true,
zeroLineColor: "rgba(0,0,0,0.25)",
zeroLineWidth: 1,
borderDash: [],
borderDashOffset: 0.0
},
lineArc: false,
pointLabels: {
Expand Down
4 changes: 3 additions & 1 deletion test/scale.time.tests.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,9 @@ describe('Time scale tests', function() {
offsetGridLines: false,
display: true,
zeroLineColor: "rgba(0,0,0,0.25)",
zeroLineWidth: 1
zeroLineWidth: 1,
borderDash: [],
borderDashOffset: 0.0
},
position: "bottom",
scaleLabel: {
Expand Down