{"id":370,"date":"2022-04-07T11:57:05","date_gmt":"2022-04-07T10:57:05","guid":{"rendered":"http:\/\/modules.bijc.co.uk\/?page_id=370"},"modified":"2026-02-03T16:48:41","modified_gmt":"2026-02-03T16:48:41","slug":"plotly-module","status":"publish","type":"page","link":"https:\/\/modules.bijc.co.uk\/?page_id=370","title":{"rendered":"Plotly Module"},"content":{"rendered":"\n

An implementation of the plotly.js<\/a> library as a perspective component.<\/p>\n\n\n\n

8.1 Module Download Link (Plotly v2.32.0)<\/a><\/h3>\n\n\n\n

The 8.1 module is no longer being developed. This download is for legacy systems that require it.<\/p>\n\n\n\n

8.3 Module Download Link (Plotly v3.0.8)<\/a><\/h3>\n\n\n\n

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.<\/p>\n\n\n\n

Plotly.js Documentation<\/a><\/h3>\n\n\n\n

Plotly.js Figure Reference Documentation<\/a><\/h3>\n\n\n\n

Property Model<\/h3>\n\n\n\n

The component has four properties:<\/p>\n\n\n\n

Property<\/th>Description<\/th><\/tr><\/thead>
data<\/td>Array of JSON objects describing the traces ti display on the chart<\/td><\/tr>
layout<\/td>Attributes for the chart<\/td><\/tr>
config<\/td>Configutation for the chart<\/td><\/tr>
events<\/td>Provides the ability to turn off default behaviour for some events<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Data<\/h4>\n\n\n\n

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

The following is an example of the data property used to createa bar chart with two groups of data:<\/p>\n\n\n\n

[\n  {\n    \"x\": [\"giraffes\", \"orangutans\", \"monkeys\"],\n    \"y\": [20, 14, 23],\n    \"name\": \"SF Zoo\",\n    \"type\": \"bar\"\n  },\n  {\n    \"x\": [\"giraffes\", \"orangutans\", \"monkeys\"],\n    \"y\": [12, 18, 29],\n    \"name\": \"LA Zoo\",\n    \"type\": \"bar\"\n  }\n]<\/code><\/pre>\n\n\n\n
Layout<\/h4>\n\n\n\n
The layout property defines the attributes of the chart including things like the title, axes and annotations.<\/p>\n\n\n\n
The following is an example of the layout property being used for a waterfall chart:<\/p>\n\n\n\n
{\n  \"title\": {\n    \"text\": \"Profit and loss statement 2018\"\n  },\n  \"xaxis\": {\n    \"type\": \"category\"\n  },\n  \"yaxis\": {\n    \"type\": \"linear\"\n  },\n  \"showlegend\": true\n}<\/code><\/pre>\n\n\n\n
Config<\/h4>\n\n\n\n
The config object is used for the configuration of certain properties on the chart.<\/p>\n\n\n\n
The following show some of the properties that can be set using the config property:<\/p>\n\n\n\n
{\n  \"displayModeBar\": true,\n  \"modeBarButtonsToRemove\": [\"toImage\", \"select2d\"],\n  \"locale\": \"fr\",\n  \"displaylogo\": false\n}<\/code><\/pre>\n\n\n\n
Event Handlers<\/h3>\n\n\n\n
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.<\/p>\n\n\n\n
  • onClick<\/li>
  • onDoubleClick<\/li>
  • onHover<\/li>
  • onUnHover<\/li>
  • onLegendClick<\/li>
  • onLegendDoubleClick<\/li>
  • onSelecting<\/li>
  • onSelected<\/li><\/ul>\n\n\n\n
    The default behaviour for the onLegendClick<\/code> and onLegendDoubleClick<\/code> events can be turned off using the properties inside the event<\/code> property of the component.<\/p>\n\n\n\n
    \n