| jqPlotCssStyling.txt | |
| jqPlot CSS Customization | Much of the styling of jqPlot is done by css. |
Much of the styling of jqPlot is done by css. The jqPlot css file is, unremarkably, jquery.jqplot.css and resides in the same directory as jqPlot itself.
There exist some styling related javascript properties on the plot objects themselves (like fontStyle, fontSize, etc.). These can be set with the options object at plot creation. Generally, setting these options is NOT the preferred way to customize the look of the plot. Use the css file instead. These options are deprecated and may disappear. The exceptions are certain background and color options which control attributes of something renderered on a canvas. This would be line color, grid background, etc. These must be set by the options object. For a list of available options, see jqPlot Options.
Objects in the plot that can be customized by css are given a css class like “.jqplot-*”. For example, the plot title will have a “.jqplot-title” class, the axes “.jqplot-axis”, etc.
Currently assigned classes in jqPlot are as follows:
| .jqplot-target | Styles for the plot target div. These will be cascaded down to all plot elements according to css rules. |
| .jqplot-axis | Styles for all axes |
| .jqplot-xaxis | Styles applied to the primary x axis only. |
| .jqplot-yaxis | Styles applied to the primary y axis only. |
| .jqplot-x2axis, .jqplot-x3axis, ... | Styles applied to the 2nd, 3rd, etc. x axis only. |
| .jqplot-y2axis, .jqplot-y3axis, ... | Styles applied to the 2nd, 3rd, etc.y axis only. |
| .jqplot-axis-tick | Styles applied to all axis ticks |
| .jqplot-xaxis-tick | Styles applied to primary x axis ticks only. |
| .jqplot-x2axis-tick | Styles applied to secondary x axis ticks only. |
| .jqplot-yaxis-tick | Styles applied to primary y axis ticks only. |
| .jqplot-y2axis-tick | Styles applied to secondary y axis ticks only. |
| table.jqplot-table-legend | Styles applied to the legend box table. |
| .jqplot-title | Styles applied to the title. |
| .jqplot-cursor-tooltip | Styles applied to the cursor tooltip |
| .jqplot-highlighter-tooltip | Styles applied to the highlighter tooltip. |
| div.jqplot-table-legend-swatch | the div element used for the colored swatch on the legend. |
Note that axes will be assigned 2 classes like: class=”.jqplot-axis .jqplot-xaxis”.