jqPlotCssStyling.txt 2.2 KB

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