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:

var xAxis = chart.xAxis();
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.

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.

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

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

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

Look at the demonstration of possible label display modes: "Normal" and "Stagger".

var xAxis = chart.xAxis();
xAxis.staggerMode(false);

Playground

Rotated labels:

var xLabels = chart.yAxis().labels();
xLabels.rotation(-90);
var yLabels = chart.xAxis().labels();
yLabels.rotation(-90);

Playground

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

// getter of x axis
var xAxis = chart.xAxis();
// enables stagger mode
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:
xAxis.staggerMaxLines(4);

Stagger always mode with the fixed number of lines:

// getter of x axis
var xAxis = chart.xAxis();
// enables stagger mode
xAxis.staggerMode(true);
// set the number of lines for labels to stagger 
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:

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

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()

var minorTicks = chart.yScale().minorTicks;
minorTicks.enabled(true);
var majorTicks = chart.yScale().ticks();
majorTicks.enabled(false)

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

var yAxisTicks = chart.yAxis().ticks();
yAxisTicks.position("outside");

var xAxisTicks = chart.xAxis().ticks();
xAxisTicks.position("outside");

The dashboard below shows how these settings work:

Playground

Grids

There are two types of grid in AnyChart charting framework - major grid that can be controlled using grid() method and minor grid that is controlled with minorGrid() method. To enable major grid use enabled(true) method for grid() and if you want to display minor grid use enabled(true) method for minorGrid().

// enable major grid
var grid = chart.grid();
grid.enabled(true);
// enable minor grid
var minorGrid = chart.minorGrid();
minorGrid.enabled(true);

Here is how default grid and minor grid of cartesian chart looks like:

Playground

Visualization

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

var grid = chart.grid();
grid.stroke({
  // set stroke color
  color: "#FFF",
  // set dashes and gaps length
  dash: "3 5"
});

Playground

Grid's fill is controlled by two methods: evenFill() method controls inner color of all even spaces between grid lines and oddFill() method controls the color settings of all odd spaces.

// grid settings
var grid = chart.grid();
// set odd fill
grid.oddFill("#FFF 0.25");
// set even fill
grid.evenFill("#000 0.25");

Playground

Note: Grid lines correlate with ticks of the chart scale. To manage lines number adjust interval() parameter of the chart scale. Use axis() method to bind grid to an axis which is bound to a scale, or use scale() method to bind grid to a custom scale. See Layout section below to learn more.

Layout

Either grids and minor grids can be placed vertically or horizontally on the chart. You can control grids placement in two ways, the first is to bind a grid to an appropriate axis using axis() method:

// create major and minor grids and bind them to X and Y axes
var y_grid = chart.grid(0);
y_grid.axis(chart.yAxis());

var x_grid = chart.grid(1);
x_grid.axis(chart.xAxis());

var y_minor_grid = chart.minorGrid(0);
y_minor_grid.axis(chart.yAxis());

var x_minor_grid = chart.minorGrid(1);
x_minor_grid.axis(chart.xAxis());  

In such case the grid will be bound to this axis and change its orientation and placement according to axis orientation and placement, as it is shown in the sample below:

Playground

Alternatively, you can control grid using layout() method and scale() methods. This can be done like shown below and is used in dashboards and charts with complex configurations:

var grid = chart.grid();
grid.layout("vertical");
grid.layout(chart.xScale());

As far as radar and polar charts appearance vary greatly from other chart types, these chart types have their own grid layouts. For these charts you can use the layout() method to define circular or radial grid layout.

// create radar chart
var chart = anychart.radar();

var grid = chart.grid();
grid.layout("circuit");

Here is a sample of radar chart with circular grid:

Playground

And here is a sample of Polar chart with radial layout:

Playground

You are looking at an outdated v7 version of this document. Switch to the v8 version to see the up to date information.