CODEWITHSUNDEEP
reactjsrecharts
Trentfrompunchbowl1
Trentfrompunchbowl1

Reputation: 109

How to create dynamic rechart label

My charts will be data dense and the labelName ( in code below ) will need to be offset from the bubble ( see picture ) enter image description here

How can i achive this in rechart ( react )

export default function NickelResourceChart({data}) {
  const data01 = [
    {x: 47.9, y: 1.08, z: 47.9, labelName: 'Jaguar'},
    {x: 58.0, y: 0.48, z: 58.0, labelName: 'Ban phuc'},
    {x: 8.7, y: 1.63, z: 8.7, labelName: 'Mt edwards'},
    {x: 6.8, y: 0.42, z: 6.8, labelName: 'Idaho'},
  ]

  return (
    <ScatterChart width={400} height={400}>
      {console.log('chart data', data)}
      <XAxis type="number" dataKey={'x'} name="Size" unit="Mt" padding={{left: 10, right: 10}} />
      <YAxis type="number" dataKey={'y'} name="Grade" unit="Ni%" padding={{top: 10, bottom: 10}} />
      <ZAxis dataKey={'x'} range={[5, 1000]} unit="Mt" />
      <CartesianGrid />
      <Tooltip cursor={{strokeDasharray: '10 10'}} />
      <Scatter data={data01} fill="#ff6600" shape="circle">
        <LabelList
          dataKey="labelName"
          fill="rgb(255, 102, 0);"
          position="bottom"
          StackOffsetType="sign"
          fontSize={'70%'}
        ></LabelList>
      </Scatter>
    </ScatterChart>
  )
}

Upvotes: 4

Views: 1397

Answers (1)

Viet
Viet

Reputation: 12777

Try to set position="insideTopLeft" and offset={-50} inside LabelList. Try adjusting these numbers to suit your needs. It's stated in the docs: https://recharts.org/en-US/api/LabelList#offset

Upvotes: 1

Related Questions