Versions Compared

Old Version 3

changes.mady.by.user Piotr Bojko

Saved on

compared with

New Version Current

changes.mady.by.user Piotr Bojko

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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

Example with guide
Code Block
title
languagejsExample 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

Element

Notes

x

Styling options for X axis.

Element

Notes

padding

Describes padding between a chart body and X axis.

label

Describes label for X axis.

Element

Notes

text

Title for X axis

padding

Padding 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

nice

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

Note

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


max

y

Styling options for Y axis. Same elements as for X applies.

color

Styling options for color dimension.

Element

Notes

bewer

brewer

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

    Code Block
    languagejs
titleExample brewer array like usage"bewer"
  1. "brewer": ["#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. 

    Code Block
    "
bewer
  1. brewer": {
	"valueA": "#0000FF",
	"valueB": "rgb(0,255,0)",
	"valueC": "ab0"
}


size

Styling options for size dimension.

Element

Notes

minSize

Specifies minimal size of element.

maxSize

Specifies maximal size of element.

padding

Specifies padding of the whole chart.

Element

Notes

b

Bottom padding.

t

Top padding.

l

Left padding.

r

Right padding.

showGridLines

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

Note

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.

Note

This may not apply to all chart types.