Vertical Charts

Overview
Quick Start
Switching On-the-Fly
- Series
- Chart
Supported Types

Overview

In AnyChart you can draw a chart in a vertical orientation by switching the orientation of the axes. Most types of series support this feature – see the Supported Types section.

This article explains how to create a vertical chart and how to change the orientation of a chart on-the-fly.

Quick Start

To create a vertical chart, use one of these three chart constructors:

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.

You can pass your data to the chart constructor to create a series of the same type. Alternatively, you can specify the series type manually. A series supports vertical orientation if its class has has the isVertical method. For example, here is the isVertical() method of the Line series. You can also see the Supported Types section of this article.

In the sample below, there are two series, Spline Area and Spline, created by the splineArea() and spline() methods, and the chart constructor is anychart.vertical():

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

// map the data
var seriesData_1 = data.mapAs({x: [0], value: [1]});
var seriesData_2 = data.mapAs({x: [0], value: [2]});

// create a chart
chart = anychart.vertical();

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

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

// set the container id
chart.container("container");

// initiate drawing the chart
chart.draw();

Playground

Switching On-the-Fly

Series

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

Note: This setting 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:

// create a chart
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);

Playground

Chart

To switch the orientation of the whole chart on-the-fly, you should change the orientation of both the series and axes. So, use the isVertical and orientation() methods:

// create a chart
var chart = anychart.column();

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

// create the second series
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');

Playground

Supported Types

Here is the list of supported vertical charts: