title: why aren't x-axis values labeld correctly on this plotly js chart?
body: <p>As far as I can tell, my chart is pretty close to the example of a bar graph in the official documentation:</p>
  <pre><code>var data = [ { &quot;type&quot;: &quot;bar&quot;, &quot;x&quot;: [ &quot;&lt;=1&quot;, &quot;2&quot;, &quot;3&quot;, &quot;4&quot;, &quot;5&quot;, &quot;6 - 10&quot;, &quot;11 - 20&quot;, &quot;21+&quot; ], &quot;y&quot;: [ 0, 0, 0, 0, 1, 0, 0, 30 ], &quot;textposition&quot;: &quot;auto&quot;, &quot;hoverinfo&quot;: &quot;x+y&quot;, &quot;marker&quot;: { &quot;color&quot;: &quot;#B5C6D6&quot; } } ];
  
  Plotly.newPlot('myDiv', data);
  </code></pre>
  <p>html</p>
  <pre><code>&lt;head&gt;
      &lt;!-- Load plotly.js into the DOM --&gt;
      &lt;script src='https://cdn.plot.ly/plotly-latest.min.js'&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id='myDiv'&gt;&lt;!-- Plotly chart will be drawn inside this DIV --&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  <p>However, the x axis values are not what I entered into my x-axis array.  Instead of 1, 2, 3, ... 21+, I get 1.5, 2, 2.5, etc.  I have no idea where these values are coming from.</p>
  <p><a href="https://codepen.io/dvdgdnjsph/pen/BaKwRKm?editable=true%3Dhttps%3A%2F%2Fplotly.com%2Fjavascript%2Fbar-charts%2F" rel="nofollow noreferrer">https://codepen.io/dvdgdnjsph/pen/BaKwRKm?editable=true%3Dhttps%3A%2F%2Fplotly.com%2Fjavascript%2Fbar-charts%2F</a></p>
  <p>Can anyone help me?</p>