how to add more data to axisLeft and tootilp? How do I include this information?

[rafaeles0]

how to add more data to axisLeft and tootilp? How do I include this information?

I have an object:

     indexBy: 'country',
     keys: ['burger', 'donut'],
     data: [
{
         country: "AD",
         hot dog: 104,
         burger: 97,
         sandwich: 69,
         kebab: 170,
         fries: 194,
         donut: 115
     },
{
         country: "AE",
         hot dog: 14,
         burger: 100,
         sandwich: 68,
         kebab: 174,
         fries: 10,
         donut: 114
     }
]

I made a format for axisLeft, like this:

const axisLeft = indexBy =>  `Country: ${indexBy}`


        axisLeft={{
          format: axisLeft,
          tickSize: 0,
          tickPadding: 10,
          legendPosition: 'start',
          legendOffset: 32,
        }}

But I would like to be able to put more information in that axisLeft, add, for example, fries, kebab like:
const axisLeft = indexBy => Country: ${indexBy} and ${kebab}``
If I put it like this, it goes undefined.

And in the tooltip of the bar, I need to put more information, currently I can only put the value, but I wanted to make composition, how to include other values, like sandwich, etc.

  const CustomTooltip = data => {
    const { value} = data
    if (!value) return null
    return (
      <span>
        {value}
       {sandwich}
      </span>
    )
  }

tooltip={CustomTooltip}

[wyze]

As far as getting more information into the ticks, this is currently not possible. It looks like it might be rather complex to support this, so I'll have to dig in a little more when I get some extra time.

As far as the data in the tooltip, you should be able to do what you want currently: https://codesandbox.io/s/naughty-tereshkova-17me0