Question: Unable to Control Number of Horizontal Grid Ticks and Display Only Integers on Y-Axis in uPlot

[maksymmalicki1]

Issue Description

I'm encountering difficulty in controlling the number of horizontal grid ticks and forcing uPlot to display only integers on the Y-axis. Despite a thorough review of the documentation, there is no clear guidance on how to achieve this behavior.

Steps to Reproduce

Attempt to control the number of horizontal grid ticks on the X-axis. Attempt to force uPlot to display only integers on the Y-axis.

Expected Behavior

There should be a documented approach or configuration options to control the number of horizontal grid ticks on the X-axis. There should be a documented approach or configuration options to force uPlot to display only integers on the Y-axis.

Actual Behavior

Unable to find a documented approach to control the number of horizontal grid ticks on the X-axis. Unable to find a documented approach to force uPlot to display only integers on the Y-axis.

Additional Context

While using uPlot, it is crucial to have control over the number of grid ticks on the X-axis for better visualization and readability. Additionally, displaying only integers on the Y-axis is often a requirement, especially in scenarios where fractional values are not meaningful or applicable.

Additional Information

Please let me know if there are any additional configuration options, workarounds, or updates regarding this issue. Thank you.

[leeoniya]

Attempt to control the number of horizontal grid ticks on the X-axis.

axis.space is used to control tick density:

https://github.com/leeoniya/uPlot/blob/38f63de6843d64e703fa23596d9525c15d003ecd/dist/uPlot.d.ts#L1057-L1058

Attempt to force uPlot to display only integers on the Y-axis.

there are two ways to do this.

you can provide a custom axis.incrs array, which is the list of available tick increments for uPlot to choose from:

https://github.com/leeoniya/uPlot/blob/38f63de6843d64e703fa23596d9525c15d003ecd/dist/uPlot.d.ts#L1060-L1061

uPlot generates them internally here (you can copy and modify this logic): https://github.com/leeoniya/uPlot/blob/38f63de6843d64e703fa23596d9525c15d003ecd/src/opts.js#L48-L61

however, it may be easier to use axis.filter to set the non-integer splits to null:

https://github.com/leeoniya/uPlot/blob/38f63de6843d64e703fa23596d9525c15d003ecd/dist/uPlot.d.ts#L1066-L1067

https://jsfiddle.net/5d1cuvfj/

let data = [
  [0, 5],
  [1, 2]
];

const intFilter = (u, splits) => splits.map(v => Number.isInteger(v) ? v : null);

const opts = {
  width: 800,
  height: 400,
  scales: {
    x: {
      time: false,
    },
  },
  axes: [
    {
      filter: intFilter,
      grid: {
        filter: intFilter,
      },
      ticks: {
        filter: intFilter,
      }
    }
  ],
  series: [
    {},
    {
      label: "Data 1",
      stroke: "red",
      fill: "rgba(255,0,0,0.1)",
    },
  ],
};

let u = new uPlot(opts, data, document.body);