Plotly

Plotly visualization.

Options

• data | array (required): data array. Default: none.
• draggable | boolean: controls whether the plot should be draggable. Default: false.
• editable | boolean: controls whether labels of the created plot are editable. Default: false.
• id | string: component identifier. Default: none.
• layout | object: Plotly layout object. Default: {}.
• config | object: Plotly configuration options (see: https://plotly.com/javascript/configuration-options/). Default: {}.
• legendButtons | boolean: controls whether to display buttons for changing the legend. Default: true.
• meta | object: plot meta-information. Default: none.
• revision | number: when provided, causes the plot to update when the revision value is incremented. Default: none.
• style | object: CSS inline styles. Default: {}.
• onAfterPlot | function: callback function invoked each time a chart is plotted. Default: onAfterPlot() {}.
• onClick | function: callback function invoked when any element is clicked. Default: onClick() {}.
• onInitialized | function: callback invoked once plot is initialized; called with figure (object with three keys corresponding to input props: data, layout, and frames) and the DOM node graphDiv. Default: onInitialized() {}.
• onLegendClick | function: callback function invoked when legend item is clicked. Default: onLegendClick() {}.
• onLegendDoubleClick | function: callback function invoked when legend item is double-clicked. Default: onLegendDoubleClick() {}.
• onRelayout | function: callback function invoked when relayout is triggered. Default: onRelayout() {}.
• onSelected | function: callback function invoked when elements are selected. Default: onSelected() {}.
• onShare | function: callback function invoked when clicking on the "Share" button. Default: none.
• removeButtons | boolean: controls whether to remove all buttons (aside from fullscreen button if enabled). Default: false.
• toggleFullscreen | boolean: controls whether to allow displaying the plot in fullscreen mode. Default: true.

Examples

Live Editor

<Plotly data={[{ values: [ 24, 7, 0.5 ], labels: [ 'English', 'Spanish', 'Other' ], type: 'pie' }]} layout={{ width: 300 }} />

<Plotly
    data={[{
        values: [ 24, 7, 0.5 ],
        labels: [ 'English', 'Spanish', 'Other' ],
        type: 'pie'
            }]}
    layout={{ width: 300 }}
/>

Result

ReferenceError: Provider is not defined