Smart 3d Chart - configuration and usage

3D Chart Axis Properties and Settings

Smart 3d Chart has three main types of axes - valueAxis, xAxis and zAxis. Typically the valueAxis represents the vertical axis in the chart although you may choose to rotate the axes and in this case the valueAxis will be displayed horizontally.

The following image illustrates the different elements of the axes:

The labels displayed along the valueAxis are derived from the values of the series displayed in the chart.
The labels along the xAxis are derived from the values of the xAxis.dataField property in your data source. In case you don't specify a dataField property, the xAxis will show sequential numbers corresponding to each record in the data source.
The labels along the zAxis typically represent the categories of the data.

In the case of a scatter-type chart, all three axes are used as valueAxis to represent the scatter data.

Common Axis Properties

The valueAxis, xAxis and zAxis have a set of common properties and settings. Most of the properties are optional and if you don't change them, Smart 3d Chart will use default settings.

Here is a list of the common properties that you may change:

• visible - a boolean determining whether the axis is visible.
• minValue - sets the minimum value of the axis. If not set, the chart will use the minimum value from the data source.
• maxValue - sets the maximum value of the axis. If not set, the chart will use the maximum value from the data source.
• unitInterval - an integer value which determines the interval between the values along the axis. If not set, the chart will automatically calculate the size of the interval. The algorithm will try to ensure that all labels, grid lines and tick marks fit well depending on the size of the axis and the total number of data points.
• flip - specifies whether the values are displayed in reverse order.
• title - a collection of properties describing how to display the title of the axis.
  • visible - a boolean determining whether the title is visible.
  • text - a string representing the text of the axis title.
  • class - a string representing the CSS class of the axis title.
  • offset - an integer representing the offset of the axis title from the axis.
• labels - a collection of properties describing how to display the labels along the axis.
  • visible - a boolean determining whether the labels is visible.
  • step - an integer value which determines the labels' intervals step.
  • class - a string representing the CSS class of the axis labels.
  • formatSettings - settings used to format the labels.
    • prefix - a string that will appear at the begining of the text.
    • sufix - a string that will appear at the end of the text.
    • decimalSeparator - a symbol used to mark the border between the integer and fractional part of a number.
    • thousandsSeparator - a symbol used to mark the border between thousands, millions, billions, etc.
    • decimalPlaces - the number of digits displayed after the decimal separator.
    • negativeWithBrackets - a boolean value indicating whether to display negative numbers in brackets.
  • formatFunction - callback function used to format the labels.
  • angle - an integer representing the labels rotation angle in degrees.
  • offset - custom horizontal and vertical labels position offset, e.g. {x: 5, y: 2}
• gridLines - a collection of properties describing how to display the axis grid lines.
  • visible - a boolean determining whether the grid lines are visible.
  • step - an integer value which determines the the grid lines' interval step.
  • color - a string representing color of the grid lines.

xAxis-specific Properties

There are several properties which are applicable only to the xAxis:

• type - the type of the xAxis. Values can be:
  • 'auto' - automatically detects and switches to 'basic' or 'date'
  • 'date'- when displaying dates
  • 'basic' - displays all data points sequencially
• dataField - name of the field in the data source. The values of this field will be displayed along the axis.
• rangeSelector - definition of a range selector on the xAxis. For more details, please check the xAxis.rangeSelector entry in the API documentation and the Zooming (Range Selection) demos.

valueAxis-specific Properties

Similarly, several properties are applicable only to the valueAxis:

• baselineValue - an integer representing the baseline value for the axis. The default value is 0.
• logarithmicScale - a boolean representing whether to use logarithmic scale. The default value is false.
• logarithmicScaleBase - an integer representing the base of logarithmic scale. The default value is 10.