`notebook — plot()`

Description

The plot() method of the notebook object displays a customizable chart in the output area of the active notebook cell.

Signature

notebook.plot(config)

Scope: notebook
Family: display
Returns: none

Argument

config (object): Chart configuration.
The configuration object defines the chart type, datasets and display options.
You can read the notebook.plot() Configuration Reference.

Example

// create a data table for a chart
var table = [
  ['Year', 'Serie 1', 'Serie 2'],
  ['2010', 10, 20],
  ['2020', 16, 24],
  ['2030', 28, 32],
  ['2040', 33, 41]
];

// create a dataFrame to retrieve data
var df = new DataFrame(table);

var config = {
  type: 'line',
  labels: df.column('Year').get(),
  datasets: [
    {
      label: 'Serie 1',
      data: df.column('Serie 1').get()
    },
    {
      label: 'Serie 2',
      data: df.column('Serie 2').get()
    }
  ]
};

// display the chart
notebook.plot(config);

Plot Configuration

Configuration Object

var config = {
  type:       ... ,
  title:      ... ,
  legend:     ... ,
  indexAxis:  ... ,
  labels:    [...],
  datasets:  [...],
  marks:     [...],
  scales:    {...}
};

Configuration Properties

config.type (string): Chart type.
Supported values: bar, bubble, doughnut, line, pie, radar, scatter (default).
config.title (string): Title of the chart.
config.legend (boolean): Legend display.
Default value: true.
config.indexAxis (string): Base axis.
Default value: x
config.labels ( string[] ): Labels displayed on the base axis.
config.datasets ( object[] ): Collection of datasets.
See Datasets Configuration.
config.marks ( object[] ): Collection of marks displayed on top of the chart.
See Marks Configuration.
config.scales (object): Axis configuration.
See Scales Configuration.

Datasets Configuration

Dataset Object

config.datasets = [
  {
    label:  ... ,
    data:  [...],
    backgroundColor: ...,
    borderColor:     ...,
    borderRadius:    ...,
    borderWidth:     ...,
    dashed:          ...,
    pointStyle:      ...,
    tension:         ...
  }
];

Dataset Properties

datasets[].label (string)

Label displayed in the legend.

datasets[].data ( number[] | object[] )

Series values to display.

Supported values:

Chart Type	Data Format
Bar	Number
Bubble	`{ x, y, r }` `r` as radius in pixels
Doughnut	Number
Line	Number
Pie	Number
Radar	Number
Scatter	`{ x, y }`

datasets[].backgroundColor ( string | string[] )

Element background color. An array of colors can be used to alternate colors.
Examples: red, #FF0000, rgb(255, 0, 0).

datasets[].borderColor (string)

Element border color. An array of colors can be used to alternate colors.
Examples: red, #FF0000, rgb(255, 0, 0).

datasets[].borderRadius (string)

Rectangle corner radius.
Applies to: bar.
Default value: 1.

datasets[].borderWidth (string)

Element border width.
Default value: 1 for line, otherwise 0.

datasets[].dashed (boolean)

Whether the border is dashed.
Applies to: line.
Default value: false.

datasets[].pointStyle (string)

Display of the point elements.
Applies to: scatter and bubble.
Supported value: circle, rect, rectRot, triangle, false.
Default value: circle.

datasets[].tension (string)

Bezier curve tension of the line.
Applies to: line.
Default value: 0.1.

Marks Configuration

Marks Object

config.marks = [
  {
    type:   ...,
    axis:   ...,
    borderRadius: ...,
    color:  ...,
    dashed: ...,
    height: ...,
    lineWidth: ...,
    radius: ...,
    size:   ...,
    value:  ...,
    width:  ...,
    xValue: ...,
    yValue: ...
  }
];

Mark Properties

type (string): Marker type.
Supported values: circle, cross, line, rect, square.
Default value: cross.
axis (string): Axis on which a line marker is drawn.
Applies to: line.
Supported values: x, y.
borderRadius (number): Rectangle or square corner radius.
Applies to: rect, square.
Default value: 0.
color (string): Marker color.
Examples: red, #FF0000, rgb(255, 0, 0).
dashed (boolean): Whether the marker outline is dashed.
Default value: false.
height (number): Rectangle height.
Applies to: rect.
Default value: 5.
lineWidth (number): Marker line width.
Default value: 1
radius (number): Circle radius.
Applies to: circle.
Default value: 5.
size (number): Marker size.
Applies to: cross, square.
Default value: 10.
value (number | string): Position of a line marker.
Applies to: line.
width (number): Rectangle width.
Applies to: rect.
Default value: 10.
xValue (number | string): Horizontal position of the marker.
Applies to: circle, cross, rect, square.
yValue (number): Vertical position of the marker.
Applies to: circle, cross, rect, square.

Scales Configuration

Scales Object

config.scales = {
  x: {...},
  y: {...}
};

Scales Properties

scales.x (object): X-axis configuration.
scales.y (object): Y-axis configuration.

Scale Object

scales.[x|y] = {
  title:   ...,
  min:     ...,
  max:     ...,
  stacked: ...,
};

Scale Properties

title (string): Axis title.
min (number): Minimum axis value.
max (number): Maximum axis value.
stacked (boolean): Enables stacked datasets.
Default value: false.