Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 4 Current »

Guide configuration element is responsible for tuning look and feel of your chart.

Example with guide
{
	"type": "scatterplot",
	"x": "cycleTime",
	"y": "effort",
	"color": "team",
	"size": "count",
	"guide": {
		"x": {"label": {"text": "Cycle Time in days", "padding": 35}, "padding": 20},
		"y": {"label": "Effort in points", "padding": 20},
		"padding": {"b": 70, "l": 70, "t": 10, "r": 10},
		"showGridLines": "xy",
		"color": {
			"brewer": ["color-red", "color-green", "color-blue"]
		}
	}
}


Configuration

ElementNotes
x

Styling options for X axis.

ElementNotes
paddingDescribes padding between a chart body and X axis.
labelDescribes label for X axis.
ElementNotes
textTitle for X axis
paddingPadding between title and a rest of X axis.
tickFormat

Ticks are small indicators on an axis that shows axis values. tickFormat allows to format tick labels. It uses d3-based formatter. Check available d3 format specifiers. Other possible values:

  • "day" (12-Oct-2014)
  • "week" (02-Nov-2014) - end date of week
  • "week-range" (02-Nov-2014 - 09-Nov-2014) - dates range for the week
  • "month" (January 2014, Febrary...) - display month name. January is
  • displayed with a year on the right.
  • "month-year" (January 2014, Febrary 2014...)
  • "quarter" (Q2 2014)
  • "year" (2014)
tickPeriod

When operate with period scale, it allows to specify the period size. Possible values:

  • day
  • week (split timeline by sundays)
  • month
  • quarter
  • year
nicePossible values: true, false. Defaults to true. By default engine tries to make axis scale "nice". It tries to start measure-based scale from 0 and adds some margins to complete scale with "nice" numbers. For example, if original scale domain contains values [8, 20, ... 40], then axis will have ticks from 0 to 45.
min

The scale domain can be extended using min and max properties. The min and max can't reduce original scale domain and will be ignored in such a cases.

"Nicing" will be applied to extended domain by default. Set nice property to false to avoid such a behavior.

max
yStyling options for Y axis. Same elements as for X applies.
colorStyling options for color dimension.
ElementNotes
bewer

There are to ways to define how color dimension will be colored. 

  1. As array of values. For a measure dimension colors defined in an array define a continues colors in gradient. For other dimension ypes it will be mapped to next values in those dimensions. 

    Example brewer array like usage
    "bewer": ["#0000FF", "rgb(0,255,0)", "#0000FF"]
  2.   As object map. This only applies to non-measure types of dimensions. In this way you define direct "value": "color" mapping. 

    "bewer": {
    	"valueA": "#0000FF",
    	"valueB": "rgb(0,255,0)",
    	"valueC": "ab0"
    }
sizeStyling options for size dimension.
ElementNotes
minSizeSpecifies minimal size of element.
maxSizeSpecifies maximal size of element.
paddingSpecifies padding of the whole chart.
ElementNotes
bBottom padding.
tTop padding.
lLeft padding.
rRight padding.
showGridLinesInstructs whether shows coordinates lines. Possible values: x, y, xy. 
showAnchors
Defines when to show anchors. Possible values:
  • hover (default) - anchor will appear when user points a cursor over it.
  • always - anchors will always be visible.
  • never - anchors will not be displayed.

This may not apply to all chart types.

interpolate

Possible values:

  • linear - default polyline.
  • smooth - smooth curve, suits for interpolating math data.
  • smooth-keep-extremum - curve which doesn't exceed point values, suites for business data.
  • step, step-before, step-after - connects points using steps.

This may not apply to all chart types.

  • No labels