notebook — plot()

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

Charts are rendered with a self hosted Chart.js library (v4).

notebook.plot(config)

Scope

notebook

Family

display

Returns

none

config (object)

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

// 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);

Configuration Object

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

Configuration Properties

config.type (string)

Chart type.
Supported values: area, bar, bubble, doughnut, line, pie, radar, scatter.

config.labels ( string[] )

Labels displayed on the category axis.

config.datasets ( object[] )

Collection of datasets.
See Datasets Configuration.

config.indexAxis (string)

Base axis.
Default value: x

config.scales (object)

Axis configuration.
See Scales Configuration.

config.marks ( object[] )

Marks displayed on top of the chart.
See Marks Configuration.

Dataset Object

config.datasets = [
  {
    label: [...],
    data:  [...]
  }
];

Dataset Properties

datasets[].label (string)

Label displayed in the legend.

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

Series values to display.
Supported values:

Chart Type	Data Format
Area	Number
Bar	Number
Doughnut	Number
Line	Number
Pie	Number
Radar	Number
Bubble	{ x, y, r }
Scatter	{ x, y }

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] = {
  display: ...,
  min:     ...,
  max:     ...,
  stacked: ...,
  ticks: {
    maxTicksLimit: ...
  }
};

Scale Properties

display (boolean)

Whether the axis is displayed. Default: true.

min (number)

Minimum axis value.

max (number)

Maximum axis value.

stacked (boolean)

Enables stacked datasets.

ticks (object)

Tick configuration.

maxTicksLimit (number)

Maximum number of tick labels displayed.

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 (default), line, rect, square.

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

color (string)

Marker color.
Examples: red, #FF0000, rgb(255, 0, 0).

dashed (boolean)

Whether the marker outline is dashed.

height (number)

Rectangle height.
Applies to: rect

lineWidth (number)

Marker line width.

radius (number)

Circle radius.
Applies to: circle

size (number)

Marker size.
Applies to: cross, square

value (number | string)

Position of a line marker.
Applies to: line.

width (number)

Rectangle width.
Applies to: rect

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.