Scatter chart

A scatter chart shows points arranged on a grid.

Options

The scatter chart has up to six axes:

x – position from left to right on the chart
y – position from top to bottom on the chart
label – name for the point
size – size of the point
color – color of the point
tooltip – tooltip to show when hovering over the point.

The x and y axes are mandatory, the others are optional. Each axis has a single column, except for tooltip which may list multiple columns.

Object	Property	Description
x axis, y axis	column	The column from which x axis or y axis values are to be read. x axis column defaults to 0, y axis column defaults to 1.
	showLabel	Set to true to false to turn off the axis label.
	label	label for the axis. If not present, the name from the column is used.
	min	Standard usage
	max	Standard usage
	showTicks	Standard usage
	ticks	Standard usage
	showGridlines	Standard usage
label	column	Column from which point labels are to be read. Optional. If not present, no labels are produced.
size	column	Column from which point sizes are to be read. Optional. If not present, a size of 1 is used, which gives a standard size point. The value in the size column is proportional to the area of the point. For example, a value four times higher will give a dot with double the diameter.
	scale	An amount by which values in the size column should be multiplied before calculating the size of the point. For example, if you wanted the value 10 to give a standard size point, set this to 0.1.
color	column	Column from which point colors are to be read. Optional. If not present, a default color or standard colors are used. The colors can be translated using the standard options.colors object. This allows a data column, such as a status, to be used to color the points.
	default	Default color to be used when there is no color column, or for rows that do not have a value for the color column. This will also be translated using the standard options.colors object.
tooltip	column	One or more columns that will be used to create tooltips. Optional. If not present, no tooltips are produced. If there is a single column, the value of the column will be shown in the tooltip. If there are multiple columns, a table of values will be shown in the tooltip.

Examples

Consider a table which shows Sine and Cosine values for 10 degree intervals.

Sine	Cosine
0	1
0.174	0.985
0.342	0.940
...	...

Default options assign a color to each point and plot them against each other.

{
  "type":"scatter"
}

Sine and cosine plotted with default values

You can clean up the display by setting height, min and max, ticks, gridlines and color.

{
  "type":"scatter",
  "height":"100%",
  "axes":{
    "x":{
      "column":0,
      "min":-1,
      "max":1,
      "ticks":[-1,0,1],
      "showGridlines":true
    },
    "y":{
      "column":1,
      "min":-1,
      "max":1,
      "ticks":[-1,0,1],
      "showGridlines":true
    },
    "color":{
      "default":"black"
    }
  }
}

Sine and cosine plotted with height, grid and color set

Consider a second table of nutritional information.

Food	Calories	Fat	Sugar	Category	Notes
Cheese	125	10.5	0	dairy
Milk	64	3.6	4.7	dairy	Whole milk
Yoghurt	95	1.8	12.9	dairy	Raspberry flavoured
Dried figs	229	0.9	37.1	fruit
Beef burger	249	19.1	0.7	meat	Uncooked
Marmalade	254	0	62.9
Pasta	359	1	0	carbohydrate	Uncooked
Bread	233	1.7	3.5	carbohydrate
Dark chocolate	605	50.7	12.9	sweet
Milk chocolate	544	32.5	55.4	sweet
Biscuits	481	21.3	16.6	sweet	Digestives

The options below:

Set a title.
Set min, max, ticks and labels for the x and y axes.
Set the size of the points according to the calories, so that 10 calories per 100g would be a standard point.
Set the color of the points according to the category column. The colors object is used to translate between these categories and real colors.
Show the food column as a title.
Build a tooltip from the nutritional information.

{
  "type":"scatter",
  "showData":true,
  "title":"Nutrition",
  "showTitle":true,
  "axes":{
    "x":{
      "column":"fat",
      "min":0,
      "max":100,
      "ticks":[0,25,50,75,100],
      "label":"Percentage fat"
    },
    "y":{
      "column":"sugar",
      "min":0,
      "max":100,
      "ticks":[0,25,50,75,100],
      "label":"Percentage sugar"
    },
    "size":{
      "column":"calories",
      "scale":0.1
    },
    "color":{
      "column":"category",
      "default":"unknown"
    },
    "label":{
      "column":"food"
    },
    "tooltip":{
      "column":["food","calories","fat","sugar","notes"]
    }
  },
  "colors":{
    "meat":"#600",
    "dairy":"#FC0",
    "fruit":"#CF0",
    "carbohydrate":"#C90",
    "unknown":"#CCC",
    "sweet":"red"
  }
}

Nutrition information chart, showing control over point size, color, labels and tooltips