| [9062] | 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". |
|---|
