BarcodePlot.vue

<template>
  <plotly-chart :chart="chartConfig" />
</template>

<script>
// require modules
/* eslint-disable no-unused-vars */
import plotlyChart from '@/components/PlotlyChart.vue';
const _ = require('lodash');

export default {
  name: 'BarcodePlot',
  components: {
    plotlyChart
  },
  props: ['x'],
  data() {
    return {
      chartConfig: {
        id: 'barcodePlot',
        traces: [
          {
            //y: ['C','W','Y','F','M','L','I','V','A','G','P','Q','N','T','S','E','D','K','H','R'],
            y: this.x.split(''),
            x: _.range(1, this.x.length + 1),
            // x: this.x,
            mode: 'markers',
            type: 'scatter',
            marker : {
              opacity: 1,
              size: 8,
              symbol: 'line-ns-open'
            }
          }
        ],
        layout: {
          title: 'Barcode Plot',
          xaxis: {
            title: 'Position',
            zeroline: false,
            // range: [0, this.x.length + 1]
          },
          yaxis: {
            autotick: false,
            ticks: 'outside',
            categoryarray: ['C','W','Y','F','M','L','I','V','A','G','P','Q','N','T','S','E','D','K','H','R'],
            tickfont: {
              family: 'Arial, sans-serif',
              size: 12,
              color: 'black'
            },
          }
        }
      }
    }
  },
  mounted() {
    // console.log(this.x.split(''))
  }
}
</script>

<style scoped>
.mainContent {
  padding: 20px;
}
</style>