scale-x, scale-x-n

[ root » graph » scale-x ]

ZingChart currently supports linear, category, and time-series scales on the x-axis. Use the scaleX object to configure your scale. Refer to the X/Y-Axis Scale Configuration Tutorial for more information.

Example structure of scale object.


          
"scale-x" : {...},
"scale-x-2" : {...},
scaleX: {...},
scaleX2: {...},
        
AttributeTypeInfo

alpha

Numeric

Demo

Sets the text's transparency of the scale-x (The horizontal line at the bottom of the chart).

0.3 | 0.9 | ...

angle

Numeric

Demo

Sets the rotation angle of the scale-x.

-45 | 115 | ...

auto-fit autoFit

Boolean

true | false | 1 | 0

blended

Boolean

To 'blend' or 'stick' secondary scales to the primary one. Use with the 'placement' attribute (set the value to 'default') and 'offset-start' and 'offset-end' attributes. Refer to the X/Y-Axis Scale Configuration Tutorial for more information.

true | false | 1 | 0

decimals

Numeric

Demo

Sets the number of decimals which will be displayed as scale-x values. Note this attribute does round the values to fit within the define number of decimals.

5 | 10 | ...

decimals-separator decimalsSeparator

String

Demo

Sets the separator to be used in place of the default decimal point. Any string or character can be used to replace the decimal.

'.' | ',' | ...

exponent

Boolean

Demo

Sets whether the scale values will be displayed in scientific notation. Particularly useful when dealing with large numbers.

true | false | 1 | 0

exponent-decimals exponentDecimals

Numeric

Demo

Sets the number of decimals that will be displayed when using scientific notation. Use with the 'exponent' attribute.

5 | 10 | ...

format

String

Demo

To format the appearance of the scale values. Use with the %scale-value (%v) token.

'$%v' | '%v%' | '%v seconds' | ...

guide

Object

Demo

To style the scale guides. Refer to the X/Y-Axis Scale Configuration Tutorial for more information.

{...}

item

Object

Demo

To format and style the scale items (the scale values or labels). Refer to the X/Y-Axis Scale Configuration Tutorial for more information.

items-overlap itemsOverlap

Boolean

Demo

To force all of the scale items to display. It is generally used with the 'max-items' attribute.

true | false | 1 | 0

label

Object

Demo

To create and style the scale title. Refer to the X/Y-Axis Scale Configuration Tutorial for more information.

{...}

labels

Array

Demo

Allows you to set custom labels that correspond to each of the ticks on a scale. If there are more ticks than labels, the default values will be used for the remaining labels.

['Jan', 'Feb', 'Mar', ...] | ...

layout

String

''horizontal' | 'h' | 'vertical' | 'v' | 'row x col' | 'x col' | 'row x' | 'float''

line-color lineColor

String

Demo

Sets the color of the axis line.

'none' | 'transparent' | '#f00' | '#f00 #00f' | 'red yellow' | 'rgb(100, 15, 15)' | ...

line-gap-size lineGapSize

Mixed

Demo

Sets the gap size in case of a non-contiguous line style.

4 | '6px' | ...

line-segment-size lineSegmentSize

Mixed

Demo

Sets the segment size in case of a non-contiguous line style.

4 | '6px' | ...

line-style lineStyle

String

Demo

Sets the line style of the axis line.

'solid' | 'dotted' | 'dashed' | 'dashdot'

line-width lineWidth

Mixed

Demo

Sets the width of the axis line.

4 | '6px' | ...

log-base logBase

Mixed

Logarithmic Scales only: To set the base value, which defaults to Math.E (Euler's number, the base of natural logarithms).

Math.E | 10 | 2 | ...

margin

Mixed

Sets the object's margin/s.

10 | '5px' | '10 20' | '5px 10px 15px 20px' | ...

margin-bottom marginBottom

Mixed

Sets the object's bottom margin.

4 | '6px' | ...

margin-left marginLeft

Mixed

Sets the object's left margin.

4 | '6px' | ...

margin-right marginRight

Mixed

Sets the object's right margin.

4 | '6px' | ...

margin-top marginTop

Mixed

Sets the object's top margin.

4 | '6px' | ...

markers

Array

Demo

To create and style the scale markers, which can appear as areas or lines. Refer to the X/Y-Axis Scale Configuration Tutorial for more information.

[...]

max-items maxItems

Numeric

Demo

To set the maximum number of scale items displayed. It is generally used with the 'items-overlap' attribute.

5 | 10 | ...

max-labels maxLabels

Numeric

Demo

Sets the maximum number of labels that will display along the axis.

5 | 10 | ...

max-ticks maxTicks

Numeric

Demo

Sets the maximum number of ticks to display on the x axis.

5 | 10 | ...

max-value maxValue

Numeric

Demo

Sets the maximum value for the x axis. 'max-value': is one of the multiple ways you can set x axis values. Commonly used with time series data. Also see 'mix-value': and 'step':

4 | '6px' | ...

min-value minValue

Numeric

Demo

Sets the minimum value for the x axis. 'min-value': is one of the multiple ways you can set x axis values. Commonly used with time series data. Also see 'max-value': and 'step':

4 | '6px' | ...

minor-guide minorGuide

Object

Demo

To style the minor guides, which appear between the major guides. Note that the 'minor-ticks' attribute must be included in your scale object to set the number of minor tick marks displayed. Refer to the X/Y-Axis Scale Configuration Tutorial for more information.

{...}

minor-tick minorTick

Object

Demo

To style the minor tick marks, which appear between the major tick marks. Note that the 'minor-ticks' attribute must be included in your scale object to set the number of minor tick marks displayed. Refer to the X/Y-Axis Scale Configuration Tutorial for more information.

{...}

minor-ticks minorTicks

Numeric

Demo

Sets the number of minor tick marks displayed between the major tick marks. Note that this attribute is required to style the minor tick marks and/or guides.

5 | 10 | ...

mirrored

Boolean

Demo

Setting 'mirrored':true will reverse/mirror the x axis values. 'scale-x':{} values will read right to left.

true | false | 1 | 0

multiplier

Boolean

Demo

Setting 'multiplier':true will abbreviate long numbers as small digits with a short unit indicator such as K, M, B NOTE: you can also use the attribute 'short':true

true | false | 1 | 0

negation

String

Demo

Sets the negative symbol just outside of the formatted value.

'standard' | 'currency'

offset

Numeric

Demo

Sets an offset on both sides of the plotted data. This will cause the data to appear as if it were 'squeezed' together.

4 | '6px' | ...

offset-end offsetEnd

Numeric

Demo

Sets an offset from the end of the plotted data. This will cause the data to appear as if it were 'squeezed' from the right side.

4 | '6px' | '5%' | 35%' | ...

offset-start offsetStart

Numeric

Demo

Sets an offset at the start of the plotted data. This will cause the data to appear as if it were 'squeezed' from the left side.

4 | '6px' | '5%' | '35%' | ...

offset-x offsetX

Mixed

Demo

Sets an x offset that will be applied to the scale-x object.

4 | '6px' | ...

offset-y offsetY

Mixed

Demo

Sets a y offset that will be applied to the scale-x object.

4 | '6px' | ...

placement

String

Sets the placement of the scale object.

'default' | 'opposite'

progression

String

To change the scale type from linear (default) to logarithmic.

'lin' | 'log'

ref-angle refAngle

Numeric

Used on radial charts (pie, radar, gauge) to specify the starting angle of the nodes.

-45 | 115 | ...

ref-line refLine

Object

To style the reference line. Refer to the X/Y-Axis Scale Configuration Tutorial for more information.

{...}

ref-value refValue

Numeric

To set the value the reference line is drawn at.

1 | 5 | 10 | ...

rules

Array

Rules allows you to include logic within your JSON code to apply sets of attributes to certain aspects of your chart that meet a specified requirement. See rules for usage information.

[...]

scale-factor scaleFactor

Numeric

5 | 10 | ...

short

Boolean

Demo

Setting to true will cause the values on the x axis to use an abbreviated notation with a short unit such as K,M,B, etc.

true | false | 1 | 0

short-unit shortUnit

String

Demo

Specifies which unit of measure to use when short is set to true.

K | M | B | KB | MB | GB | TB | PB

show-labels showLabels

Array

['A', 'B'] | ...

size

Mixed

Sets the size of the object/shape.

4 | '6px' | ...

size-factor sizeFactor

String

Demo

Auto size-factor automatically scales a pie chart to allow all value-box objects to appear without clipping.

'auto'

step

Mixed

DemoDemoDemoDemo

The 'step': attribute sets the value of each step along an axis. When using numeric values along the axis, a numeric value for 'step': will incrementally increase the value of each tick along the axis by the specified step value.

When the transform attribute is set to 'type':'date', a number of different step values can then be used to modify the step increments.

See transform for more information on how to implement various date and time formats.

5 | 10 | 'msecond' | 'second' | 'minute' | 'hour' | 'day' | 'month' | 'year' | ...

thousands-separator thousandsSeparator

String

Demo

Inserts punctuation to separate numbers in values over 999.

'.' | ',' | ...

tick

Object

Demo

To style the tick marks. Refer to the X/Y-Axis Scale Configuration Tutorial for more information.

{...}

tooltip

Object

To format and style the scale tooltips. Refer to the X/Y-Axis Scale Configuration Tutorial for more information.

{...}

transform

Object

Demo

Allows the underlying data to be 'transformed' to a new format if it was in that format originally. For example, if data is coded as a date and time, and 'type':'date' is specified as an attribute of this object, '1311261385209' will display 'Wed, 19 of May 05:00 PM' if '%D, %d %M %h:%i %A' is specified under the transform attribute of scale-x. See demo.

{...}

values

Attribute

Demo Demo

To set the minimum, maximum, and step scale values. Note that the min and max are required, while step is optional. Alternatively, you can use the 'min-value', 'max-value', and 'step' attributes to specify your min/max/step.

'0:100:20' | '300:400:25' | '0:200'

values

Array

Demo Demo

An alternative way to create category scale labels. Similar to a 'labels' array, the 'values' array also acts as a maximum scale value.

[1, 7, 9] | ['Jan', 'Feb', 'Mar', 'Apr'] | ['Q1', 'Q2', 'Q3', 'Q4']

visible

Boolean

Demo

You can set the 'scale-x':{ } to 'visible':false to hide the x axis. The x-axis will still calculate plots correctly, however you will not be able to see the x axis line or any of the attributes such as scale values. If you simply want to hide the x axis line you can utilize 'line-color':'none'. This will remove the visibility of the x axis line and still allow you to style ticks, items, etc separately,

true | false | 1 | 0

zoom-snap zoomSnap

Boolean

Demo

When zooming is enabled, setting zoom-snap to true snaps the zoom area to the nearest data node as a zoom area is selected. By default, zoom-snap is set to false.

true | false | 1 | 0

zoom-to zoomTo

Array

Demo

To specify the node indexes the chart will zoom to by default at chart render. This is best used with linear data (or simple array data) with scrollbars or preview charts. Refer to the Zooming, Scrollbar, and Preview Chart Tutorial for more information.

[20, 50] | ...

zoom-to-values zoomToValues

Array

Demo

To specify the node values the chart will zoom to by default at chart render. This is best used with non-linear data (or array of array data) with scrollbars or preview charts. Refer to the Zooming, Scrollbar, and Preview Chart Tutorial for more information.

[1457101800000, 1457125200000] | ...

zooming

Boolean

Demo

To turn on chart zooming on the x-axis. Refer to the Zooming, Scrollbar, and Preview Chart Tutorial for more information.

true | false | 1 | 0