Smart 3d Chart - configuration and usage

3D Chart Controls

Smart 3d Chart allows the end users to manipulate the 3D Scene by zooming, rotating or panning the Camera. In addition, the Chart includes various properties to customize the behavior of various Controls.
The following options can be set by using the controlsSettings property are:

• enableRotate - sets whether camera rotation is enabled. Default value is true
• enableZoom - sets whether camera zooming is enabled. Default value is true
• enablePan - sets whether camera panning is enabled. Default value is true
• enableDamping - set whether camera damping(inertia) is enabled. Default value is true
• dampingFactor - sets the damping factor(if enableDamping=true). Lower values can be used to give a sense of weight to the controls. Default value is 0.15

Setting all of the above properties to false will create a locked camera that cannot be controlled by the user.

The following settings create a camera with strong inertia, which can only be rotated:

controlsSettings:
{
    enableRotate: true,
    enablePan: false,
    enableZoom: false,
    dampingFactor: 0.01
}

Auto-Rotate

The Auto-Rotate feature automatically rotates the Chart on the XZ-axis. It can be enabled using the autoRotate and autoRotateSpeed properties.

autoRotate: true,
autoRotateSpeed: 1

Chart Controls Toolbar

When the 3D Chart is hovered, the Controls Toolbar will be displayed.

By default the Toolbar features the following items, designed to provide easy access to various features:

• Reset Camera - resets the camera's position and zoom to its initial values
• Zoom In - zooms in the camera. Can be held for gradual zoom
• Zoom Out - zooms out the camera. Can be held for gradual zoom
• Save Image - exports the current state of the chart to a .png image
• Camera Control - A drop-down menu with various Camera Control Modes:

  Mode	Left Click	Right Click	Mouse Wheel
  Camera Mode	Rotate	Pan	Zoom
  Pan Mode	Pan	Rotate	Zoom
  Zoom Mode	Zoom	Rotate	Zoom

The Toolbar Items are set as an array of items in the controlsToolbarItems property.
Custom Items can also be added by using an object in the following format: {name, content, init, action}

The following example enables all default Toolbar Items and adds a new custom button, which will toggle the Chart's type between 'column' and 'line'

controlsToolbarItems: ['reset-camera', 'zoom-in', 'zoom-out', 'save-image', 'camera-control',
  {name: 'change-type', content: '<smart-button>Change Type</smart-button>',
    action: function(){
        let type = chartElem.seriesGroups[0].type
        chartElem.seriesGroups[0].type = type === 'column' ? 'line' : 'column';
        chartElem.refresh();
    }
  }
],