如何使该行从中间开始而不是从列的开头开始？

Question

我正在使用 chartjs (v3) （以及要集成的react-chartjs）创建折线图，并且我在自定义从第一列中间开始的线（并且也完成）时遇到了一些糟糕的情况在最后一列的中间），因为第一列将始终处于 zero Y 位置，这样使得该行从最左边开始。 所以我需要弄清楚如何使线条标记在列的中间而不是边框。

这是我得到的结果：

我需要这样的东西：

我的配置：

<Line
  data={data}
  height={440}
  width={480}
  options={{
    ...options,
    scales: {
      x: {
        grid: {
          color(context) {
            if (context.tick.value === 0) return '#B3B3B3';

            return '#E6E6E6';
          },
          tickWidth: 0,
          lineWidth: 1,
        },
        border: {
          dash(context) {
            if (context.tick.value === 0) return [0];

            return [5, 5];
          },
          width: 0,
        },
        ticks: {
          display: false,
        },
      },
      y: {
        grid: {
          color(context) {
            if ([0, 30, 70].includes(context.tick.value)) {
              return '#B3B3B3';
            }

            return '#E6E6E6';
          },
          lineWidth(context) {
            if ([30, 70].includes(context.tick.value)) {
              return 2;
            }

            return 1;
          },
          tickWidth: 0,
        },
        border: {
          dash(context) {
            if (context.tick.value === 0) return [0];

            return [5, 5];
          },
          width: 1,
        },
        min: 0,
        max: 100,
        ticks: {
          font: {
            weight: 'bold',
            size: 10,
            family: 'Open Sans',
          },
          color: '#000000',
        },
      },
    },
    animation: false,
    plugins: {
      legend: {
        display: false,
      },
      tooltip: {
        enabled: false,
      },
    },
  }}
/>

Answer 1

...      

      options: {
            scales: {
                x: {
                    type: 'linear', // Use linear scale for x-axis
                    ticks: {
                        stepSize: 0, // Set step size to 1
                        precision: 0
                        // No decimal places
                    }
                },
                y: {
                    ticks: {
                        stepSize: 1, // Set step size to 1
                        precision: 0 // No decimal places
                    }
                }
            },
...