How to use percentiles on the X-axis?

plotly.js
1

I have a simple scatter plot.
Right now the x-axis is an array of strings.

I would like to change this so the x-axis is a percentile. So at 1/10th of the width of the graph it will show "10%, at half the width of the graph it will show “50%” and so on.

I think I found a slightly-hacky way to do it by looking at this: Formatting ticks in Python
But … I was wondering if there was a less hacky way to do this.

2

This is what I ended up doing, wish there was a better solution:

type TopKPlotProps = {
  y: number[];
};

export default function TopKPlot({ y }: TopKPlotProps) {
  const sortedY = y.sort((a, b) => a - b);
  const x = _.range(0, sortedY.length);
  const maxX = x[x.length - 1];
  const oneTenthInterval = maxX / 10;

  const tickvals = _.range(0, maxX, oneTenthInterval).concat([maxX]);
  const ticktext = ["0%", "10%", "20%", "30%", "40%", "50%", "60%", "70%", "80%", "90%", "100%"];
  invariant(tickvals.length === ticktext.length, `${tickvals.length} !== ${ticktext.length}`);

  const tickProps = {
    tickmode: "array" as const,
    tickvals,
    ticktext,
  };

  const [plotState, setPlotState] = useState<PlotParams>({
    data: [{ x, y, type: "scatter" }],
    layout: {
      autosize: true,
      xaxis: tickProps,
    },
  });

  return (
    <Plot
      useResizeHandler
      style={{ width: "100%", height: "100%" }}
      onUpdate={newPlotState => setPlotState(newPlotState as PlotParams)}
      data={plotState.data}
      layout={plotState.layout}
    />
  );
}