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.
See the Supported Types section to find the list of supported series types.
This article explains how to create and configure scatter charts.
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();
Grids
As a rule, scatter charts look better with grids. Use the grid() and minorGrid() methods to create a major and a minor grid. The appearance of grids is configured with the stroke(), evenFill(), and oddFill() methods.
For more information, see Axis Basics: Grids.
The sample below shows how to create minor and major grids and configure their strokes:
// create major grids and bind them to the X and Y axes
chart.grid(0).axis(chart.xAxis());
chart.grid(1).axis(chart.yAxis());
// configure the visual settings of major grids
chart.grid(0).stroke({color: "#85adad", thickness: 0.7});
chart.grid(1).stroke({color: "#85adad", thickness: 0.7});
// create minor grids and bind them to the X and Y axes
chart.minorGrid(0).axis(chart.xAxis());
chart.minorGrid(1).axis(chart.yAxis());
// configure the visual settings of minor grids
chart.minorGrid(0).stroke({color: "#85adad", thickness: 0.3, dash: 5});
chart.minorGrid(1).stroke({color: "#85adad", thickness: 0.3, dash: 5});
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);
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:
- valueError() sets lower and upper Y-bars as equal
- valueLowerError() sets lower Y-bars
- valueUpperError() sets upper Y-bars
And these methods configure error bars along the X-axis:
- xError() sets left and right X-bars as equal
- xLowerError() sets left X-bars
- xUpperError() sets right X-bars
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);
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);
Supported Types
Here is the list of supported scatter charts:
See also error charts: