Plotly Module

An implementation of the plotly.js library as a perspective component

Module Download Link

A single component provides support for all plotly chart types through a flexible set of properties. Seventeen variants are included as examples of creating some of the charts.

Plotly.js Documentation

Plotly.js Figure Reference Documentation

Property Model

The component has four properties:

dataArray of JSON objects describing the traces ti display on the chart
layoutAttributes for the chart
configConfigutation for the chart
eventsProvides the ability to turn off default behaviour for some events


Each object in the data array describes a trace to be displayed on the chart. The properties available for the trace depend on what the type property is set to. Traces are categorised on the chart by trace type.

The following is an example of the data property used to createa bar chart with two groups of data:

    "x": ["giraffes", "orangutans", "monkeys"],
    "y": [20, 14, 23],
    "name": "SF Zoo",
    "type": "bar"
    "x": ["giraffes", "orangutans", "monkeys"],
    "y": [12, 18, 29],
    "name": "LA Zoo",
    "type": "bar"


The layout property defines the attributes of the chart including things like the title, axes and annotations.

The following is an example of the layout property being used for a waterfall chart:

  "title": {
    "text": "Profit and loss statement 2018"
  "xaxis": {
    "type": "category"
  "yaxis": {
    "type": "linear"
  "showlegend": true


The config object is used for the configuration of certain properties on the chart.

The following show some of the properties that can be set using the config property:

  "displayModeBar": true,
  "modeBarButtonsToRemove": ["toImage", "select2d"],
  "locale": "fr",
  "displaylogo": false

Event Handlers

A number of events are provided by the module that allow you to respond to various events such as clicking on the trace or making a selection on a trace.

  • onClick
  • onDoubleClick
  • onHover
  • onUnHover
  • onLegendClick
  • onLegendDoubleClick
  • onSelecting
  • onSelected

The default behaviour for the onLegendClick and onLegendDoubleClick events can be turned off using the properties inside the event property of the component.