Still have questions?
Contact support
You are looking at an outdated 7.12.0 version of this document. Switch to the 7.13.0 version to see the up to date information.

3D Charts

Overview

Even though there are quite a few types of charts that can be used for data visualization, AnyChart always tries to achieve more. Using AnyChart component you can create 3d versions of some chart types. 3D mode was created as alternative visual appearance of the common types of charts. Please, do not abuse this feature cause it may be misleading.

To make 3D Effect more appealing don't forget to turn on grids.

Single Series

Depending on the data model and visualization purpose you can use different 3d chart types. This section contains information on every 3d chart type.

Area

Area charts emphasize the magnitude of change over time, and can be used to draw attention to the total value across a trend. Method area3d() creates 3D plot for your series. Use your data as a parameter for area() method to visualize it as 3D area series.

// define data set
var data = anychart.data.set([
  ["Department Stores", 637166],
  ["Discount Stores", 721630],
  ["Men's/Women's Specialty Stores", 148662],
  ["All other outlets", 90000]
]);

// create 3D chart's plot
var chart = anychart.area3d();

// create series
chart.area(data);

Here is a sample how simple 3d area looks like:

JsFiddle Playground

Bar

3D bar chart can be created as easy as area chart. Firstly, you have to create 3d chart plot using bar3d() method. After creating the plot pass your data to bar() method just like that:

// define data set
var data = anychart.data.set([
  ["Department Stores", 637166],
  ["Discount Stores", 721630],
  ["Men's/Women's Specialty Stores", 148662],
  ["All other outlets", 90000]
]);

// create chart
var chart = anychart.bar3d();

// create series
chart.bar(data);

And here is a sample with the settings from above:

JsFiddle Playground

Column

3D column chart is very similar to 3D bar chart and it is a kind of vertically orientated 3D bar plot. 3D column plot is controlled by column3d() method. After creating chart’s plot you need to pass your data to column() method to create 3d column series.

// define data set
var data = anychart.data.set([
  ["Department Stores", 637166],
  ["Discount Stores", 721630],
  ["Men's/Women's Specialty Stores", 148662],
  ["All other outlets", 90000]
]);

// create chart
var chart = anychart.column3d();

// create series
chart.column(data); 

JsFiddle Playground

Pie

3D pie chart is a way of presenting single series of data as a percentage of the whole pie. Use pie3d() method to enable 3D mode for pie chart.

// define data set
var data = anychart.data.set([
  ["Department Stores", 637166],
  ["Discount Stores", 721630],
  ["Men's/Women's Specialty Stores", 148662],
  ["All other outlets", 90000]
]);

// create 3d pie chart
var chart = anychart.pie3d(data);

More information about pie charts can be found in pie and doughnut chart article.


Here is a sample of 3d pie chart:

JsFiddle Playground

Multiple Series

Multiple series on a single data plot can be created as easy as a single one. There are several ways to display multiple series on a 3D chart's plot. This section discloses most of them.

Multi-Series

One of the most simplest way to create multiple series on a chart is to invoke method for creating desirable type of series for each data set you have.

// data
var data = anychart.data.set([
  ["Department Stores", 637166, 737166],
  ["Discount Stores", 721630, 537166],
  ["Men's/Women's Specialty Stores", 148662, 188662],
  ["Juvenile Specialty Stores", 78662, 178662],
  ["All other outlets", 90000, 89000]
]);

// map data for data sets
var Sales2003 = data.mapAs({x: [0], value: [1]});
var Sales2004 = data.mapAs({x: [0], value: [2]});

// define chart type
var chart = anychart.column3d();

// set data
chart.column(Sales2003);
chart.column(Sales2004);

Here is a sample of multi-series bar chart

JsFiddle Playground

Z Distribution

Common 2D chart distributes series along X axis, by default 3D multi-series charts do the same, but you can set distribution along Z axis for 3d charts using zDistribution() method. Use true parameter to enable z axis distribution and false for x axis distribution.

// Turn on Z Distribution
chart.zDistribution(true);

Here is a sample of a Multi-series chart with Z Distribution enabled:

JsFiddle Playground

Value Stacked

Value stacked 3d charts are multi-series charts that display series point value upon the same point of the previous series. To enable value stacked mode you need to call stackMode() method with value parameter. The stackMode() method should be invoked for chart's y scale. Chart's y scale is controlled by yScale() method. Here is a snippet of setting value stacked mode:

// create chart 3d plot
var chart = anychart.area3d();
// getter for y scale
var yScale = chart.yScale();
// set "value" stacked mode
yScale.stackMode("value");

Here is a sample of 3D stacked area chart:

JsFiddle Playground

Percent Stacked

Percent Stacked 3d charts is quite similar to a simple 2d percent stacked chart. Information about percent stacked area charts can be found in percent stacked area-splineArea charts tutorial and information about percent stacked bars and columns can be found in percent stacked bar-column charts tutorial.


To enable percent stacked mode you have to use stackMode() method with percent parameter for chart's y scale.

// create chart 3d plot
var chart = anychart.area3d();
// getter for y scale
var yScale = chart.yScale();
// set "percent" stacked mode
yScale.stackMode("percent");

Let's see, how percent stacked 3d column chart looks like:

JsFiddle Playground

Visualization

3D charts have much more interesting appearance than 2d charts and have special methods to control visualization. This section describes methods of tuning visual appearance of a 3d plot.

Angle

As far as 3d implements observing chart from different angles, it is important to tune viewing angle. Use desirable angle as a parameter for zAngle() method to adjust it.

var chart = anychart.column3d();
chart.column(data);

// change angle
chart.zAngle(20);

Note: zAngle() range is limited and can't be less than 0 and greater than 90.

Aspect

For three- imensional charts it might be necessary to adjust depth of the plot. The zAspect() method controls depth of the 3D chart's plot.

var chart = anychart.column3d();
chart.column(data);

// change aspect and angle
chart.zAspect(90);
chart.zAngle(70);

Let's use these settings and create 3d chart with 40px depth and adjusted angle of view:

JsFiddle Playground

Note: the plot's depth can be set in pixels using a numeric parameter for zAspect() method or in percentage depending on the size of the least points side.