Surface Chart

• Overview
• Modules
• Quick Start
• Data
• Appearance
  • Color Scale
  • Mesh
  • Axes
  • Grids
  • Box
  • Rotation
• Special Settings
  • Color Range

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:

Modules

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

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

<script src="https://cdn.anychart.com/releases/8.13.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();

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.

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);

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);

Mesh

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

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

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:

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:

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');