Plotly.js Vue.js Tutorial

Plotly.js Vue.js Code Example

In this example, we will demonstrate how to integrate Plotly.js, a high-level charting library, with Vue.js, a progressive JavaScript framework. The goal is to create a simple, reactive chart component using Vue.js that renders a Plotly chart.

Setting Up the Project

First, ensure you have Vue CLI installed. If not, install it globally using npm:

npm install -g @vue/cli

Then, create a new Vue project:

vue create plotly-vue-example

Navigate to the project directory:

cd plotly-vue-example

Next, install Plotly.js via npm:

npm install plotly.js-dist

Creating a Plotly Chart Component

Create a new file under the src/components directory and name it PlotlyChart.vue. This component will be responsible for rendering our Plotly chart.

<template>
 <div ref="plotElement"></div>
</template>

<script>
import Plotly from 'plotly.js-dist'

export default {
 name: 'PlotlyChart',
 props: {
   data: Array,
   layout: Object
 },
 mounted() {
   this.renderChart();
 },
 methods: {
   renderChart() {
     Plotly.newPlot(this.$refs.plotElement, this.data, this.layout);
   }
 },
 watch: {
   data: 'renderChart',
   layout: 'renderChart'
 }
}
</script>


This Vue component uses a <div> as a container for the Plotly chart. It listens for changes to its data and layout props and re-renders the chart accordingly.

Using the PlotlyChart Component

In your Vue application's main component (e.g., App.vue), you can now use the <PlotlyChart> component to render a chart. First, import the component:

<template>
 <div id="app">
   <PlotlyChart :data="chartData" :layout="chartLayout" />
 </div>
</template>

<script>
import PlotlyChart from './components/PlotlyChart'

export default {
 name: 'App',
 components: {
   PlotlyChart
 },
 data() {
   return {
     chartData: [{
       x: [1, 2, 3, 4, 5],
       y: [10, 15, 13, 17, 22],
       type: 'scatter'
     }],
     chartLayout: {
       title: 'Sample Chart'
     }
   }
 }
}
</script>


This example passes an array of data points and a layout configuration to the <PlotlyChart> component, which then renders a scatter plot titled "Sample Chart".

Remember to import your components and properly bind data and layout props to take full advantage of Vue.js's reactivity system. This setup allows you to quickly integrate Plotly's powerful charting capabilities within your Vue.js applications.