Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit f6dbf97

Browse files
Merge pull request #207 from keonik/fix/docs-typo
documentation typo
2 parents ed21137 + 854e2ba commit f6dbf97

File tree

1 file changed

+51
-51
lines changed

1 file changed

+51
-51
lines changed

β€ŽREADME.md

Lines changed: 51 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,16 @@
1414

1515
## Contents
1616

17-
* [Installation](#installation)
18-
* [Quick start](#quick-start)
19-
* [State management](#state-management)
20-
* [Refreshing the Plot](#refreshing-the-plot)
21-
* [API](#api)
22-
* [Basic props](#basic-props)
23-
* [Event handler props](#event-handler-props)
24-
* [Customizing the `plotly.js` bundle](#customizing-the-plotlyjs-bundle)
25-
* [Loading from a `<script>` tag](#loading-from-a-script-tag)
26-
* [Development](#development)
17+
- [Installation](#installation)
18+
- [Quick start](#quick-start)
19+
- [State management](#state-management)
20+
- [Refreshing the Plot](#refreshing-the-plot)
21+
- [API](#api)
22+
- [Basic props](#basic-props)
23+
- [Event handler props](#event-handler-props)
24+
- [Customizing the `plotly.js` bundle](#customizing-the-plotlyjs-bundle)
25+
- [Loading from a `<script>` tag](#loading-from-a-script-tag)
26+
- [Development](#development)
2727

2828
## Installation
2929

@@ -68,8 +68,8 @@ You should see a plot like this:
6868

6969
For a full description of Plotly chart types and attributes see the following resources:
7070

71-
* [Plotly JavaScript API documentation](https://plot.ly/javascript/)
72-
* [Full plotly.js attribute listing](https://plot.ly/javascript/reference/)
71+
- [Plotly JavaScript API documentation](https://plot.ly/javascript/)
72+
- [Full plotly.js attribute listing](https://plot.ly/javascript/reference/)
7373

7474
## State management
7575

@@ -79,33 +79,33 @@ Here is a simple example of how to capture and store state in a parent object:
7979

8080
```javascript
8181
class App extends React.Component {
82-
constructor(props) {
83-
super(props);
84-
this.state = {data: [], layout: {}, frames: [], config: {}};
85-
}
86-
87-
render() {
88-
return (
89-
<Plot
90-
data={this.state.data}
91-
layout={this.state.layout}
92-
frames={this.state.frames}
93-
config={this.state.config}
94-
onInitialized={(figure) => this.setState(figure)}
95-
onUpdate={(figure) => this.setState(figure)}
96-
/>
97-
);
98-
}
82+
constructor(props) {
83+
super(props);
84+
this.state = {data: [], layout: {}, frames: [], config: {}};
85+
}
86+
87+
render() {
88+
return (
89+
<Plot
90+
data={this.state.data}
91+
layout={this.state.layout}
92+
frames={this.state.frames}
93+
config={this.state.config}
94+
onInitialized={(figure) => this.setState(figure)}
95+
onUpdate={(figure) => this.setState(figure)}
96+
/>
97+
);
98+
}
9999
}
100100
```
101101

102102
## Refreshing the Plot
103103

104104
This component will refresh the plot via [`Plotly.react`](https://plot.ly/javascript/plotlyjs-function-reference/#plotlyreact) if any of the following are true:
105105

106-
* The `revision` prop is defined and has changed, OR;
107-
* One of `data`, `layout` or `config` has changed identity as checked via a shallow `===`, OR;
108-
* The number of elements in `frames` has changed
106+
- The `revision` prop is defined and has changed, OR;
107+
- One of `data`, `layout` or `config` has changed identity as checked via a shallow `===`, OR;
108+
- The number of elements in `frames` has changed
109109

110110
Furthermore, when called, [`Plotly.react`](https://plot.ly/javascript/plotlyjs-function-reference/#plotlyreact) will only refresh the data being plotted if the _identity_ of the data arrays (e.g. `x`, `y`, `marker.color` etc) has changed, or if `layout.datarevision` has changed.
111111

@@ -117,32 +117,32 @@ In short, this means that simply adding data points to a trace in `data` or chan
117117

118118
**Warning**: for the time being, this component may _mutate_ its `layout` and `data` props in response to user input, going against React rules. This behaviour will change in the near future once https://github.com/plotly/plotly.js/issues/2389 is completed.
119119

120-
| Prop | Type | Default | Description |
121-
| ------------------ | ---------------------------- | ------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
122-
| `data` | `Array` | `[]` | list of trace objects (see https://plot.ly/javascript/reference/) |
123-
| `layout` | `Object` | `undefined` | layout object (see https://plot.ly/javascript/reference/#layout) |
124-
| `frames` | `Array` | `undefined` | list of frame objects (see https://plot.ly/javascript/reference/) |
125-
| `config` | `Object` | `undefined` | config object (see https://plot.ly/javascript/configuration-options/) |
126-
| `revision` | `Number` | `undefined` | When provided, causes the plot to update when the revision is incremented. |
127-
| `onInitialized` | `Function(figure, graphDiv)` | `undefined` | Callback executed after plot is initialized. See below for parameter information. |
128-
| `onUpdate` | `Function(figure, graphDiv)` | `undefined` | Callback executed when when a plot is updated due to new data or layout, or when user interacts with a plot. See below for parameter information. |
129-
| `onPurge` | `Function(figure, graphDiv)` | `undefined` | Callback executed when component unmounts, before `Plotly.purge` strips the `graphDiv` of all private attributes. See below for parameter information. |
130-
| `onError` | `Function(err)` | `undefined` | Callback executed when a plotly.js API method rejects |
131-
| `divId` | `string` | `undefined` | id assigned to the `<div>` into which the plot is rendered. |
132-
| `className` | `string` | `undefined` | applied to the `<div>` into which the plot is rendered |
133-
| `style` | `Object` | `{position: 'relative', display: 'inline-block'}` | used to style the `<div>` into which the plot is rendered |
134-
| `debug` | `Boolean` | `false` | Assign the graph div to `window.gd` for debugging |
135-
| `useResizeHandler` | `Boolean` | `false` | When true, adds a call to `Plotly.Plot.resize()` as a `window.resize` event handler |
120+
| Prop | Type | Default | Description |
121+
| ------------------ | ---------------------------- | ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
122+
| `data` | `Array` | `[]` | list of trace objects (see https://plot.ly/javascript/reference/) |
123+
| `layout` | `Object` | `undefined` | layout object (see https://plot.ly/javascript/reference/#layout) |
124+
| `frames` | `Array` | `undefined` | list of frame objects (see https://plot.ly/javascript/reference/) |
125+
| `config` | `Object` | `undefined` | config object (see https://plot.ly/javascript/configuration-options/) |
126+
| `revision` | `Number` | `undefined` | When provided, causes the plot to update when the revision is incremented. |
127+
| `onInitialized` | `Function(figure, graphDiv)` | `undefined` | Callback executed after plot is initialized. See below for parameter information. |
128+
| `onUpdate` | `Function(figure, graphDiv)` | `undefined` | Callback executed when a plot is updated due to new data or layout, or when user interacts with a plot. See below for parameter information. |
129+
| `onPurge` | `Function(figure, graphDiv)` | `undefined` | Callback executed when component unmounts, before `Plotly.purge` strips the `graphDiv` of all private attributes. See below for parameter information. |
130+
| `onError` | `Function(err)` | `undefined` | Callback executed when a plotly.js API method rejects |
131+
| `divId` | `string` | `undefined` | id assigned to the `<div>` into which the plot is rendered. |
132+
| `className` | `string` | `undefined` | applied to the `<div>` into which the plot is rendered |
133+
| `style` | `Object` | `{position: 'relative', display: 'inline-block'}` | used to style the `<div>` into which the plot is rendered |
134+
| `debug` | `Boolean` | `false` | Assign the graph div to `window.gd` for debugging |
135+
| `useResizeHandler` | `Boolean` | `false` | When true, adds a call to `Plotly.Plot.resize()` as a `window.resize` event handler |
136136

137137
**Note**: To make a plot responsive, i.e. to fill its containing element and resize when the window is resized, use `style` or `className` to set the dimensions of the element (i.e. using `width: 100%; height: 100%` or some similar values) and set `useResizeHandler` to `true` while setting `layout.autosize` to `true` and leaving `layout.height` and `layout.width` undefined. This can be seen in action in [this CodePen](https://codepen.io/nicolaskruchten/pen/ERgBZX) and will implement the behaviour documented here: https://plot.ly/javascript/responsive-fluid-layout/
138138

139139
#### Callback signature: `Function(figure, graphDiv)`
140140

141141
The `onInitialized`, `onUpdate` and `onPurge` props are all functions which will be called with two arguments: `figure` and `graphDiv`.
142142

143-
* `figure` is a serializable object with three keys corresponding to input props: `data`, `layout` and `frames`.
144-
* As mentioned above, for the time being, this component may _mutate_ its `layout` and `data` props in response to user input, going against React rules. This behaviour will change in the near future once https://github.com/plotly/plotly.js/issues/2389 is completed.
145-
* `graphDiv` is a reference to the (unserializable) DOM node into which the figure was rendered.
143+
- `figure` is a serializable object with three keys corresponding to input props: `data`, `layout` and `frames`.
144+
- As mentioned above, for the time being, this component may _mutate_ its `layout` and `data` props in response to user input, going against React rules. This behaviour will change in the near future once https://github.com/plotly/plotly.js/issues/2389 is completed.
145+
- `graphDiv` is a reference to the (unserializable) DOM node into which the figure was rendered.
146146

147147
### Event handler props
148148

0 commit comments

Comments
(0)

AltStyle γ«γ‚ˆγ£γ¦ε€‰ζ›γ•γ‚ŒγŸγƒšγƒΌγ‚Έ (->γ‚ͺγƒͺγ‚ΈγƒŠγƒ«) /