Surface Chart

Overview

Surface charts (or 3D Surface plot) are useful when you want to find the optimum combinations between two sets of data. As in a topographic map, the colors and patterns indicate the areas that are in the same range of values.

ModulesCore + Surface
API
Classanychart.charts.Surface
DATA
Data Fieldsx, y, z
Multiple SeriesNo
RELATED TYPES
3D Area Chart
3D Bar Chart
3D Column Chart
3D Doughnut Chart
3D Line Chart
3D Pie Chart
SEE ALSO
Chartopedia: Surface Chart

Modules

The Surface chart requires adding the Core and Surface Chart modules:

<script src="https://cdn.anychart.com/releases/8.6.0/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.6.0/js/anychart-surface.min.js"></script>

Learn more: Modules.

Quick Start

To create a Surface chart, use the anychart.surface() chart constructor. If you pass the data to this chart constructor, it creates a surface chart.

The following sample demonstrates how a basic Surface chart is created:

// create data
var data = [
    [-1, -1, 1],
    [-1, 0, 1],
    [-1, 1, 1],
    [0, -1, 1],
    [0, 0, 1],
    [0, 1, 1],
    [1, -1, 1],
    [1, 0, 1],
    [1, 1, 1]
];

// create surface chart and set data
var chart = anychart.surface(data);

// set chart title
chart.title("Surface Chart: Basic Sample");

// set chart container id
chart.container('container');

// initiate drawing the chart
chart.draw();

Playground

Data

There are two ways to set data to a surface chart: pass an array to the surface chart constructor (shown in surface chart quick start sample above) or use the data() method.

AnyChart Surface Charts have no series objects and in the current version can display only one surface.

You can use ready to use array or populate it with the data using functions and code. The sample below shows how to populate an array using mathematical functions with different precision.

Playground

Note: at the moment AnyChart Surface Chart module can handle data sets of 5.000 points or less on the average PC. The chart will break down and show nothing if more points are used.

Appearance

The plotted surface is colored according to the color scale, you can either set a sequence of colors which will be evenly distributed or specify value ranges and colors. You can configure the color of the mesh, as well as axes, grids, labels and other visual elements.

Color Scale

To color the surface you can use AnyChart color scales.

The linear color color scale is created with the anychart.scales.linearColor() method. This scale uses the set of color which will be evenly distributed along the z value change:

var colorScale = anychart.scales.linearColor();
colorScale.colors(['#2bc0e4', '#eAecc6', '#dd2c00']);

// Set color scale.
chart.colorScale(colorScale);

Playground

With the ordinal color color scale you can specify the coloring range and color to be used to color parts of the surface that fall in the provided range. This scale is created using the anychart.scales.ordinalColor() method:

// create color scale
var colorScale = anychart.scales.ordinalColor();

// set ranges
colorScale.ranges([
    {less: -10, color: "#dd2c00"},
    {from: -10, to: 5, color: "#ffd54f"},
    {greater: 5,color: "#00bfa5" }
]);

// set color scale
chart.colorScale(colorScale);

Playground

Mesh

To configure the surface mesh use the stroke() method of the chart:

chart.stroke({color: '#ff4040', thickness: 3, dash: '5 5'});

Playground

Axes

Surface plot has three axes, each of them can be confugured separately using xAxis, yAxis, and zAxis methods:

// configure axes
chart.zAxis().stroke(null); 
chart.zAxis().ticks().stroke("1 lightgray");    
chart.xAxis().labels(false);
chart.yAxis().labels(false);

Grids

Surface plot has three grids, each of them can be configured separately using xGrid, yGrid, and zGrid methods.

// configure grids
gridStroke = {color: 'lightgray', thickness: 1, dash: '5 5'};
chart.xGrid().stroke(gridStroke);
chart.yGrid().stroke(gridStroke);
chart.zGrid().stroke(gridStroke);

Box

The box is the set of twelve lines that surrounds the surface plot. You can disable it by passing null to the box method, or set the stroke color and properties.

chart.box({color: 'lightgray', thickness: 1});

The sample below features grids, axes, and box configurations:

Playground

Rotation

Surface charts can be rotated simply by dragging them with the mouse or you can set angles of rotation using rotationZ and rotationY methods.

The sample below shows how to work with these methods.

Playground

Special Settings

Color Range

When color scale is used you can add color range element to make chart more readable. It is created with the colorRange() method:

// enable and configure color range
var colorRange = chart.colorRange();
colorRange.enabled(true);
colorRange.orientation('right');

Playground