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: {...},
| Attribute | Type | Info |
|---|---|---|
alpha | Numeric | Sets the text's transparency of the scale-y (The vertical scale line on the chart). 0.3 | 0.9 | ... |
angle | Numeric | Sets the rotation angle of the object/shape. -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 true | false | 1 | 0 |
decimals | Numeric | 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. '.' | ',' | ... |
exponent | Boolean | 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 5 | 10 | ... |
format | String | To format the appearance of the scale values. Use with the '%v%' | '$%v' | '%v' | ... |
Object | To style the scale guides. Refer to the X/Y-Axis Scale Configuration Tutorial for more information. {...} | |
Object | 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 | To force all of the scale items to display. It is generally used with the true | false | 1 | 0 |
Object | To create and style the scale title. Refer to the X/Y-Axis Scale Configuration Tutorial for more information. {...} | |
labels | Array | 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 | 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 4 | '6px' | ... |
line-segment-size lineSegmentSize | Mixed | Can be used to create custom dashed or dotted lines when used with 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 | 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' | ... |
Array | 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 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' | ... |
Object | To style the minor guides, which appear between the major guides. Note that the {...} | |
Object | To style the minor tick marks, which appear between the major tick marks. Note that the {...} | |
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 | ... |
mirrored | Boolean | Setting 'mirrored':true will flip/mirror the y axis values. 'scale-y':{} values will read top to bottom. true | false | 1 | 0 |
multiplier | Boolean | Setting 'multiplier':true will abbreviate long numbers as small digits with a short unit indicator such as K, M, B true | false | 1 | 0 |
negation | String | Sets the negative symbol just outside of the formatted value. 'standard' | 'currency' |
offset | Numeric | 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' | ... |
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 | ... |
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 | ... |
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 | Sets the scale of the y axis 5 | 10 | ... |
short | Boolean | 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 K | M | B | KB | MB | GB | TB | PB |
show-labels showLabels | Array | Specifies which labels will be visible on the y axis. ['A', 'B'] | ... |
size | Mixed | 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' |
step | Mixed | 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 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. '.' | ',' | ... |
Object | To style the tick marks. Refer to the X/Y-Axis Scale Configuration Tutorial for more information. {...} | |
Object | To format and style the scale tooltips. Refer to the X/Y-Axis Scale Configuration Tutorial for more information. {...} | |
Object | Allows data to be transformed into a customizable format to display dates and times. {...} | |
values | Attribute | 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 '0:100:20' | '300:400:25' | '0:200' |
values | Array | An alternative way to create category scale labels. Similar to a [1, 7, 9] | ['Jan', 'Feb', 'Mar', 'Apr'] | ['Q1', 'Q2', 'Q3', 'Q4'] |
visible | Boolean | 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] | ... |
zooming | Boolean | 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 |