Docs Back to Docs

graph » scale-y

scale-y, scale-y-n

[ root » graph » scale-y ]

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

Example structure of scale object.

"scale-y" : {...},
"scale-y-2" : {...},
scaleY: {...},
scaleY2: {...},
AttributeTypeInfo
alphaNumeric

Sets the text's transparency of the scale-y (The vertical scale line on the chart).

0.3 | 0.9 | ...

angleNumeric

Sets the rotation angle of the object/shape.

-45 | 115 | ...

auto-fit
autoFit		Booleantrue | false | 1 | 0
blendedBoolean

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

decimalsNumeric

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

5 | 10 | ...

decimals-separator
decimalsSeparator		String

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

'.' | ',' | ...

exponentBoolean

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

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

5 | 10 | ...

formatString

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

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

guideObject

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

{...}

itemObjectTo 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

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

true | false | 1 | 0

labelObject

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

{...}

labelsArray

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', ...] | ...

layoutString''horizontal' | 'h' | 'vertical' | 'v' | 'row x col' | 'x col' | 'row x' | 'float''
line-color
lineColor		String

Sets the color of the axis line.

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

line-gap-size
lineGapSize		Mixed

Can be used to create custom dashed or dotted lines when used with line-segment-size. This will control the size of the gaps between each line segment.

4 | '6px' | ...

line-segment-size
lineSegmentSize		Mixed

Can be used to create custom dashed or dotted lines when used with line-gap-size. This will control the size of the visible segment of line.

4 | '6px' | ...

line-style
lineStyle		String

Sets the line style of the axis line.

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

line-width
lineWidth		Mixed

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

marginMixed

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

markersArray

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

Sets the max number of values displaying along the bottom horizontal line.

5 | 10 | ...

max-labels
maxLabels		Numeric

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

5 | 10 | ...

max-ticks
maxTicks		Numeric

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

5 | 10 | ...

max-value
maxValue		Numeric

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

4 | '6px' | ...

min-value
minValue		Numeric

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

'auto' | 4 | '6px' | ...

minor-guide
minorGuide		Object

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

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

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

mirroredBoolean

Setting 'mirrored': true will flip/mirror the y axis values. 'scale-y': {} values will read top to bottom.

true | false | 1 | 0

multiplierBoolean

Setting 'multiplier': true will abbreviate long numbers as small digits with a short unit indicator such as K, M, B

true | false | 1 | 0

negationString

Sets the negative symbol just outside of the formatted value.

'standard' | 'currency'

offsetNumeric

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

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

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

offset-start
offsetStart		Numeric

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

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

offset-x
offsetX		Mixed

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

4 | '6px' | ...

offset-y
offsetY		Mixed

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

4 | '6px' | ...

placementString

Sets the placement of the scale object.

'default' | 'opposite'

progressionString

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.

5 | 10 | ...

rulesArray

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

Sets the scale of the y axis

5 | 10 | ...

shortBoolean

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

true | false | 1 | 0

short-unit
shortUnit		String

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

Specifies which labels will be visible on the y axis.

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

sizeMixed

Sets the size of the object/shape.

4 | '6px' | ...

size-factor
sizeFactor		String

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

'auto'

stepMixed

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

Sets the characters used to separate thousands in larger numbers.

'.' | ',' | ...

tickObject

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

{...}

tooltipObject

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

{...}

transformObject

Allows data to be transformed into a customizable format to display dates and times.

{...}

valuesAttribute

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'

valuesArray

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']

visibleBoolean

You can set the 'scale-y': { } to 'visible': false to hide the y axis. The y-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

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

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

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

zoomingBoolean

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

true | false | 1 | 0