Placement of annotations on screen and png

plotly.js
1

I am producing charts using plotly.js. These charts will need to be saved into a png file. The problem I have is with the placement of the annotations.
First, the screen image:

image
image1255×492 19.1 KB

The issue is with the “Data source” annotation. Here is the annotation section of the code that produced the image:

  annotations : [text :  'Data Sources: U.S. Census Bureau (1990-2010) and Colorado State Demography Office (2020-2050).', 
                font: {
    size: 7,
    color: 'black'
      },
      xref : 'paper', 
      x : 0, 
      yref : 'paper', 
      y : -0.35, 
      align : 'left', 
      showarrow : false}]
  };

When I save this image as a png, the annotations are missing:

Household Forecast Colorado (5)
Household Forecast Colorado (5)1000×600 7.12 KB

here is the code that produced the PNG file:

		 Plotly.toImage(plotdiv, { format: 'png', width: 1000, height: 600 }).then(function (dataURL) {
        var a = document.createElement('a');
        a.href = dataURL;
        a.download = filename;
        document.body.appendChild(a);
         a.click();
        document.body.removeChild(a);
    });

One other point, the downloaded image has to fit on a standard PowerPoint slide ( 1280 by 720 pixels). How can I adjust the annotation and/or image size to include the annotation so that the annotation is below the y-axis total but still on the saved png image.

TIA

2

I was able to resolve this issue in an off way.
For a given chart, there is the code that generates the chart and an accompanying button that triggers the download.
The code that creates the chart specifies its height and width.
The button executes a function that runs a “Plotly.toImage” command. This command also has a height and a width argument to size the image in the png file.
In both instances, the height and the width of the chart have to be the same in order to include the annotations.
That is, one cannot resize the chart once it has been created.

This doesn’t make any sense to me; the image is created as an SVG – a format that does allow for resizing.
So it goes