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

© 2024 AnyChart.Com All rights reserved.

Axes

Overview

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

In this section we will demonstrate the differences of AnyStock axes and scales from basic charts' ones.

Stock Axes features

Axes in AnyStock are generally quite similar to the Basic ones, but the X-axis is slightly different:

  • X-axis is always in date time format and shows the Data values
  • X-axis is always scrollable
  • X-axis has background instead of stroke (axis line)
  • X-axis cannot be moved to another side of a plot (always at the bottom)
  • X-axis has a Helper Label feature
  • There are no drawFirstLabel, drawLastLabel in Stock X-axis
  • X-axis Tickmarks settings are different (ticks can be displayed only inside of the axis)
  • X-axis doesnt have a title
  • Only one X-axis for a plot (so the max number of X-axes on an AnyStock chart is equal to the number of the plots)

Orientation

While a lot of AnyStock Axes settings are the same as Basic charts', there is a difference in their orientation settings. Due to the specifics of AnyStock charts, the X-axis has to be at to the bottom of the plot. The Y-axes act as usual.

Tickmarks

The ticks in AnyStocks are a little bit different too. As the X-axis is an area, the ticks are being placed inside of it. Let's enable both major (with ticks() method) and minor (with minorTicks() method) ticks:

Playground

Scroll the chart to see them all.

We can adjust the length of ticks on X-axis only by setting another height for the axis with the height() method of the axis. Ticks themselves don't have this method.

You can find how to work with the X-axis height in the Axis Line part of the article.

Labels

Labels of the X-axis have an additional feature: it is a helper label that "saves" the scrolled major label value. Just scroll the previous example and watch the scrolled labels.

That happens when the helperLabel is on (by default). You can disable it by passing false to the showHelperLabel() method.

// disabling the Helper Label
chart.plot(0).xAxis().showHelperLabel(false);

Playground

Finally, as our X-axis is an area, the labels are placed and might be moved only inside of this area. For example, let's put our labels (both major and minor) to the right of the ticks we have enabled before. We use position() and anchor() to move them correctly.

// moving the labels
xAxis = chart.plot(0).xAxis();
xAxis.labels().position('right').anchor('left_center');
xAxis.minorLabels().position('right').anchor('left_center');

Playground

Axis Line

In AnyStock, the x-axis is not a line, but an area with the background and height. We can change these parameters using background() and height() methods. Let's apply these methods:

// changing the background and the height of the axis
xAxis.background('#CCFFFF');
xAxis.height(40);

Playground

Grids

Grids are added to every plot using grid method, the settings are similar to basic grids, but it is a method of a plot, not a chart:

// defining the chart 
chart = anychart.stock();

// dashed horizontal grid
chart.plot(0).yGrid().enabled(true);
chart.plot(0).yGrid().stroke({dash: "3 5"});

Playground

Extra/Additional Axes

You can add as many Y-axes as you need, but there can be only one X-axis on one plot. You can have more than one plot on an AnyStock chart with one x-axis in each. It might be comfortable to use several series when you've got several series on a chart with completely different values. Look at the following sample:

// Create and tune additional y axis
var extraYAxis = plot_line_ohlc.yAxis(1);
extraYAxis.orientation("right");
extraYAxis.scale(extraYScale);

Note that when you add an extra axis you need to change chart padding to fit the labels, AnyStock Chart, unlike AnyChart charts, do not fit axes labels automatically, paddings can be set both in pixels and as a percentage:

// create a chart
chart = anychart.stock();
// set paddings
chart.padding("10%", 10, 10, 50);

Playground

Axes Markers