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.

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.

  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:

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

Look at the demonstration of possible labels display modes: "Normal" and "Stager".

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

JsFiddle Playground

Rotated labels:

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

JsFiddle 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:

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 .enabled(true) or .enabled(false) to 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:

JsFiddle 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:

JsFiddle 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"
  });

JsFiddle 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");

JsFiddle 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 agridto 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:

JsFiddle Playground

Alternatively, you can control gridusing layout() methodand 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 layout("circuit") to define circular layout or layout("radial") to enable 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:

JsFiddle Playground

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

JsFiddle Playground

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