| 9 |
lars |
1 |
Title: jqPlot CSS Customization
|
|
|
2 |
|
|
|
3 |
Much of the styling of jqPlot is done by css. The jqPlot css file is, unremarkably,
|
|
|
4 |
jquery.jqplot.css and resides in the same directory as jqPlot itself.
|
|
|
5 |
|
|
|
6 |
There exist some styling related javascript properties on the plot objects themselves
|
|
|
7 |
(like fontStyle, fontSize, etc.). These can be set with the options object at plot creation.
|
|
|
8 |
Generally, setting these options is *NOT* the preferred way to customize the look of the
|
|
|
9 |
plot. Use the css file instead. *These options are deprecated and may disappear*. The
|
|
|
10 |
exceptions are certain background and color options which control attributes of something
|
|
|
11 |
renderered on a canvas. This would be line color, grid background, etc. These must
|
|
|
12 |
be set by the options object. For a list of available options, see <jqPlot Options>.
|
|
|
13 |
|
|
|
14 |
Objects in the plot that can be customized by css are given a css class like ".jqplot-*".
|
|
|
15 |
For example, the plot title will have a ".jqplot-title" class, the axes ".jqplot-axis", etc.
|
|
|
16 |
|
|
|
17 |
Currently assigned classes in jqPlot
|
|
|
18 |
are as follows:
|
|
|
19 |
|
|
|
20 |
.jqplot-target - Styles for the plot target div. These will be cascaded down
|
|
|
21 |
to all plot elements according to css rules.
|
|
|
22 |
|
|
|
23 |
.jqplot-axis - Styles for all axes
|
|
|
24 |
|
|
|
25 |
.jqplot-xaxis - Styles applied to the primary x axis only.
|
|
|
26 |
|
|
|
27 |
.jqplot-yaxis - Styles applied to the primary y axis only.
|
|
|
28 |
|
|
|
29 |
.jqplot-x2axis, .jqplot-x3axis, ... - Styles applied to the 2nd, 3rd, etc. x axis only.
|
|
|
30 |
|
|
|
31 |
.jqplot-y2axis, .jqplot-y3axis, ... - Styles applied to the 2nd, 3rd, etc.y axis only.
|
|
|
32 |
|
|
|
33 |
.jqplot-axis-tick - Styles applied to all axis ticks
|
|
|
34 |
|
|
|
35 |
.jqplot-xaxis-tick - Styles applied to primary x axis ticks only.
|
|
|
36 |
|
|
|
37 |
.jqplot-x2axis-tick - Styles applied to secondary x axis ticks only.
|
|
|
38 |
|
|
|
39 |
.jqplot-yaxis-tick - Styles applied to primary y axis ticks only.
|
|
|
40 |
|
|
|
41 |
.jqplot-y2axis-tick - Styles applied to secondary y axis ticks only.
|
|
|
42 |
|
|
|
43 |
table.jqplot-table-legend - Styles applied to the legend box table.
|
|
|
44 |
|
|
|
45 |
.jqplot-title - Styles applied to the title.
|
|
|
46 |
|
|
|
47 |
.jqplot-cursor-tooltip - Styles applied to the cursor tooltip
|
|
|
48 |
|
|
|
49 |
.jqplot-highlighter-tooltip - Styles applied to the highlighter tooltip.
|
|
|
50 |
|
|
|
51 |
div.jqplot-table-legend-swatch - the div element used for the colored swatch on the legend.
|
|
|
52 |
|
|
|
53 |
Note that axes will be assigned 2 classes like: class=".jqplot-axis .jqplot-xaxis".
|