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 2 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
1 change: 1 addition & 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,7 @@ 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)
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
7 changes: 7 additions & 0 deletions src/core/core.scale.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -502,6 +502,7 @@ 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 = gridLines.borderDash;
Copy link
Member

Choose a reason for hiding this comment

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

for completeness it might be a good idea to also support the borderDashOffset which translates to https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/lineDashOffset


var scaleLabelFontColor = helpers.getValueOrDefault(scaleLabel.fontColor, globalDefaults.defaultFontColor);
var scaleLabelFontSize = helpers.getValueOrDefault(scaleLabel.fontSize, globalDefaults.defaultFontSize);
Expand Down Expand Up @@ -641,6 +642,7 @@ module.exports = function(Chart) {
labelY: labelY,
glWidth: lineWidth,
glColor: lineColor,
glBorderDash: borderDash,
rotation: -1 * labelRotationRadians,
label: label,
textBaseline: textBaseline,
Expand All @@ -651,8 +653,12 @@ 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 (itemToDraw.glBorderDash) {
Copy link
Member

Choose a reason for hiding this comment

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

this check should also check for the existence of context.setLineDash. On IE 9 and 10 this does not exist.

context.setLineDash(itemToDraw.glBorderDash);
}

context.beginPath();

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

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

if (optionTicks.display) {
Expand Down