AnyChart Documentation
Still have questions?
Contact support
Still have questions?
Contact support

© 2024 AnyChart.Com All rights reserved.

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 the 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 the X- and Y-axes.

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:

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:

Playground

Rotated labels:

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

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:

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

chart.yAxis().minorTicks().enabled(true);
chart.yAxis().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:

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:

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:

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

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:

Playground

Note: To fill the background of the data area (the area limited by the axes) with one color, you do not need to use data grids - see the Data Area section.