Axis Basics

Overview

In AnyChart axes are used to control grids, axes labels, lines and tick marks, axes themselves depend on scales.

In this section we will demonstrate most of the axes visualization options, which are the same for Y and X axes.

Declaration

If you want to control any of the axes settings - you should do that using Axis methods:

chart.xAxis().title('Sample X axis name');

Title

You can define a title of any axis, you can control its position and font, when specifying text. Full reference of parameters can be found in Reference: yAxis().title() or xAxis().title(). Here is a sample titles definition:

var yTitle = chart.yAxis().title();
yTitle.enabled(true);
yTitle.text("Units");
yTitle.align("bottom");

chart.xAxis().title("Sample X axis name");

As you can see, we've set titles both to X and Y axis.

JsFiddle Playground

Orientation

With AnyChart web charts you can place axes to any side of the chart, all you need to do is to adjust orientation() parameter of yAxis() or xAxis() methods. Orientation depends on plot type and inversion of axes, you will find list of all possible orientation and inversion settings in Axes Positioning and Inverting Templates.

chart.yAxis().orientation("right");
chart.xAxis().orientation("top");

And here is the demonstration of this feature on the Single series column chart:

JsFiddle Playground

Labels

To enable or disable axis labels you need to specify labels().enabled() parameter of an axis. You can specify how labels should look like, padding between labels and an axis line, should labels be rotated or staggered, etc.

Learn more about axes labels formatting in Axes Labels Tutorial

Normal labels look like this:

JsFiddle Playground

Rotated labels:

chart.yAxis().labels().rotation(-90);
chart.xAxis().labels().rotation(-90);

JsFiddle Playground

Adaptive stagger mode and with the maximum number of lines defined:

// enables stagger mode
chart.xAxis().staggerMode(true);
// set the maximum number lines for labels to stagger 
// if chart is able to fit labels without staggering or staggering
// in 2 or 3 lines - it will do so. It will not go over 4 lines:
chart.xAxis().staggerMaxLines(4);

Stagger always mode with the fixed number of lines:

// enable stagger mode
chart.xAxis().staggerMode(true);
// set the number of lines for labels to stagger 
chart.xAxis().staggerLines(3);

Here is a sample of two similar charts with adaptive and fixed stagger modes enabled, you can see that the first one uses adaptive strategy and occupies two lines, the second one always uses three lines:

JsFiddle Playground

Axis Line and Zero Line

It is possible to tune visual appearance of axis line and zero line. To do this you need to use lineMarker() method.

var line = chart.lineMarker();
line.value(0);  
line.stroke("2 red");

As in any line, you can make it gradient, change opacity and thickness using stroke() method. Read more about lines in Strokes and Lines tutorial

JsFiddle Playground

Tickmarks

Tickmarks are the small marks used to represent a point on an axis scale, there are major and minor ticks, first used to indicate major step of an axis scale, second - minor step. You can control their appearance and position. To enable/disable ticks set "true" or "false" to the enabled() method of the ticks() or minorTicks()

chart.yScale().minorTicks().enabled(true);
chart.yScale().ticks().enabled(false)

Ticks can be placed inside or outside relatively to the axis line. These features are controlled by position() attributes:

chart.yAxis().ticks().position("outside");
chart.xAxis().ticks().position("outside");

The dashboard below shows how these settings work:

JsFiddle Playground

Grids

There are two types of grid in AnyChart charting framework - major grids that can be controlled using xGrid() and yGrid() methods and minor grids that is controlled with xMinorGrid() and yMinorGrid() method.

Note: Grid lines correlate with ticks of the chart scale. To manage the number of ticks use interval() parameter of the corresponding scale.

To enable grids use enabled(true) method.

// enable major grids
chart.xGrid().enabled(true);
chart.yGrid().enabled(true);
// enable minor grids
chart.xMinorGrid().enabled(true);
chart.yMinorGrid().enabled(true);

Here is how default major and and minor grids of a columne chart look like:

JsFiddle Playground

Visualization

Lines

You can control visual appearance of grid lines using stroke() method. Full information on lines settings can be found in lines tutorial.

chart.xGrid().stroke({
  // set stroke color
  color: "#fff000",
  // set dashes and gaps length
  dash: "3 5"
});

Please take a look at the sample where chart settings are dramatically modified and grids are adjusted accordingly:

JsFiddle Playground

Interlace

Grid's fill is controlled by palette() method. It can be used to create solid and interlaced effects.

// interlace settings
chart.yGrid().palette(["#FFF 0.25", "#000 0.25"]);

JsFiddle Playground

You can use either a simple array of colors, containing any number of elements, or anychart.palettes.RangeColors or anychart.palettes.DistinctColors described in Palettes.

Here is a sample where grid coloring is used to highlight value zones:

JsFiddle Playground

And by simply passing one color to a palette and disabling stroke you can fill the chart area with the single color:

JsFiddle Playground