JSON Configuration

{
  "globals": {},
  "gui": {
    "behaviors": [{}],
    "context-menu": {
      "button": {},
      "custom-items": [{}],
      "gear": {},
      "item": {}
    }
  },
  "graphset": [{
    "3d-aspect": {},
    "arrows": [{
      "from": {},
      "to": {}
    }],
    "crosshair-x": {
      "marker": {},
      "plot-label": {},
      "scale-label": {}
    },
    "crosshair-y": {
      "scale-label": {}
    },
    "csv": {},
    "images": [{}],
    "labels": [{
      "callout-tip": {}
    }],
    "legend": {
      "footer": {},
      "header": {},
      "icon": {},
      "item": {},
      "item-off": {},
      "marker": {},
      "page-off": {},
      "page-on": {},
      "page-status": {},
      "scroll": {
        "bar": {},
        "handle": {}
      },
      "tooltip": {}
    },
    "media-rules": [{}],
    "no-data": {},
    "options": {
      "context-menu": {
        "button": {},
        "items": {}
      },
      "indicator": {
        "npv": {},
        "title": {},
        "value": {}
      },
      "style": {
        "hover-state": {},
        "tooltip": {}
      },
      "words": []
    },
    "plot": {
      "animation": {},
      "background-marker": {},
      "background-state": {},
      "error": {
        "hover-state": {}
      },
      "errors": [],
      "goal": {},
      "guide-label": {},
      "highlight-marker": {},
      "highlight-state": {},
      "hover-marker": {},
      "hover-state": {},
      "legend-item": {},
      "legend-marker": {},
      "marker": {},
      "preview": {},
      "rules": [{}],
      "selected-marker": {},
      "selected-state": {},
      "tooltip": {},
      "trend-down": {},
      "trend-equal": {},
      "trend-up": {},
      "value-box": {
        "connector": {},
        "joined": {},
        "shared": {}
      }
    },
    "plotarea": {},
    "preview": {
      "active": {},
      "handle": {},
      "handle-bottom": {},
      "handle-left": {},
      "handle-right": {},
      "handle-top": {},
      "mask": {}
    },
    "scale": {},
    "scale-k": {
      "guide": {
        "items": [{}]
      },
      "item": {},
      "tick": {},
      "tooltip": {}
    },
    "scale-r": {
      "center": {},
      "guide": {},
      "item": {},
      "markers": [{
        "label": {}
      }],
      "minor-guide": {},
      "minor-tick": {},
      "ring": {
        "items": [{}]
      },
      "tick": {}
    },
    "scale-v": {
      "guide": {
        "items": [{}]
      },
      "item": {},
      "ref-line": {},
      "tick": {},
      "tooltip": {}
    },
    "scale-x": {
      "guide": {
        "items": [{}]
      },
      "item": {},
      "label": {},
      "markers": [{
        "label": {}
      }],
      "minor-guide": {},
      "minor-tick": {},
      "ref-line": {},
      "rules": [{}],
      "tick": {},
      "tooltip": {},
      "transform": {
        "guide": {},
        "item": {}
      }
    },
    "scale-y": {
      "guide": {
        "items": [{}]
      },
      "item": {},
      "label": {},
      "markers": [{
        "label": {}
      }],
      "minor-guide": {},
      "minor-tick": {},
      "ref-line": {},
      "rules": [{}],
      "tick": {},
      "tooltip": {},
      "transform": {}
    },
    "scroll-x": {
      "bar": {},
      "handle": {}
    },
    "scroll-y": {
      "bar": {},
      "handle": {}
    },
    "series": [{
      "animation": {},
      "background-marker": {},
      "background-state": {},
      "error": {},
      "errors": [],
      "goal": {},
      "guide-label": {},
      "highlight-marker": {},
      "highlight-state": {},
      "hover-marker": {},
      "hover-state": {},
      "legend-item": {},
      "legend-marker": {},
      "marker": {},
      "preview": {},
      "rules": {},
      "selected-marker": {},
      "selected-state": {},
      "tooltip": {},
      "trend-down": {},
      "trend-equal": {},
      "trend-up": {},
      "value-box": {},
      "values": []
    }],
    "shapes": [{
      "label": {}
    }],
    "source": {},
    "subtitle": {},
    "title": {},
    "tooltip": {},
    "widgets": [],
    "zoom": {
      "label": {}
    }
  }],
  "history": {
    "item": {},
    "item-off": {}
  },
  "refresh": {
    "curtain": {}
  }
}

 Back to Docs  Back to JSON Attributes Tree

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.

Attribute Type Info
alpha Numeric

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

0.3 | 0.9 | ...

angle Numeric

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

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

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

5 | 10 | ...

format String

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

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

guide Object

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

{...}

item 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 'max-items' attribute.

true | false | 1 | 0

label 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

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

4 | '6px' | ...

line-segment-size
lineSegmentSize
Mixed

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

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

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

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

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

5 | 10 | ...

max-labels
maxLabels
Numeric

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

5 | 10 | ...

max-ticks
maxTicks
Numeric

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

5 | 10 | ...

max-value
maxValue
Numeric

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

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

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

mirrored Boolean

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

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 NOTE: you can also use the attribute 'short':true

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 right 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 left side.

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

offset-x
offsetX
Mixed

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

4 | '6px' | ...

offset-y
offsetY
Mixed

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

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

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

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

Inserts punctuation to separate numbers in values over 999.

'.' | ',' | ...

tick Object

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

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

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

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

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

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 x-axis. Refer to the Zooming, Scrollbar, and Preview Chart Tutorial for more information.

true | false | 1 | 0

Chart View Code View
Edit This Chart Share This Chart Start a FREE Trial
JS JSON