Only integers on y axis

plotly.js
1

Hello,

I’m embedding a plotly column chart in my application that lets users interact with the data through a date filter.

As a beginner I’m absolutely fine with how plotly displays the ticks by default, except for one thing: when there is no data in the graph, it displays decimal ticks (like 0, 0.5, 1, 1.5 etc). This doesn’t make sense in my use case:

Screenshot 2024-03-07 at 16.00.27
Screenshot 2024-03-07 at 16.00.271649×916 50.4 KB

I did some digging but I cannot find a way to make plotly display whole numbers without messing up something else. For example, I tried setting setting tickmode to linear but that leads to things looking ridiculous when there is a lot of data in view:

Screenshot 2024-03-07 at 16.06.12
Screenshot 2024-03-07 at 16.06.121659×780 53.8 KB

There has to be an easy way to achieve this, I hope that somebody can help me :slight_smile:

Thanks in advance!

2

hi @reinout.kramer
:wave: I’m less familiar with JS but if you post your code (reproducible example), I can ask my colleagues.

3

Hello!

I actually think, python and js are quite similar in this case. We have another topic over here with the exact same question for python.

4

Thanks, I’ll keep an eye on that one as well.

5

Layout:

{
  "font": {
    "family": "Open Sans",
    "size": 14,
    "color": "#555"
  },
  "autosize": true,
  "hovermode": "closest",
  "hoverlabel": {
    "bgcolor": "#888",
    "bordercolor": "#888",
    "font": {
      "color": "#FFF"
    }
  },
  "margin": {
    "l": 60,
    "r": 60,
    "b": 60,
    "t": 60,
    "pad": 10
  },
  "showlegend": true,
  "xaxis": {
    "title": {
      "text": ""
    },
    "showgrid": false,
    "fixedrange": true,
    "gridcolor": "#d7d7d7",
    "zeroline": false
  },
  "yaxis": {
    "title": {
      "text": ""
    },
    "showgrid": false,
    "fixedrange": true,
    "gridcolor": "#d7d7d7",
    "zeroline": true,
    "zerolinecolor": "#d7d7d7",
    "rangemode": "tozero"
  },
  "barmode": "group"
}

Configuration:

{
  "displayModeBar": false,
  "doubleClick": false,
  "responsive": true
}

Data (or lack thereof):

{
  "marker": {
    "color": ""
  },
  "transforms": [],
  "name": "Visits",
  "hovertext": [
    "0 visit(s)",
    "0 visit(s)",
    "0 visit(s)",
    "0 visit(s)"
  ],
  "hoverinfo": "text"
}

This should give you the graph as shown in the first image of my original post, let me know if you need something else.

Thanks in advance!

6

hi @reinout.kramer
I just wrote you a direct message because I’m not able to reproduce the graph with your code.

7

Hi adam,

Thanks for reaching out.

Unfortunately, I’m embedding the plot in a low-code app using some community widget and I have no idea how to extract the source code.

However, it’s easy to reproduce the scenario in plotly studio - just create a bar chart that displays only some zero values.

I tried export a graph to share here, but I cannot attach .zip or .html files and if I paste the HTML in a code block here the whole things crashes…

Sorry I can’t make this easier for you…

8

Use

tickformat: .0f,

or

exponentformat: ‘none’,

9

tickformat: .0f results in duplicate numbers (i.e. 0,1,1,2,3,3,4,4)
exponentformat does nothing unfortunately.

Can’t believe how difficult it is to do something so seemingly simple…