JavaScript 3D Surface Path Projection 2D

3d surface palette xy interactions area points

Simple example of custom user interaction in a 3D surface chart.

The application tracks user interactions to the 3D surface data.
After user has clicked on two locations along the surface, the application highlights the path between those 3D points along the surface.

The same data is also displayed in a 2D chart below.

Additionally, the example showcases the alternate Orthographic 3D projection mode.
The projection type is set with setProjection method when creating the 3D chart. The default type is perspective.

The Surface Grid Series contour lines can be enabled with setContours method.
Each contour level can have individual stroke style.
It is also possible to choose between two different sources for contour data, intensity and y.

 // Example syntax
 heatmapSeries.setContours({
     valueSource: 'y'
     levels: [
         { value: 10 },
         {
             value: 40,
             strokeStyle: new SolidLine({ thickness: 1, fillStyle: new SolidFill({ color: ColorRGBA(0, 0, 0) }) })
         }
     ]
 })