CODEWITHSUNDEEP
react-nativevictory-chartsvictory-native
abcd
abcd

Reputation: 11

Unable to render the text over the bar victory native

I have an array graphData = [{"color": "#FFD710", "percentage": 4.5773, "symbol": "Symbol1"}, {"color": "#808000", "percentage": 5.2791, "symbol": "Symbol2"}]. I want to render the percentage of each item in this array above each bar in the bar graph using victory native. I tried to refer to this documentation on their github page regarding this issue

https://github.com/FormidableLabs/victory-native-xl/issues/318 And Implemented the following code but then I get an error saying Property yKeys doesn't exist

Here is the reference to my code. Any help and suggestions would be appreciated!!

const GRAPH_COLORS = [
  '#FFD710',
  '#808000',
  '#006400',
  '#708090',
  '#d62728',
  '#FF7F50',
  '#1f88b4',
  '#9932CC',
  '#FF4500',
  '#FFA07A',
  '#20B2AA',
  '#00FF7F',
  '#4682B4',
  '#FF1493',
  '#00BFFF',
  '#FFD700',
  '#FF69B4',
  '#8A2BE2',
  '#FF8C00',
];
const graphData = [{"color": "#FFD710", "percentage": 4.5773, "symbol": "Symbol1"}, {"color": "#808000", "percentage": 5.2791, "symbol": "Symbol2"}]
<CartesianChart
  data={graphData}
  xKey="symbol"
  yKeys={['percentage']}
  domainPadding={{left: 30, right: 30, top: 30, bottom: 20}}
  axisOptions={{
   font,
  }}>
     {({points, chartBounds}) => {
       if (!points) {
         return null;
       }
       return points?.percentage.map((point, index) => {
         return (
           <Bar
             key={index}
             chartBounds={chartBounds}
             points={[point]}
             animate={{ type: 'spring' }}
             roundedCorners={{
              topLeft: 0,
              topRight: 0,
             }}
             barCount={25}
             color={GRAPH_COLORS[index]}>

              <SkiaText
                color={point.yValue >= 10 ? '#07B419' : '#8B95A1'}
                font={font}
                text={yKeys}
               />  
               
           </Bar>  
          );
        });
      }}
  </CartesianChart>

Upvotes: 0

Views: 153

Answers (2)

Abhishek Kumar Kushwaha
Abhishek Kumar Kushwaha

Reputation: 107

You should change your code to:

text={point.yValue.toString()}

Upvotes: -2

Athan Clark
Athan Clark

Reputation: 3980

The culprit appears to be right around here:

// ...
              <SkiaText
                color={point.yValue >= 10 ? '#07B419' : '#8B95A1'}
                font={font}
                text={yKeys} // <---- culprit
               />
// ...

Your error is basically saying "I have no idea what yKeys is", and looking at your code, I don't see any variable declared in your scoped with that name.

Upvotes: 0

Related Questions