diff --git a/API.txt b/API.txt index 5496e9f..3a21b85 100644 --- a/API.txt +++ b/API.txt @@ -477,6 +477,7 @@ Customizing the grid labelMargin: number markings: array of markings or (fn: axes -> array of markings) borderWidth: number + borderColor: color or null clickable: boolean hoverable: boolean autoHighlight: boolean @@ -495,7 +496,8 @@ of the page with CSS. between tick labels and the grid. Note that you can style the tick labels with CSS, e.g. to change the color. They have class "tickLabel". "borderWidth" is the width of the border around the plot. Set it to 0 -to disable the border. +to disable the border. You can also set "borderColor" if you want the +border to have a different color than the grid lines. "markings" is used to draw simple lines and rectangular areas in the background of the plot. You can either specify an array of ranges on diff --git a/NEWS.txt b/NEWS.txt index 4465413..efd7d40 100644 --- a/NEWS.txt +++ b/NEWS.txt @@ -25,6 +25,8 @@ Changes: $.plot.formatDate(...) (suggestion by Matt Manela) and even replaced. +- Added "borderColor" option to the grid (patch from achamayou). + Bug fixes: - Fixed two corner-case bugs when drawing filled curves (report and diff --git a/jquery.flot.js b/jquery.flot.js index 80c63c2..658b5d7 100644 --- a/jquery.flot.js +++ b/jquery.flot.js @@ -79,7 +79,8 @@ backgroundColor: null, // null for transparent, else color tickColor: "#dddddd", // color used for the ticks labelMargin: 5, // in pixels - borderWidth: 2, + borderWidth: 2, // in pixels + borderColor: null, // set if different from the grid color markings: null, // array of ranges or fn: axes -> array of ranges markingsColor: "#f4f4f4", markingsLineWidth: 2, @@ -967,7 +968,7 @@ if (options.grid.borderWidth) { // draw border ctx.lineWidth = options.grid.borderWidth; - ctx.strokeStyle = options.grid.color; + ctx.strokeStyle = options.grid.borderColor ? options.grid.borderColor : options.grid.color; ctx.lineJoin = "round"; ctx.strokeRect(0, 0, plotWidth, plotHeight); }