Not able to customise style of the bars

[bhuvana-abhisheg]

Hi.. am trying to use your package. In my project i need to display different bar colors depending on the data. My code is as below. But its not working. can u pls suggest how to implement this.

style={{ data: { fill: ({ trained }) => { console.log('inside trained...',trained) trained === 1 ? 'green' : trained === 2 ? 'orange' : 'grey' } } }}

[hugohow]

Hello, you should try to do something like this :

<TouchableGraph
     barStyle={(trained) => { console.log(trained) }}
     tickAxisStyle={(trained) => { console.log(trained) }}>
// you Victory Chart
</TouchableGraph>

[bhuvana-abhisheg]

Thanks @hugohow !! That helps !! My app's requirement is little different. I figured out a way in which i could make the ticklabels clickable in android and ios. But i am dealing with a different issue now. I had to style the ticklabels to bold, stroke & fill with color, so that event is fired most of the times when the user clicks. The look is not so good now.Otherwise the clickable area around the label is very less. I tried your library and click is so cool.

How to make the clickable area bigger for tick labels in x-axis ? can you pls let me know. I am struck with this issue for long time.

[hugohow]

Hum you should try to play with the padding in tickAxisStyle it will make the clickable area bigger.

And for the ticklabels, you have all the available style options of Text (in React Native), that you can put inside tickAxisTextStyle

[bhuvana-abhisheg]

The below is the style that I have given for tick labels. With the below styles, clickable area is big and the event is getting fired most of the times. But look and feel is not so great. Please find the attached screenshot. Please let me know if you have better ideas to style the tickLabel.

angle: 22,

              padding: wp('1.5%'),

              verticalAnchor: "middle",

              textAnchor:'start',

              fill: "grey",

              fontWeight:"bold",

              stroke:"grey"

Thanks for your help !!

Bhuvana.

On Wed, Jun 19, 2019 at 4:39 PM How-Choong Hugo [email protected] wrote:

Hum you should try to play with the padding in tickAxisStyle it will make the clickable area bigger.

And for the ticklabels, you have all the available style options of Text (in React Native), that you can put inside tickAxisTextStyle

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/hugohow/react-native-touchable-graph/issues/10?email_source=notifications&email_token=AF3VS6CJCWXOAHUAL7GJH3TP3IHWXA5CNFSM4HZFSVMKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODYBQTJI#issuecomment-503515557, or mute the thread https://github.com/notifications/unsubscribe-auth/AF3VS6DKRNE4PYZ2R3CEQZ3P3IHWXANCNFSM4HZFSVMA .