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.
These two modules are included in the Base module, so it can also be used to create the 3D Pie and Doughnut charts:
Learn more: Modules.
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();
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);
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%"");
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
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);
Here is the list of supported 3D charts:
See also stacked charts: