Scatter Chart


Scatter charts show the relationships among the numeric values in several data series, or between two groups of numbers as one series of XY coordinates.

A scatter chart has two value axes, showing one set of numerical data along the horizontal axis (X-axis) and another one along the vertical axis (Y axis). It combines these values into single data points and displays them in uneven intervals, or clusters. Scatter charts are commonly used for displaying and comparing numeric values, such as scientific, statistical and engineering data.

Use a scatter chart when:

  • You want to change the scale of the horizontal axis.
    • You want to make that axis logarithmic.
    • Values for horizontal axis are not evenly spaced.
    • There are a lot of data points on the horizontal axis.
    • You want an effective representation of data that includes pairs or groups of value sets and adjust the independent scales of a scatter chart to reveal more information about the grouped values.
    • You want to show similarities between large sets of data instead of differences between data points.
    • You want to compare large numbers of data points without regard to time — the more data you have in a scatter chart, the better comparisons you can make.


Depending on your task you can plot the following types on a Scatter plot: Line, Marker and Bubble charts. To start the creation of Scatter chart you need create chart using .scatterChart() method.

  var chart = anychart.scatter();

Line Chart

As Scatter charts are plotted using two values you always need to specify both x and y.

Let's take the following table as the source of data for the scatter chart as the first line:

x y
-2 4
-1 1
0 0
1 1
2 4

And here is the data for the second line:

x y
-2 -4
-1 -1
0 0
1 -1
2 -4

Converted data from the tables is represented below:

  // set chart type
  var chart = anychart.scatter();

  // data for the first line series
  chart.line ([
    [-2, 4],
    [-1, 1],
    [0, 0],
    [1, 1],
    [2, 4]

  // data for the second line series
    [-2, -4],
    [-1, -1],
    [0, 0],
    [1, -1],
    [2, -4],

As you can see we've created two Line series on the scatter plot:


Bubble Chart

Scatter Bubble Charts are widely used in many analytical studies as it is one of the popular tools for identifying and illustrating industry clusters. Essentially, these charts allow four different variables to be plotted within the same graph, making it easy to assess relative economic performance. Bubble charts can be used to plot up to 4 different variables on a single plot:

    {name: 'Point 1', x: 10, y: 20, size: 10},
    {name: 'Point 2', x: 20, y: 30, size: 20}

    {name: 'Point 3', x: '20', y: '30', size: '18' }

Above there is a demonstration of two data series of Bubble type, colored with Red and Green colors and set x, y and size.

In the sample below we use these knowledge to make a real sample of cluster analysis charting.

We illustrate industry cluster relationships for the 17 "Springfield" targeted industry clusters. The following four variables are plotted in this single graphic:

  • 1. Average cluster wages: on the x-axis (horizontal)
    • 2. Growth in jobs; on the y-axis (vertical)
    • 3. Employment size of the industry; indicated by the size of the bubble
    • 4. The industry’s location quotient; indicated by the color of the bubble


Marker Chart

Scatter Point or Marker JavaScript chart is used to make a scatter plot (scatter diagram or scatter graph). It is a chart used to display values of two variables. The data is displayed as a collection of points, each having one coordinate on the horizontal axis and one on the vertical axis.

A scatter plot does not specify dependent or independent variables. Either type of variable can be plotted on either axis. Scatter plots represent the association (not causation) between two variables.

To plot a scatter diagram using AnyChart you should use Marker series type along with anychart.scatterChart():

  var chart = anychart.scatter();

    {2, 10},
    {2, 20},
    {3, 0},
    {13, 0}

In the sample below we plot waiting time between eruptions and the duration of the eruptions for the Old Faithful geyser in Yellowstone National Park, Wyoming, USA. This chart suggests there are generally two "types" of eruptions: short-wait-short-duration, and long-wait-long-duration.

We will also draw a "best-fit" straight line through the data, calculated using linear regression method.



In AnyChart axis is an object that allows you to configure chart grid, axis line along with tick marks and labels, axis scale and settings and else. All axis features are described in Axes Basics tutorial. In this section we will quickly demonstrate how we can adjust axis orientation, invert axis scale and control minimum and maximum values.


With AnyChart you can place axes to any side of the chart, all you need to do is to adjust .orientation() parameter of .yAxis() or .xAxis() methods.

Orientation depends on plot type and inversion of axes, you will find list of all possible orientation and inversion settings in Axes Orientation tutorial.




AnyChart allows to invert any axis: Y, X or any extra. Inversion is controlled by axis scale().inverted():


And here is the demonstration of Y and X-Axis inversion in the Marker sample:


Minimum and Maximum

By default AnyChart charting library calculates axis the minimum and the maximum automatically. You can see this on the scale inversion chart sample above: the minimal value of the Y-Axis is -5, and maximum is 5. You can control these values by setting .maximum() and .minimum() parameters of the scale:


And here is the demonstration of maximum and minimum values in the Line sample:



AnyChart allows to make Y, X or any extra axis Logarithmic. This is controlled by scale:

  var logScaleY = anychart.scales.log();  // create logarithmic scale
  logScaleY.minimum(0.1).maximum(10000);  // set parameters for the scale
  chart.yScale(logScaleY);                // use logarithmic scale as Y scale of the chart

  var logScaleX = anychart.scales.log();  // create logarithmic scale
  logScaleX.minimum(0.1).maximum(10000);  // set parameters for the scale
  chart.xScale(logScaleX);                // use logarithmic scale as X scale of the chart

And here is the demonstration of Logarithmic Y Scale on Line chart sample - using of both X an Y logarithmic axes allowed us to plot data within hundreds and within thousands on the same plot:


Labels and Tooltips

If you want to configure data labels and tooltips for all series - you should use.labels() and .tooltip() methods. You can tune the visual appearance, positioning and format of labels and tooltips.

  // set labels
    return view.get(
      this.index,           // index of a current point is used to get row with point’s data
      'name'                // field to display


You are looking at an outdated 7.9.0 version of this document. Switch to the 8.4.0 version to see the up to date information.