Still have questions?
Contact support

Vertical Charts

Most types of series can be drawn both in horizontal and vertical orientation, and this article explains how do it. It also tells how to change the orientation of a chart on-the-fly.

Creating a Vertical Chart/Series

To create a vertical chart, use one of the three chart constructors: anychart.bar(), anychart.verticalLine(), and anychart.verticalArea().

There is no essential difference between them: they just switch the orientation of the axes, drawing the X-axis vertically and the Y-axis horizontally.

By default, when you just pass the data to the chart constructor, a series of the same type is created. For example, in the following sample the verticalArea() chart constructor draws a chart with an area series:

// create a data set
var data = anychart.data.set([
  ["January", 10000],
  ["February", 12000],
  ["March", 18000],
  ["April", 11000],
  ["May", 9000]
]);

// set the chart type
var chart = anychart.verticalArea(data);

JsFiddle Playground

After creating a vertical chart, you can also specify the series type.

Most of the series types in AnyChart can be vertical – to find out whether this option is available for the series you need to draw, check whether the class of the series has the isVertical method. For example, here is the isVertical() method of the Line series.

In the sample below, the verticalArea() chart constructor is used with the splineArea() method to create two spline area series:

// set the chart type
var chart = anychart.verticalArea();

// create the first series, set the data and name
var series1 = chart.splineArea(seriesData_1);
series1.name("2004");

// create the second series, set the data and name  
var series2 = chart.splineArea(seriesData_2);
series2.name("2005");

JsFiddle Playground

In the next sample there are two series, bar and line, created by the bar() and line() methods, and the chart constructor is bar():

// set the chart type
var chart = anychart.bar();

// create the first series
var series1 = chart.bar(seriesData_1);

// create the second series
var series2 = chart.line(seriesData_2);

JsFiddle Playground

Changing the Orientation On-The-Fly

After creating a series, you can change its orientation on-the-fly by calling the isVertical method and setting its parameter to either 'true' or 'false' (for example, here is the isVertical() method of the Line series). Please, keep in mind that it affects only the series, not the axes.

In the following sample this method is used to draw two horizontal (area) and a vertical (bar) series on the same chart:

// set the chart type
var chart = anychart.area();

// create the first series
var series1 = chart.area(seriesData_1);

// create the second series
var series2 = chart.area(seriesData_2);

// create the third series
var series2 = chart.column(seriesData_3);

// change the orientation of the third series to vertical
chart.getSeriesAt(2).isVertical(true);

JsFiddle Playground

To change the orientation of the whole chart on-the-fly, you should change the orientation of both the series and the axes (use the orientation() method):

// set the chart type
var chart = anychart.column();

// create the first series
var series1 = chart.column(seriesData_1);

// create the second series, set the data and name
var series2 = chart.column(seriesData_2);

// change the orientation of the series
chart.getSeriesAt(0).isVertical(true);
chart.getSeriesAt(1).isVertical(true);

// change the orientation of the axes
chart.xAxis().orientation('left');
chart.yAxis().orientation('bottom');

JsFiddle Playground