AnyChart supports 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.
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:
That 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 in percent (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 multi-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 3D stacked charts: