Surface Chart

Overview

A Surface chart (or 3D Surface plot) is a chart type used for finding 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.

This article explains how to create a basic Surface chart as well as configure settings that are specific to the type. You can also see the table below to get a brief overview of the Word Tree's characteristics:

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.12.0/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.12.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 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 anychart.surface() chart constructor, like in the Quick Start sample, or to the data() method.

It is possible populate the array with generated data. See the sample below, where mathematical functions with different precision are used to create data.

Also, please keep in mind that AnyChart Surface charts do not support multiple series: in the current version, only one surface can be displayed.

Playground

Note: At the moment AnyChart Surface Chart module can handle data sets of 5.000 points or less on the average PC. Adding data sets with more points leads to chart breaking down and showing nothing.

Appearance

The plotted surface is colored according to the color scale: set a sequence of colors to 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 scale is created with the anychart.scales.linearColor() method. It accepts an array of colors, which are 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 within the given range. This scale is created with the help of 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, call the stroke() method of the chart:

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

Playground

Axes

Surface plot has three axes, and each of them can be configured separately by 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 by 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

A box is a 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. Alternatively, you can set angles of rotation: call the rotationZ and rotationY methods.

The sample below shows how to work with them:

Playground

Special Settings

Color Range

When the color scale is used, you can add a color range 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