Skip to content

Commit d1bb8c3

Browse files
author
Martin Hansen
committed
Added use case to readme
1 parent e6441e0 commit d1bb8c3

File tree

1 file changed

+30
-11
lines changed

1 file changed

+30
-11
lines changed

README.md

Lines changed: 30 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
## Install
44

55
```bash
6-
npm install vue-plotly plotly.js --save
6+
npm install @statnett/vue-plotly plotly.js --save
77
```
88

99
Then use it as a module:
@@ -12,6 +12,25 @@ Then use it as a module:
1212
import VuePlotly from '@statnett/vue-plotly'
1313
```
1414

15+
```js
16+
export default {
17+
data: function () {
18+
return {
19+
data: [{ x: [1, 3], y: [2, 4] }],
20+
layout: {},
21+
options: {}
22+
}
23+
},
24+
components: {
25+
VuePlotly
26+
}
27+
}
28+
```
29+
30+
```html
31+
<vue-plotly :data="data" :layout="layout" :options="options"/>
32+
```
33+
1534
### Webpack
1635

1736
To use vue-plotly with webpack you should see [this example repo](https://github.com/plotly/plotly-webpack) for how to make that work.
@@ -20,16 +39,16 @@ In short, install `ify-loader` and `transform-loader` and add the following to y
2039

2140
```js
2241
module: {
23-
rules: [
24-
{
25-
test: /\.js$/,
26-
use: [
27-
'ify-loader',
28-
'transform-loader?plotly.js/tasks/util/compress_attributes.js',
29-
]
30-
}
31-
]
32-
}
42+
rules: [
43+
{
44+
test: /\.js$/,
45+
use: [
46+
'ify-loader',
47+
'transform-loader?plotly.js/tasks/util/compress_attributes.js',
48+
]
49+
}
50+
]
51+
}
3352
```
3453

3554
https://plot.ly/javascript/getting-started/#start-plotting might also be relevant.

0 commit comments

Comments
 (0)