https://github.com/david-desmaisons/vue-plotly

📈 vue wrapper for plotly.js
https://github.com/david-desmaisons/vue-plotly

Last synced: 2 months ago
JSON representation

📈 vue wrapper for plotly.js

• Host: GitHub
• URL: https://github.com/david-desmaisons/vue-plotly
• Owner: David-Desmaisons
• License: mit
• Created: 2019-03-13T04:31:10.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2023-04-30T15:54:54.000Z (about 2 years ago)
• Last Synced: 2025-03-29T11:04:38.837Z (2 months ago)
• Language: JavaScript
• Homepage: https://david-desmaisons.github.io/vue-plotly/
• Size: 9.61 MB
• Stars: 262
• Watchers: 2
• Forks: 71
• Open Issues: 39
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        



# vue-plotly

[![GitHub open issues](https://img.shields.io/github/issues/David-Desmaisons/vue-plotly.svg)](https://github.com/David-Desmaisons/vue-plotly/issues)

[![CircleCI](https://circleci.com/gh/David-Desmaisons/vue-plotly.svg?style=shield)](https://circleci.com/gh/David-Desmaisons/vue-plotly)

[![codecov](https://codecov.io/gh/David-Desmaisons/vue-plotly/branch/master/graph/badge.svg)](https://codecov.io/gh/David-Desmaisons/vue-plotly)

[![Npm version](https://img.shields.io/npm/v/vue-plotly.svg)](https://www.npmjs.com/package/vue-plotly)

[![MIT License](https://img.shields.io/github/license/David-Desmaisons/vue-plotly.svg)](https://github.com/David-Desmaisons/vue-plotly/blob/master/LICENSE)

Thin vue wrapper for plotly.js



It provides:



  
all plotly.js methods and events

  
data reactivity

  
Redraw on resizing



![example](./example/assets/demo.gif)

## Live example

https://david-desmaisons.github.io/vue-plotly/

## Usage

```HTML

```

```javascript

import { Plotly } from 'vue-plotly'

export default {

  components: {

    Plotly

  },

  data() {

    return {

      data:[{

        x: [1,2,3,4],

        y: [10,15,13,17],

        type:"scatter"

      }],

      layout:{

        title: "My graph"

      }

    }

  }

}

```

## API

#### Props 

- `data` ***Array*** (*optional*) 

  [Data](https://plot.ly/javascript/reference/) to be displayed

- `layout` ***Object*** (*optional*) 

  Graphic [layout](https://plot.ly/javascript/reference/#layout)

- `id` ***String*** (*optional*) 

  Id of the root HTML element of the component.

- Others:

  Plotly component implements the [transparent wrapper pattern](https://zendev.com/2018/05/31/transparent-wrapper-components-in-vue.html):
All other props will be passed as plotly graphic [option](https://plot.ly/javascript/configuration-options/).

## Installation

```

npm install vue-plotly

```

## Project setup

```

npm install

```

### Compiles and hot-reloads for development

```

npm run serve

```

### Compiles and minifies for production

```

npm run build

```

### Run your tests

```

npm run test

```

### Lints and fixes files

```

npm run lint

```

### Run your unit tests

```

npm run test:unit

```

### Customize configuration

See [Configuration Reference](https://cli.vuejs.org/config/).