Still have questions?
Contact support
You are looking at an outdated 7.3.0 version of this document. Switch to the 7.14.0 version to see the up to date information.

Scales

Overview

Scales allow you to control such features as minimum and maximum scale values, offsets, scale inversion, intervals, scale type and so on for a single axis. To create additional axes - please read Additional axes first. To adjust axes display - please see: Axes 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.

Types

There are four types of scales in AnyChart: "Linear", "Logarithmic", "Ordinal" and "DateTime". To set scale type use appropriate constructor:

chart.xScale(anychart.scales.linear());
newScale = anychart.scales.ordinal();
chart.yScale(newScale);

Note: working with extra axes is explained in Additional Axes Tutorial

Linear

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.

chart.xScale(anychart.scales.linear());

JsFiddle Playground

Logarithmic

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.

chart.yScale(anychart.scales.log());

In the sample below A = 637.166, B = 721.630, and C=1.000, D=78, E = 90.

JsFiddle Playground

Ordinal

Ordinal scale type is a default type for xScale in most charts. Values for this scale should be of string type and scale intervals will be set automatic.

chart.xScale(anychart.scales.ordinal());
JsFiddle Playground

Date Time

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.

chart.yScale(anychart.scales.dateTime());

JsFiddle Playground

Stack Mode

Scale mode defines some additional behavior of a chart. In the table below all modes are listed and their applicability to different chart types:

Scale modeCharts
NormalDefault for all
StackedAll liner types (Bar, Line, Area, etc.)
PercentStacked All liner types (Bar, Line, Area, etc.)

To change scale mode you need to set .stackMode() attribute. Possible attributes are: value and percent.

chart.yScale().stackMode('value'); 
chart.yScale().stackMode('percent');     

In the sample below stacked and percent stacked scales are demonstrated on the same data sets:

JsFiddle Playground

Minimum and Maximum

For any scale, but ordinal, you can set maximum and/or minimum values which are calculated automatically by default.

chart.yScale().minimum(-50).maximum(100);

Note, if you will set maximum value lesser than chart elements values, or minimum greater than them - these elements will be cut, and you will see only a part of them or will not see them at all.

JsFiddle Playground

Minor and Major Ticks

For any scale, but ordinal, you can set major and minor ticks intervals, which are calculated automatically by default. 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.

chart.yScale().ticks().interval(10);
chart.yScale().minorTicks().interval(2);

In the sample below you can see how interval settings affects grids, ticks and labels.

JsFiddle Playground

Minimum and Maximum Gap

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.

chart.yScale().minimumGap(0.5).maximumGap(0.5);

In the sample below you can see how offsets settings affects 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.

JsFiddle Playground

Inversion

If you want to display scale in an inverted mode use .inverted() method with "true" parameter.

chart.yScale().inverted(true);

Sample inverted scale chart:

JsFiddle Playground

Grids

Major and Minor

There are two types of grids in AnyChart - major grid and minor grid. To enable grid you have to specify:

  chart.minorGrid().enabled(true);
  chart.grid().enabled(true);

For each grid you can define line style:

 chart.grid().stroke('black');
 chart.minorGrid().stroke('black 0.5');

That's how simple grid will look like:

JsFiddle Playground

Dashed

You can also make your grid lines dashed:

chart.minorGrid().stroke({color: 'black', dash: '5 2 5', opacity: 0.2}).layout('horizontal');

And create chart like this:

JsFiddle Playground

Even and Odd fills

You can use this method with both major and minor grids. To do this you need to set .oddFill() or/and .evenFill() methods in the corresponding grid. Fill can be gradient, image and/or hatch as well as any other fill.

chart.grid(1).layout('horizontal').evenFill('white').oddFill('rgb(244,245,255');

That's how simple interlaced grid looks like:

JsFiddle Playground

One Scale for Different Charts

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

JsFiddle Playground

If you want to display axis in the center of the chart you need to set "crossing" value. This value should be in the range of perpendicular axis.

XML Syntax XML Code Plain code 01 02 03 Sample with crossing value set to 3:

Live Sample: Crossing value sample

to top –>

Base scale is a value where ticks, grids and labels are starting to show. Setting base value is useful when you want to ignore some part of scale range, but do not want to ignore it using minimum value attribute.

XML Syntax XML Code Plain code 01 02 03 Sample with base value set to 30:

Live Sample: Base value sample

to top

Current Page Online URL: Axes Scales–>