Yaxis labeling 0 as negative

plotly.js
1

When I give a range for my y-axis and the tickformat: “%”, it makes a y value of y = -0% however I want it to just be y = 0%, no negative sign.

Here is what it looks like now

Local Chroma Shift
Local Chroma Shift1350×1050 22.3 KB

Here is what it looks like without the tickformat: "%

Local Chroma Shift (1)
Local Chroma Shift (1)1350×1050 20.9 KB

And here is part of my code:

        layout={{
          height: this.height,
          margin: {
            l: 70,
            r: 10,
            b: 45,
            t: 10,
            pad: 4
          },
          xaxis: {
            title: {
              text: "Hue-Angle Bin (<i>j</i>)"
            },
            tickmode: "linear"
          },
          yaxis: {
            range: [-0.4, 0.4],
            title: {
              text:
                "Local Chroma Shift (<i>R</i><sub>cs,h<i>j</i></sub>) <br />",
              font: {
                size: 20
              }
            },
            tickformat: "%"
          },
          bargap: this.bar_gap
        }}
2

Thanks for pointing this out.

I’m curious, are you using texttemplate or are you setting text as an array in your bar trace?

3

I set text to an array of strings because i set the data of y to an array of exact doubles but wanted the text to be rounded, thus set text to an array of strings rounded to the nearest percentage.

for (i = 0; i < 16; i++) {
      this.y_rounded[i] = `${Math.round(this.y[i] * 100)}%`;
    }
.
.
.

 data={[
          {
            name: "",
            type: "bar",
            x: this.x,
            y: this.y,    //array of doubles
            marker: {
              color: this.bar_colors
            },
            outsidetextfont: {
              size: 20
            },
            text: this.y_rounded,     //Array of strings
            textangle: "-90",
            textposition: "outside",
            hovertemplate: `R<sub>cs,h%{x}</sub>: %{y}`
          }
        ]}

I supplied the info above if you are curious in fixing the problem, however, I did find a work around below. It isn’t very dynamic though, but it works for what I need!

yaxis: {
            range: [-0.4, 0.4],
            tickmode: "array",
            tickvals: [0, 0.1, 0.2, 0.3, 0.4, -0.1, -0.2, -0.3, -0.4],
            ticktext: [
              "0%",
              "10%",
              "20%",
              "30%",
              "40%",
              "-10%",
              "-20%",
              "-0%",
              "-40%"
            ],
            title: {
              text:
                "Local Chroma Shift (<i>R</i><sub>cs,h<i>j</i></sub>) <br />",
              font: {
                size: 20
              }
            }
            //tickformat: ""    //Not needed anymore due to ticktext.
          }
4

Actually . I think what I described above was just for the hoverinfo, shouldn’t have much to do with the yaxis, my bad. But, nevertheless, I believe I answered your question? If not I can supply more info, this program takes a lot of data from a large JSON file so it is hard to follow the exact data that is being passed into the plot by just posting the code. Thanks for taking a look though.

5

Logged as an issue here: https://github.com/plotly/plotly.js/issues/5069

7

This should be resolved in version 1.55.0 :slight_smile: