AnyChart Documentation
Still have questions?
Contact support
Still have questions?
Contact support

© 2024 AnyChart.Com All rights reserved.

Scatter Plot

Overview

AnyChart allows you to create scatter charts by using a special scatter chart constructor. It processes data points as-is: sets of arguments from different series don't influence each other, points are shown in the exact order they are set, and lines can be vertical and cross themselves. While the Cartesian constructor distributes points along the X-axis at equal intervals (categories), the scatter constructor distributes points according to their values.

Scatter charts are used mainly to visualize the results of mathematical calculations or physics experiments.

To learn more about the difference between the scatter and Cartesian constructors, read the Scatter vs. Cartesian article. See also the Supported Types section to find the list of supported series types.

This article explains how to create and configure scatter charts.

Modules

Scatter charts require adding the Core and Scatter 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-scatter.min.js"></script>

Alternatively, you can use the Base module, which includes, among other things, the two modules mentioned above:

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

Learn more: Modules.

Quick Start

To create a scatter chart, use the anychart.scatter() chart constructor. Then create one of the supported series types from this enum: anychart.enums.ScatterSeriesType.

In the sample below, there are two series, Marker and Line, created by the marker() and line() methods:

// create data for the first series
var data_1 = [
  {x: 0.6, value: 22},
  {x: 1.7, value: 55},
  {x: 2.3, value: 50},
  {x: 3.5, value: 80},
  {x: 3.9, value: 74},
  {x: 4, value: 68},
  {x: 4, value: 76},
  {x: 4.1, value: 84},
  {x: 4.7, value: 93}
];

// create data for the second series
var data_2 = [
  {x: 0.5, value: 17.5},
  {x: 4.75, value: 100}
];

// create a chart
chart = anychart.scatter();

// create the first series (marker) and set the data
var series1 = chart.marker(data_1);

// create the second series (line) and set the data
var series2 = chart.line(data_2);

// set the container id
chart.container("container");

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

Playground

Grids

As a rule, scatter charts look better with grids. Use the xGgrid(), yGgrid(), xMinorGrid() and yMinorGrid() methods to create a major and a minor grids.

The appearance of grids is configured with the stroke() and palette() methods.

For more information, see Axis Basics: Grids.

The sample below shows how to create minor and major grids and configure their strokes:

// enable major grids
chart.xGrid(true);
chart.yGrid(true);

// configure the visual settings of major grids
chart.xGrid().stroke({color: "#85adad", thickness: 0.7});
chart.yGrid().stroke({color: "#85adad", thickness: 0.7});

// enable minor grids
chart.xMinorGrid(true);
chart.yMinorGrid(true);

// configure the visual settings of minor grids
chart.xMinorGrid().stroke({color: "#85adad", thickness: 0.3, dash: 5});
chart.yMinorGrid().stroke({color: "#85adad", thickness: 0.3, dash: 5});

Playground

Date/Time Scale

Scatter charts are typically used with date/time scales - to create such a scale, use the dateTime() method. You can learn more from this article: Date/Time Axes.

In the following sample a data/time scale is set as the X-scale of a scatter chart (with the xScale() method):

// create a date/time scale
var dateScale = anychart.scales.dateTime();

// configure major and minor ticks on the date/time scale
dateScale.ticks().interval(1);
dateScale.minorTicks().interval(0, 2);

// set the date/time as the x-scale
chart.xScale(dateScale);

Playground

Error Bars

In AnyChart, you can create charts with error bars (see Error Chart). This feature is often used with scatter charts, especially when they show results of some calculations or measurements.

Error bars are created with the error() method.

Note: The key feature of error bars on scatter charts is that errors can be set both along the X- and Y-axes. Also, lower/upper and right/left errors can be different.

Here are the methods configuring error bars along the Y-axis:

And these methods configure error bars along the X-axis:

Note: The valueLowerError(), valueUpperError(), xLowerError(), and xUpperError() methods have priority over valueError() and xError().

In the sample below, there is a Scatter Marker chart with X- and Y-error bars:

// create and configure error bars
var error = series.error();
error.valueLowerError(7);
error.valueUpperError(4);
error.xLowerError(0.1);
error.xUpperError(0.2);

Playground

Drawing Tools and Annotations

Drawing tools provide you with the ability to draw/display custom objects on a chart - in our documentation these objects are usually called annotations. Typically, annotations are used in stock charts. However, sometimes you may need to use hardcoded annotations with a scatter chart to visualize some basic shapes.

To add an annotation to a chart, refer to the annotations() object and call one of the methods used for creating annotations: ellipse(), rectangle(), triangle(), and so on. To learn more, read about annotations in AnyStock.

Here is a sample scatter chart with two annotations, Ellipse and Rectangle. Some of their visual settings are configured:

// access the annotations() object of the chart to work with annotations
var controller = chart.annotations();

// create an ellipse annotation
var ellipse = controller.ellipse({
  xAnchor: "1.5",
  valueAnchor: 45,
  secondXAnchor: "2.6",
  secondValueAnchor: 62,
  fill: {opacity: 0},
  stroke: "2 red"
});

// create a rectangle annotation
var rectangle = controller.rectangle({
  xAnchor: "3.3",
  valueAnchor: 64,
  secondXAnchor: "4.4",
  secondValueAnchor: 88,
  fill: {opacity: 0},
  stroke: "2 red"
});

// disable interactivity for the ellipse annotation
ellipse.allowEdit(false);

// disable interactivity for the rectangle annotation
rectangle.allowEdit(false);

Playground

Supported Types

Here is the list of supported scatter charts:

See also error charts: