Edit

Components

Components make up the visual parts of a chart and typically include axis, grid-lines and data points encoded in various ways.

Using components in a chart

Each component has a type property which identifies the type of component to create.

To use components, add them in the components array:

picasso.chart({
  settings: {
    components: [{
      type: 'point',
      data: { /* ... */ },
      settings: { /* ... */ }
    }, {
      type: 'axis',
      dock: 'bottom',
      scale: 'x'
    }]
  }
});

Some properties are general and can be used on all components:

  • dock string. Dock setting. Any of top | right | bottom | left
  • show boolean. True if component should be rendered.
  • displayOrder number. The order in which components are rendered (similar to css z-index).
  • prioOrder number. The order in which components are docked from the center area,
  • minimumLayoutMode string.
  • data object. See data section.
  • settings object.
  • created function. Lifecycle hook.
  • beforeMount function. Lifecycle hook.
  • mounted function. Lifecycle hook.
  • beforeRender function. Lifecycle hook.
  • beforeUpdate function. Lifecycle hook.
  • updated function. Lifecycle hook.
  • beforeDestroy function. Lifecycle hook.
  • destroyed function. Lifecycle hook.

settings

Most components use a settings object that is specific to the component itself.

Registering a custom component

A custom component can be registered using the picasso.component registry:

picasso.component(name, definition)

  • name string. Name of the component to register.
  • definition object
    • dock string (optional).
    • displayOrder number (optional).
    • prioOrder number (optional).
    • minimumLayoutMode string (optional).
    • created function (optional). Lifecycle hook.
    • beforeMount function (optional). Lifecycle hook.
    • mounted function (optional). Lifecycle hook.
    • beforeRender function (optional). Lifecycle hook.
    • render function (optional). Lifecycle hook.
    • beforeUpdate function (optional). Lifecycle hook.
    • updated function (optional). Lifecycle hook.
    • beforeDestroy function (optional). Lifecycle hook.
    • destroyed function (optional). Lifecycle hook.

A draw line component

Let's make a component that draws a red line across its entire display area:

picasso.component('drawLine', {
  beforeRender(opts) {
    this.rect = opts.size;
  },
  render() {
    return [{
      type: 'line',
      stroke: 'red',
      strokeWidth: 4,
      x1: this.rect.x,
      y1: this.rect.y,
      x2: this.rect.width,
      y2: this.rect.height
    }];
  }
});

It can then be used like any other component:

picasso.chart({
  element,
  settings: {
    components: [{
      type: 'drawLine'
    }]
  }
});

Component lifecycle hooks

TODO

(Note that the lifecycle hooks in the component definition do not share the same context as hooks used in the component settings of a chart).

← DataScales →