Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Axis and tick color options now make more sense.

The axis color now controls the color of the axis line, instead of its
ticks and labels, while the tickColor controls the tick color. This
makes a little more sense and provides the minor feature of being able
to change the axis line color separately from that of its ticks.  Pull
request #917 ought to be easier to merge now, too.
  • Loading branch information...
commit 3cd7a51026bc0fd10030a5bc133bf487d2a75059 1 parent 6e3cc91
@dnschnur dnschnur authored
Showing with 25 additions and 18 deletions.
  1. +9 −11 API.md
  2. +6 −0 NEWS.md
  3. +10 −7 jquery.flot.js
View
20 API.md
@@ -269,17 +269,15 @@ numbers. Use "time" for time series data; see the time series data
section. The time plugin (jquery.flot.time.js) is required for time
series support.
-The "color" option determines the color of the labels and ticks for
-the axis (default is the grid color). For more fine-grained control
-you can also set the color of the ticks separately with "tickColor"
-(otherwise it's autogenerated as the base color with some
-transparency).
-
-You can customize the font used to draw the labels with CSS or directly via the
-"font" option. When "font" is null - the default - each tick label is given the
-'flot-tick-label' class. For compatibility with Flot 0.7 and earlier the labels
-are also given the 'tickLabel' class, but this is deprecated and scheduled to
-be removed with the release of version 1.0.0.
+The "color" option determines the color of the line and ticks for the axis, and
+defaults to the grid color with transparency. For more fine-grained control you
+can also set the color of the ticks separately with "tickColor".
+
+You can customize the font and color used to draw the axis tick labels with CSS
+or directly via the "font" option. When "font" is null - the default - each
+tick label is given the 'flot-tick-label' class. For compatibility with Flot
+0.7 and earlier the labels are also given the 'tickLabel' class, but this is
+deprecated and scheduled to be removed with the release of version 1.0.0.
To enable more granular control over styles, labels are divided between a set
of text containers, with each holding the labels for one axis. These containers
View
6 NEWS.md
@@ -23,6 +23,12 @@ The text containers for each axis now use the classes 'flot-[x|y]-axis' and
with Flot 0.7 and earlier text will continue to use the old classes as well,
but they are considered deprecated and will be removed in a future version.
+In previous versions the axis 'color' option was used to set the color of tick
+marks and their label text. It now controls the color of the axis line, which
+previously could not be changed separately, and continues to act as a default
+for the tick-mark color. The color of tick label text is now set either by
+overriding the 'flot-tick-label' CSS rule or via the axis 'font' option.
+
A new plugin, jquery.flot.canvas.js, allows axis tick labels to be rendered
directly to the canvas, rather than using HTML elements. This feature can be
toggled with a simple option, making it easy to create interactive plots in the
View
17 jquery.flot.js
@@ -641,14 +641,14 @@ Licensed under the MIT license.
$.extend(true, options, opts);
if (options.xaxis.color == null)
- options.xaxis.color = options.grid.color;
+ options.xaxis.color = $.color.parse(options.grid.color).scale('a', 0.22).toString();
if (options.yaxis.color == null)
- options.yaxis.color = options.grid.color;
+ options.yaxis.color = $.color.parse(options.grid.color).scale('a', 0.22).toString();
- if (options.xaxis.tickColor == null) // backwards-compatibility
- options.xaxis.tickColor = options.grid.tickColor;
- if (options.yaxis.tickColor == null) // backwards-compatibility
- options.yaxis.tickColor = options.grid.tickColor;
+ if (options.xaxis.tickColor == null) // grid.tickColor for back-compatibility
+ options.xaxis.tickColor = options.grid.tickColor || options.xaxis.color;
+ if (options.yaxis.tickColor == null) // grid.tickColor for back-compatibility
+ options.yaxis.tickColor = options.grid.tickColor || options.yaxis.color;
if (options.grid.borderColor == null)
options.grid.borderColor = options.grid.color;
@@ -1849,7 +1849,6 @@ Licensed under the MIT license.
if (!axis.show || axis.ticks.length == 0)
continue;
- ctx.strokeStyle = axis.options.tickColor || $.color.parse(axis.options.color).scale('a', 0.22).toString();
ctx.lineWidth = 1;
// find the edges
@@ -1870,6 +1869,7 @@ Licensed under the MIT license.
// draw tick bar
if (!axis.innermost) {
+ ctx.strokeStyle = axis.options.color;
ctx.beginPath();
xoff = yoff = 0;
if (axis.direction == "x")
@@ -1888,6 +1888,9 @@ Licensed under the MIT license.
}
// draw ticks
+
+ ctx.strokeStyle = axis.options.tickColor;
+
ctx.beginPath();
for (i = 0; i < axis.ticks.length; ++i) {
var v = axis.ticks[i].v;
Please sign in to comment.
Something went wrong with that request. Please try again.