Versions Compared

Old Version 2

changes.mady.by.user Piotr Bojko

Saved on

compared with

New Version 3

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.

...

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.

Note

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

    Code Block
    languagejs
    titleExample 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. 

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


size


padding


showGridLinesInstructs whether shows coordinates lines. Possible values: x, y, xy. 


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


...