PlotVuer Live Demo

Live Demo

Code Preview

  <div class="your-outer-container">
    <plot-vuer
      :data-source="{url: url}"
      :metadata="metadata"
    />
  </div>

  <script>
    import { PlotVuer } from '@abi-software/plotvuer';

    export default {
      components: { PlotVuer },
      data: function () {
        return {
          url: 'the-data-url',
          metadata: {
            version: '1.2.0',
            type: 'plot',
            attrs: {
              style: 'heatmap',
              layout: {
                l: 200,
                height: '900px',
                title: 'Title'
              },
              logScale: true,
              columnHeaderIndex: 1,
              columnHeaderSize: 3
            }
          },
        }
      }
    }
  </script>