Axis Basics


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.


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');


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.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


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


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

JsFiddle Playground


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".


JsFiddle Playground

Rotated labels:


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


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


The dashboard below shows how these settings work:

JsFiddle Playground

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