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

© 2024 AnyChart.Com All rights reserved.

3D Charts

Overview

AnyChart supports the 3D versions of the following chart types: Area, Bar, Column, Line, and Pie. Some modifications of these types can be also drawn in 3D - see the Supported Types section.

This article explains how to create and configure 3D charts.

Modules

Most 3D charts require adding the Core and Basic 3D modules:

<script src="https://cdn.anychart.com/releases/8.13.0/js/anychart-core.min.js"></script>

<script src="https://cdn.anychart.com/releases/8.13.0/js/anychart-cartesian-3d.min.js"></script>

The 3D Pie and Doughnut charts require combining the Core module with Pie and Doughnut:

<script src="https://cdn.anychart.com/releases/8.13.0/js/anychart-core.min.js"></script>

<script src="https://cdn.anychart.com/releases/8.13.0/js/anychart-pie.min.js"></script>

These two modules are included in the Base module, so it can also be used to create the 3D Pie and Doughnut charts:

<script src="https://cdn.anychart.com/releases/8.13.0/js/anychart-base.min.js"></script>

Learn more: Modules.

Quick Start

To create a 3D chart, use one of the following chart constructors:

You can either pass your data to the chart constructor or create a series by using one of these methods:

This is how it looks like:

// create data
var data = [
  ["January", 10000],
  ["February", 12000],
  ["March", 18000],
  ["April", 11000],
  ["May", 9000]
];

// create a 3d column chart
chart = anychart.column3d();

// create a column series and set the data
var series = chart.column(data);

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

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

Playground

Special Settings

Z-Angle

3D charts can be shown from different angles of view: to set the angle, use the zAngle() method with any 3D chart except the 3D Pie.

Note: The value you use as a parameter should fall in the range from 0 to 90. By default, the angle is 45°.

In the following sample, there is a 3D Column chart with the Z-angle set to 20°.

// configure the z-angle of the chart
chart.zAngle(20);

Playground

Z-Aspect

3D charts can vary in depth: to set it, use the zAspect() method with any 3D chart except the 3D Pie.

Note: You can set the depth either in pixels (numeric value) or as a percentage (string value).

In the sample below, there is a 3D Column chart with the Z-aspect set to 100% (the Z-angle is also configured):

// configure the z-aspect of the chart
chart.zAspect("100%"");

Playground

Z-Distribution

The series of multiple-series 3D charts can be distributed either along the Z-axis or along the X-axis.

To enable or disable the Z-axis distribution, call the zDistribution() method and use true or false as paramater (when the Z-axis distribution is disabled, series are distributed along the X-axis).

The default distribution depends on the chart constructor you use. For anychart.bar3d() and anychart.column3d(), it is X-distribution. For anychart.area3d() and anychart.line3d(), it is Z-distribution.

Here is a sample 3D Column chart with the Z-axis distribution enabled:

// create a 3d column chart
chart = anychart.column3d();

// enable the z-axis distribution
chart.zDistribution(true);

// create series (column) and set the data
var series1 = chart.column(seriesData_1);
var series2 = chart.column(seriesData_2);
var series3 = chart.column(seriesData_3);

Playground

Supported Types

Here is the list of supported 3D charts:

See also stacked charts: