Turn off Autoscaling for Bar Graph Text AND not matching the download scale (See replies)

plotly.js
1

How do you make all the text values above/in the bars the same size. I have tried both the following, however the numbers are still not uniform and it does not look professional.

data={[
          {
            name: "",
            type: "bar",
            x: this.x,
            y: this.y,
            marker: {
              color: this.bar_colors
            },
            textfont: {     //This should work?
              size: 14
            },
            outsidetextfont: {     //Or even this?
              size: 14
            },
            text: this.y_rounded,
            textangle: "-90",
            textposition: "outside",
            hovertemplate: `R<sub>cs,h%{x}</sub>: %{y}`
            //hoverinfo: "y"
          }
        ]}

The text size does change when I change the numbers, but they still aren’t all uniform and I feel there is room to be larger, or even if there wasn’t do it anyways.

Here are a few examples

Local Chroma Shift (4)
Local Chroma Shift (4)1350×1050 22.6 KB

Pretty obvious that the single numbers are way larger. Had the size set to twenty on this one

Local Chroma Shift (5)
Local Chroma Shift (5)1350×1050 20.3 KB

This one is close but the single numbers are still larger. Had the size set to 14, I understand that is trying not to have the longer numbers too big, but there is obviously enough space in this instance to go to 14 and have them all match

2

Wow this is actually interesting, the graphs above (downloaded by pressing the download icon in the upper bar) are not the same as the ones that are displayed on the web page. I will now screenshot those ones instead

Screen Shot 2019-12-06 at 10.19.08 AM
Size 20 one

Screen Shot 2019-12-06 at 10.18.53 AM
Size 14 one

See how the 5%. 4%, 7% labels are giant and the rest are not? I understand they are trying to autoscale to look nice, but even at 14 they are different

3

Hi @isaiaher, I think the issue is related to Downloaded plot looks nothing like it does on the web page, you need to do
fig.show(config={toImageButtonOptions: {width: null, height: null}}) in order to force the download-to-png button to follow the figure dimensions (otherwise it’s using fixed dimensions).

4

Hello,
I believe the second issue I described (the not matching the downloaded file) is described in that link, however, the original issue (not being able to make all the text the same size on the web page plot) does not, unless I missed it. Thank you for the help though and pointing out that issue! :slight_smile: