Axis Basics

Overview

In AnyChart axes are used to control grids, axes labels, lines and tick marks.

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

Declaration

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

  chart.xAxis().title().enabled(true).text('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 max = chart.yScale().maximum();
    var min = chart.yScale().minimum();
    chart.yAxis().title().align('bottom');
    chart.yAxis(0).orientation('right');
    chart.xAxis().title().text('Sample X axis name').fontWeight('400');
    chart.yAxis().title().text('Y axis from ' + min + ' to ' + max);

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

General formatting questions are answered in Text Formatting and Keywords section.

Learn how to format keywords in Number Formatting section.–>

JsFiddle Playground

Orientation

With AnyChart you can place axes to any side if 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.xAxis(0).orientation('top');
  chart.yAxis(0).orientation('right');

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

JsFiddle Playground

Labels

To enable axes labels you need to specify .labels().enabled(true) in desired 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".

  chart.xAxis().staggerMode(false);

JsFiddle Playground

Rotated labels:

  chart.yAxis().labels().enabled(true).rotation(90);
  chart.xAxis().labels().enabled(true).rotation(90);

JsFiddle Playground

  chart.xAxis().staggerMode(true);  //enables stagger mode
  chart.xAxis().staggerLines(2);    //set the number of lines for labels

JsFiddle Playground

Axis Line

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

  chart.lineMarker().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()

minorTicks().enabled(true)
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('inside');

The dashboard below shows how these settings work:

JsFiddle Playground

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