How to override Plotly.js methods (downloadImage)

[benjaminh]

By default, vue-plotly component provides a download button with arbitrary values for the output image, resulting in low quality PNG. Is it possible to override the downloadImage method ? Can someone provide a minimal example on how to do so ?

I tried the following with no success:

<template>
    <v-container>
        <Plotly 
          v-if='!loading'
          :data.sync="data"
          :layout="layout"
        ></Plotly>
    </v-container>
</template>

<script>
import { Plotly } from 'vue-plotly';

export default {
    components: {
        Plotly
    },
    },
    data () {
      return {
        data: [],
        layout: {
          autosize: true,
          title: "MyTitle",
          showlegend: true,
        },
        loading: false,
      };
    },
    mounted () {
      this.loading = true;
      this.loadData().then(data => {
        this.data = data;
      }).catch( (error) => console.log("Error loading data: ", error) );
      this.loading = false;
    },
    methods: {
      downloadImage () {
        return Plotly.downloadImage(
          {
            format: 'png', width: 800, height: 600
          }
        )
      },
      loadData () {
        // Loading my data
      },
}

[benjaminh]

For the record and anyone facing the same issue, here is how I solve the problem (thanks to mit who guided me in the right direction on stackoverflow : https://stackoverflow.com/questions/65826540/how-to-override-plotly-js-methods-downloadimage-using-vue-plotly-module) :

• Based on the usage example with display-mode-bar option, I tried to pass a to-image-button-options prop to Plotly component
• This prop is bound to an array with according configuration, following the Plotly documentation here : https://plotly.com/javascript/configuration-options/#customize-download-plot-options

<template>
    <v-container>
        <Plotly 
          v-if='!loading'
          :data.sync="data"
          :layout="layout"
          :to-image-button-options="toImageButtonOptions"
        ></Plotly>
    </v-container>
</template>

<script>
import { Plotly } from 'vue-plotly';

export default {
    components: {
        Plotly
    },
    },
    data () {
      return {
        data: [],
        layout: {
          autosize: true,
          title: "MyTitle",
          showlegend: true,
        },
        toImageButtonOptions: {
          format: 'svg',
          filename: 'svg_image',
          height: 500,
          width: 700,
          scale: 1
        }
        loading: false,
      };
    },
    mounted () {
      this.loading = true;
      this.loadData().then(data => {
        this.data = data;
      }).catch( (error) => console.log("Error loading data: ", error) );
      this.loading = false;
    },
    methods: {
      loadData () {
        // Loading my data
      },
}