Align axisLeft labels to the left

Question

I am using a @nivo/bar chart like below

<ResponsiveBar
    height="400"
    data={barData}
    keys={["value"]}
    indexBy="label"
    layout="horizontal"
    axisLeft={{ 
        width: 300,
        tickSize: 0,
        tickPadding: 8,
    }}
/>

However, the labels on the left axis are aligned to the side of the chart (right aligned), I would want them to be aligned to the left see attached image

Answer 1

You can use renderTick method and <text> tag for this purpose.

  <ResponsiveBar
  ...
  axisLeft={{
    renderTick: tick => (
      <g dominantBaseline="central" transform={`translate(${tick.x},${tick.y})`}>
        <text transform="translate(-20, 0)" textAnchor="left" style={{ color: "#333", fontSize: 11 }}>
          {tick.value}
        </text>
      </g>
    )
 }}