search

FormidableLabs / victory-native-xl

A charting library for React Native with a focus on performance and customization.
https://commerce.nearform.com/open-source/victory-native
696 stars 52 forks source link

Customizing label position and rotation on StackedBar #388

Open Dan-Berezin opened 2 weeks ago

Dan-Berezin commented 2 weeks ago

Hi, I'm using victory-native 41.6.0 and StackedBars component. My goal is to build an horizonal plot where every bar is the same length but the proportions amongst the two colors from each bars shows the progress. This is how it should look like:

Captura de pantalla 2024-10-04 a la(s) 6 47 58 p m

I'm currently having issues with the position of the labels. The rendering of my code looks like this:

Captura de pantalla 2024-10-04 a la(s) 6 48 46 p m

is there a way to either rotate and position the labels or to render some Text component as children for each StackedBar that I can customize fully? Or even to overlay some text on the graph so I can achieve this result? Thanks

zibs commented 2 weeks ago

Hey @Dan-Berezin, it almost seems to me that it would be easier to just use Skia itself here without the library.

// map through each data point:
<View>
 <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
  <Text>label</Text>
  <Text>data</Text>
  <Canvas>
     // figure out how to draw a simple straight rectangle line the width you need etc.
     <Path/Line color />
     <Path/Line gray color />
  </Canvas>

 </View>
</View>