- Stack Mode
- Minimum and Maximum
- Soft Minimum and Soft Maximum
- Stick to Zero
- Minor and Major Ticks
- Minimum and Maximum Gap
- One Scale for Different Charts
Scales allow you to control such features as minimum and maximum scale values, scale inversion, intervals, scale type and so on for a single axis. To create additional axes - please read Additional axis first. To adjust axes display - please see: Axis Basics tutorial.
In this section we will explain main scales options.
If you want to control any of scale settings - you should do that using scale() method.
chart.xScale(anychart.scales.linear()); var newScale = anychart.scales.ordinal(); chart.yScale(newScale);
Note: working with extra axes is explained in Additional Axes Tutorial
Linear scale type is a default type for yScale in most charts. Values for this scale should be numbers and scale intervals will be evenly distributed along the axis. This type of scale is used when values fall within one reasonable range.
A logarithmic scale is a scale of measurement that uses the logarithm of a physical quantity instead of the quantity itself. Presentation of data on a logarithmic scale can be helpful when the data covers a large range of values the logarithm reduces this to a more manageable range.
In the sample below A = 637.166, B = 721.630, and C=1.000, D=78, E = 90.
Ordinal scale type is a default type for xScale in all cartesian charts. Values for this scale should be of string type and scale intervals will be set automatic.
Note: You can set custom names for ordinal scale using names() method. Use string parameter for this method to set data field with names for scale values or use array as parameter for names() method to set custom names.
A dateTime scale is a scale of measurement that is based on the UTC Date format, but accepts variety of data formats. Presentation of data on a dateTime scale can be helpful for displaying time lines and time intervals. More information about data formats and usage is in Date/Time tutorial.
Scale mode defines some additional behavior of a chart. In the table below all modes are listed and their applicability to different chart types:
|Normal||Default for all|
|Stacked||All liner types (Bar, Line, Area, etc.)|
|PercentStacked||All liner types (Bar, Line, Area, etc.)|
To change scale mode you need to set stackMode() parameter. Possible attributes are: value and percent.
var yScale = chart.yScale(); yScale.stackMode("percent");
In the sample below stacked and percent stacked scales are demonstrated on the same data sets:
For stacked charts with multiple series it is possible to divide stacked series into groups. The groups can be created by using a new y scale for each group. New scale should be used as a parameter of .yScale() method for each series in the group:
var newScale = anychart.scales.linear() var series = chart.column(data); series.yScale(newScale);
Here is a sample of clustered series groups in a stacked modes:
For any scale, but ordinal, you can set maximum and/or minimum values which are calculated automatically by default.
var yScale = chart.yScale(); yScale.minimum(-50); yScale.maximum(100);
Note, if you will set maximum value lesser than chart elements values, or minimum greater than them - these elements will be cropped, and you will see only a part of them or will not see them at all.
For any scale, but ordinal, you can set soft maximum and/or soft minimum values.
var yScale = chart.yScale(); yScale.softMinimum(-50); yScale.softMaximum(100);
In some cases you may have no need to define solid minimum or maximum and need a scale to be autocalculated, but at the same time you may want a scale to remain in a certain range (i.e. "never go below zero" or "never go above 100"): that's the case when soft maximum and soft_minimum parameters help you.
Sample below shows how soft minimum and soft maximum help to show data better than simple minimum and maximum.
stickToZero() method allows to disable the default scale autocalculation behavior and always include zero in scale range.
Major and minor ticks intervals are axis steps, which define where axis labels (major interval), axis ticks (major and minor, correspondingly) and major and minor grids are displayed.
// get ticks var yTicks = chart.yScale().ticks(); // set ticks interval yTicks.interval(10); // get minor ticks var minorTicks = chart.yScale().minorTicks(); // set minor ticks interval minorTicks.interval(2);
In the sample below you can see how interval settings affects grids, ticks and labels.
For any axis scale you can set minimum and maximum offsets. Maximum and minimum offsets are the spacing between maximum or minimum axis scale values and they are set as a ratio to the maximum and minimum scale values.
var yScale = chart.yScale(); yScale.minimumGap(0.5); yScale.maximumGap(0.5);
In the sample below you can see how offsets settings affects js chart. The chart to the left has minimum and maximum offsets set to 0.5, the chart to the right has all the same settings, but offsets are not set. Note that offsets are ignored when maximum or minimum scale values are specified.
If you want to display scale in the inverted mode use inverted() method with "true" parameter.
var yScale = chart.yScale(); yScale.inverted(true);
Sample of the chart with inverted scale:
Scale calculates values and in many cases it is very useful to adjust settings of one scale and then use it for multiple charts. in example below we will create custom scale, adjust it and apply it for 2 charts. Click "launch in playground" to see the code