Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I remove non-integers in the axis of a plotly.js graph?

return {
  height: 210,
  title: title,
  autosize: true,
  width: '100%',
  font: {
    size: 10,
    family: "Roboto"
  },
  showlegend: false,
  margin: {
    l: 40,
    r: 10,
    b: 35,
    t: 22,
    pad: 0
  },
  xaxis: {
    nticks: 6,
    title: "Score",
    linecolor: '#cccccc',
    zerolinewidth: 0,
    zerolinecolor: '#fff'
  },
  yaxis: {
    title: "Number of students",
    linecolor: '#cccccc',
    zerolinewidth: 0,
    zerolinecolor: '#eeeeee',
    range: [0, numStudents]
  },
  bargap: 0.5
};

This is including half steps as well 1.5 and so on. I am using plotly.js and this is what I see:

enter image description here

like image 664
Shamoon Avatar asked Oct 26 '25 12:10

Shamoon


1 Answers

You can force Plotly to use defined distances between the axis' ticks by setting dtick in the layout options of your axis, i.e. in your case it would be

{yaxis: {dtick: 1}}

See below for an example of no layout settings vs fixed dtick.

var trace1 = {
  x: ['A', 'B', 'C'],
  y: [1, 3, 2],
  mode: 'markers',
  type: 'bar'
};

Plotly.newPlot('myPlot1', [trace1], {yaxis: {dtick: 1}});
Plotly.newPlot('myPlot2', [trace1]);
<script src="https://cdn.plot.ly/plotly-latest.min.js">
</script>
<div id = "myPlot1" ></div>
<div id = "myPlot2" ></div>
like image 169
Maximilian Peters Avatar answered Oct 29 '25 01:10

Maximilian Peters