This document is out of date. While the options described here should still be relavent and valid, it has not been updated for many new options. Sorry for this inconvenience.
This document describes the options available to jqPlot. These are set with the third argument to the $.jqplot(‘target’, data, options) function. Options are using the following convention:
property: default, // notes
This document is not complete! Not all options are shown! Also, Options marked with * in the notes are post 0.7.1 additions. They will be available in the next release. Further information about the options can be found in the online API documentation. For details on how the options relate to the API documentation, see the Options Tutorial in the optionsTutorial.txt file.
options =
{
seriesColors: [ "#4bb2c5", "#c5b47f", "#EAA228", "#579575", "#839557", "#958c12",
"#953579", "#4b5de4", "#d8b83f", "#ff5800", "#0085cc"], // colors that will
// be assigned to the series. If there are more series than colors, colors
// will wrap around and start at the beginning again.
stackSeries: false, // if true, will create a stack plot.
// Currently supported by line and bar graphs.
title: '', // Title for the plot. Can also be specified as an object like:
title: {
text: '', // title for the plot,
show: true,
},
axesDefaults: {
show: false, // wether or not to renderer the axis. Determined automatically.
min: null, // minimum numerical value of the axis. Determined automatically.
max: null, // maximum numverical value of the axis. Determined automatically.
pad: 1.2, // a factor multiplied by the data range on the axis to give the
// axis range so that data points don't fall on the edges of the axis.
ticks: [], // a 1D [val1, val2, ...], or 2D [[val, label], [val, label], ...]
// array of ticks to use. Computed automatically.
numberTicks: undefined,
renderer: $.jqplot.LinearAxisRenderer, // renderer to use to draw the axis,
rendererOptions: {}, // options to pass to the renderer. LinearAxisRenderer
// has no options,
tickOptions: {
mark: 'outside', // Where to put the tick mark on the axis
// 'outside', 'inside' or 'cross',
showMark: true,
showGridline: true, // wether to draw a gridline (across the whole grid) at this tick,
markSize: 4, // length the tick will extend beyond the grid in pixels. For
// 'cross', length will be added above and below the grid boundary,
show: true, // wether to show the tick (mark and label),
showLabel: true, // wether to show the text label at the tick,
formatString: '', // format string to use with the axis tick formatter
}
showTicks: true, // wether or not to show the tick labels,
showTickMarks: true, // wether or not to show the tick marks
},
axes: {
xaxis: {
// same options as axesDefaults
},
yaxis: {
// same options as axesDefaults
},
x2axis: {
// same options as axesDefaults
},
y2axis: {
// same options as axesDefaults
}
},
seriesDefaults: {
show: true, // wether to render the series.
xaxis: 'xaxis', // either 'xaxis' or 'x2axis'.
yaxis: 'yaxis', // either 'yaxis' or 'y2axis'.
label: '', // label to use in the legend for this line.
color: '', // CSS color spec to use for the line. Determined automatically.
lineWidth: 2.5, // Width of the line in pixels.
shadow: true, // show shadow or not.
shadowAngle: 45, // angle (degrees) of the shadow, clockwise from x axis.
shadowOffset: 1.25, // offset from the line of the shadow.
shadowDepth: 3, // Number of strokes to make when drawing shadow. Each
// stroke offset by shadowOffset from the last.
shadowAlpha: 0.1, // Opacity of the shadow.
showLine: true, // whether to render the line segments or not.
showMarker: true, // render the data point markers or not.
fill: false, // fill under the line,
fillAndStroke: false, // *stroke a line at top of fill area.
fillColor: undefined, // *custom fill color for filled lines (default is line color).
fillAlpha: undefined, // *custom alpha to apply to fillColor.
renderer: $.jqplot.LineRenderer], // renderer used to draw the series.
rendererOptions: {}, // options passed to the renderer. LineRenderer has no options.
markerRenderer: $.jqplot.MarkerRenderer, // renderer to use to draw the data
// point markers.
markerOptions: {
show: true, // wether to show data point markers.
style: 'filledCircle', // circle, diamond, square, filledCircle.
// filledDiamond or filledSquare.
lineWidth: 2, // width of the stroke drawing the marker.
size: 9, // size (diameter, edge length, etc.) of the marker.
color: '#666666' // color of marker, set to color of line by default.
shadow: true, // wether to draw shadow on marker or not.
shadowAngle: 45, // angle of the shadow. Clockwise from x axis.
shadowOffset: 1, // offset from the line of the shadow,
shadowDepth: 3, // Number of strokes to make when drawing shadow. Each stroke
// offset by shadowOffset from the last.
shadowAlpha: 0.07 // Opacity of the shadow
}
},
series:[
{Each series has same options as seriesDefaults},
{You can override each series individually here}
],
legend: {
show: false,
location: 'ne', // compass direction, nw, n, ne, e, se, s, sw, w.
xoffset: 12, // pixel offset of the legend box from the x (or x2) axis.
yoffset: 12, // pixel offset of the legend box from the y (or y2) axis.
},
grid: {
drawGridLines: true, // wether to draw lines across the grid or not.
gridLineColor: '#cccccc' // *Color of the grid lines.
background: '#fffdf6', // CSS color spec for background color of grid.
borderColor: '#999999', // CSS color spec for border around grid.
borderWidth: 2.0, // pixel width of border around grid.
shadow: true, // draw a shadow for grid.
shadowAngle: 45, // angle of the shadow. Clockwise from x axis.
shadowOffset: 1.5, // offset from the line of the shadow.
shadowWidth: 3, // width of the stroke for the shadow.
shadowDepth: 3, // Number of strokes to make when drawing shadow.
// Each stroke offset by shadowOffset from the last.
shadowAlpha: 0.07 // Opacity of the shadow
renderer: $.jqplot.CanvasGridRenderer, // renderer to use to draw the grid.
rendererOptions: {} // options to pass to the renderer. Note, the default
// CanvasGridRenderer takes no additional options.
},
// Plugin and renderer options.
// BarRenderer.
// With BarRenderer, you can specify additional options in the rendererOptions object
// on the series or on the seriesDefaults object. Note, some options are respecified
// (like shadowDepth) to override lineRenderer defaults from which BarRenderer inherits.
seriesDefaults: {
rendererOptions: {
barPadding: 8, // number of pixels between adjacent bars in the same
// group (same category or bin).
barMargin: 10, // number of pixels between adjacent groups of bars.
barDirection: 'vertical', // vertical or horizontal.
barWidth: null, // width of the bars. null to calculate automatically.
shadowOffset: 2, // offset from the bar edge to stroke the shadow.
shadowDepth: 5, // nuber of strokes to make for the shadow.
shadowAlpha: 0.8, // transparency of the shadow.
}
},
// Cursor
// Options are passed to the cursor plugin through the "cursor" object at the top
// level of the options object.
cursor: {
style: 'crosshair', // A CSS spec for the cursor type to change the
// cursor to when over plot.
show: true,
showTooltip: true, // show a tooltip showing cursor position.
followMouse: false, // wether tooltip should follow the mouse or be stationary.
tooltipLocation: 'se', // location of the tooltip either relative to the mouse
// (followMouse=true) or relative to the plot. One of
// the compass directions, n, ne, e, se, etc.
tooltipOffset: 6, // pixel offset of the tooltip from the mouse or the axes.
showTooltipGridPosition: false, // show the grid pixel coordinates of the mouse
// in the tooltip.
showTooltipUnitPosition: true, // show the coordinates in data units of the mouse
// in the tooltip.
tooltipFormatString: '%.4P', // sprintf style format string for tooltip values.
useAxesFormatters: true, // wether to use the same formatter and formatStrings
// as used by the axes, or to use the formatString
// specified on the cursor with sprintf.
tooltipAxesGroups: [], // show only specified axes groups in tooltip. Would specify like:
// [['xaxis', 'yaxis'], ['xaxis', 'y2axis']]. By default, all axes
// combinations with for the series in the plot are shown.
},
// Dragable
// Dragable options are specified with the "dragable" object at the top level
// of the options object.
dragable: {
color: undefined, // custom color to use for the dragged point and dragged line
// section. default will use a transparent variant of the line color.
constrainTo: 'none', // Constrain dragging motion to an axis: 'x', 'y', or 'none'.
},
// Highlighter
// Highlighter options are specified with the "highlighter" object at the top level
// of the options object.
highlighter: {
lineWidthAdjust: 2.5, // pixels to add to the size line stroking the data point marker
// when showing highlight. Only affects non filled data point markers.
sizeAdjust: 5, // pixels to add to the size of filled markers when drawing highlight.
showTooltip: true, // show a tooltip with data point values.
tooltipLocation: 'nw', // location of tooltip: n, ne, e, se, s, sw, w, nw.
fadeTooltip: true, // use fade effect to show/hide tooltip.
tooltipFadeSpeed: "fast"// slow, def, fast, or a number of milliseconds.
tooltipOffset: 2, // pixel offset of tooltip from the highlight.
tooltipAxes: 'both', // which axis values to display in the tooltip, x, y or both.
tooltipSeparator: ', ' // separator between values in the tooltip.
useAxesFormatters: true // use the same format string and formatters as used in the axes to
// display values in the tooltip.
tooltipFormatString: '%.5P' // sprintf format string for the tooltip. only used if
// useAxesFormatters is false. Will use sprintf formatter with
// this string, not the axes formatters.
},
// LogAxisRenderer
// LogAxisRenderer add 2 options to the axes object. These options are specified directly on
// the axes or axesDefaults object.
axesDefaults: {
base: 10, // the logarithmic base.
tickDistribution: 'even', // 'even' or 'power'. 'even' will produce with even visiual (pixel)
// spacing on the axis. 'power' will produce ticks spaced by
// increasing powers of the log base.
},
// PieRenderer
// PieRenderer accepts options from the rendererOptions object of the series or seriesDefaults object.
seriesDefaults: {
rendererOptions: {
diameter: undefined, // diameter of pie, auto computed by default.
padding: 20, // padding between pie and neighboring legend or plot margin.
sliceMargin: 0, // gap between slices.
fill: true, // render solid (filled) slices.
shadowOffset: 2, // offset of the shadow from the chart.
shadowDepth: 5, // Number of strokes to make when drawing shadow. Each stroke
// offset by shadowOffset from the last.
shadowAlpha: 0.07 // Opacity of the shadow
}
},
// Trendline
// Trendline takes options on the trendline object of the series or seriesDefaults object.
seriesDefaults: {
trendline: {
show: true, // show the trend line
color: '#666666', // CSS color spec for the trend line.
label: '', // label for the trend line.
type: 'linear', // 'linear', 'exponential' or 'exp'
shadow: true, // show the trend line shadow.
lineWidth: 1.5, // width of the trend line.
shadowAngle: 45, // angle of the shadow. Clockwise from x axis.
shadowOffset: 1.5, // offset from the line of the shadow.
shadowDepth: 3, // Number of strokes to make when drawing shadow.
// Each stroke offset by shadowOffset from the last.
shadowAlpha: 0.07 // Opacity of the shadow
}
}
}