I am working on a stacked bar chart. here is the codepen

CodePudding user response：

decrease the x-axis index of rect and text

return (
      <>
      <g key={Math.random()}>
        <rect
          width={20}
          height={height}
          fill={bar.color}
          x={100   rowIndex * 30}
          y={490 - y - height}
        />
        <text
          x={110   rowIndex * 30}
          y={490 - y - height/2}
          dy="0.5em"
          textAnchor="middle"
          style={{ fill: 'white', fontSize: '12px' }}
        >{`${bar.color === '#ffcc00' && bar.value === 100 ? 'X': bar.value}`}</text>
         <text
            x={105   rowIndex * 30}
            y={480}
            textAnchor="end"
            style={{ fill: 'red',
              fontSize: '13px',
              transformOrigin: (125   rowIndex * 30) 'px 480px',
              transform: 'rotateZ(-45deg)'
            }}
          >{entry.name}</text>
        </g>
      </>
    );

CodePudding user response：

Simply change the x position. You need to understand your own variables.

const gutter = 30; // Instead of 60 currently

// ...
<rect
  width={20}
  height={height}
  fill={bar.color}
  x={100   rowIndex * gutter}
  y={490 - y - height}
/>