leeoniya / uPlot

📈 A small, fast chart for time series, lines, areas, ohlc & bars
MIT License
8.83k stars 385 forks source link

There is a requirement, that is, the Y-axis, which can only display integers. I made it display only integers through the values property in the axes, but can the y axes I marked in red be hidden #965

Closed AnnEthan closed 4 months ago

AnnEthan commented 4 months ago

1720142079762

leeoniya commented 4 months ago

you can add some filters: https://jsfiddle.net/0f56tder/1/

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

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

const opts = {
  width: 800,
  height: 400,
  scales: {
    x: {
      time: false,
    },
  },
  axes: [
    {},
    {
      filter: onlyInts,
      grid: { filter: onlyInts },
      ticks: { filter: onlyInts }
    }
  ],
  series: [
    {},
    {
      label: "Scanning 1",
      stroke: "#0000ff",
    },
  ],
};

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

or you can provide your own axis.incrs array that only contains integer increments.

or you can provide your own axis.splits function that only creates integer splits.

AnnEthan commented 4 months ago

1 I convert non-integers to Null through filter, but why does the orange region still have an axis

leeoniya commented 4 months ago

you forgot to filter axis.ticks, as shown above: ticks: { filter: onlyInts }

AnnEthan commented 4 months ago

thanks!!!