3D Charts

Overview

ZingChart offers a variety of 3D JavaScript chart types, along with the ability to control how the chart is displayed with 3D type, angle, depth, and zoom.

Basics

The first step to creating JavaScript 3D charts is to specify a 3D chart "type".

"type":"bar3d"

The available 3D chart types are:

"area3d"| 3D Area

"bar3d"

| 3D Bar

"hbar3d"

| 3D Horizontal Bar

"line3d"

| 3D Line

"pie3d"

| 3D Pie

3D Chart Aspects

To use the 3D attributes in your chart, you must first create a "3d-aspect" object where you can specify which type of 3D aspect to use.

"3d-aspect":{ 
    }

True 3D vs Isometric

The "true3d" attribute can be set to true or false. By default, it is set to true.

By setting "true3d" to true, the chart will use a true 3D engine. This will give you access to the perspective and control of the "x", "y" and "z" properties. Setting it to false will force an isometric view, which is a 2D representation of three dimensions. This view has no perspective.

"type":"bar3d",
    "3d-aspect":{
      "true3d":false
    }
A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/UZFCKJ9E

Facets

"Facets" is a plot/series object, meaning it can be placed within the “plot” object, where it will have the same effect on every plot object in a chart, or within each object in the "series" array. When placed in a series object, it will only affect that series, allowing you to apply a different style to each.

3D objects are made up of front, left, right, top, and bottom sections. As such, these terms are used within the “facets” object to style each section.

"plot":{
    "facets":{
        "front":{
                "background-color":"#3EA4F9 #0055BF"
            },
        "right":{
                "background-color":"#3EA4F9 #0055BF"
            },
        "left":{
                "background-color":"#3EA4F9 #0055BF"
            },
        "top":{
                "background-color":"white"
            },
        "bottom":{
                "background-color":"white"
            }
    }
},
A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/3CBFF0OC

The above demo uses facets within the "plot" object. Below, you'll see a demo in which facets are used within each object of the "series" array to style each plot differently.

A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/9O64IDWX

The following demo uses facets to style the goal rings around each cylinder -- they're actually cylinders themselves! Right-click on the chart and select "View Source" to view our JSON. The possibilities are endless when you use a bit of creativity!

A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/TNKH6M0W

Angle

When you are using the isometric view, you have the option of setting the angle perspective by using the "angle" attribute. By default, the angle is set to 45 degrees. You can set it to be any value between 0 and 90.

"type":"bar3d",
    "3d-aspect":{
      "true3d":false,
      "angle":75
    }
A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/9DX7LEVA

When you are using the true 3D view, it will use a true 3D engine, allowing you to use the "x", "y" and "z" properties.

"type":"bar3d",
    "3d-aspect":{
      "x-angle":20,
      "y-angle":25,
      "z-angle":0
    }
A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/FX81FQI6

Depth

The "depth" attribute is used to specify the depth on the z-axis and can be used in either isometric or true 3D.

"type":"bar3d",
    "3d-aspect":{
      "depth":"75px"
    }
A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/VITA8YIB

Zoom

When you are using the true 3D view, you have the option of setting the zoom perspective by using the "zoom" attribute. By default, the zoom perspective is set to 1.0. If you are using a value less than 1.0, the leading 0 is required before the decimal.

"type":"bar3d",
    "3d-aspect":{
      "zoom":0.7
    }
A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/11DL9KZK

Summary

This was just a small taste of what you can accomplish using the 3D attributes. Try using them on different chart types to see what you can come up with.

Don't forget, a comprehensive list of available attributes and objects can be found on our JSON Syntax page.