Skip to content

Commit f6dbf97

Browse files
alexcjohnsonalexcjohnson
authored
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

+51-51
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)