Versions Compared

Old Version 2

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

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