You are here

Home » API reference » Visitors 8.2

jqPlotCssStyling.txt in Visitors 8.2 

Title: jqPlot CSS Customization

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".

File

jquery.jqplot/jqPlotCssStyling.txt
View source 
  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 .

  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".