Hi, Thanks for an awesome library. I would be great, if you can add prop to set text f

Hi <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

Prop for text font,about abhinandan-kushwaha/react-native-gifted-charts

Comments (3)

Abhinandan-Kushwaha commented on June 1, 2024 1

Hi @deepaksinghrb 👋
The text labels along the Y-axis can be given any custom style using the yAxisTextStyle prop.

Along the X-axis, you can even pass your own custom component!

Here's an example (for styling the Y-axis labels -

<BarChart
        yAxisLabelTexts={['$0', '$250', '$500', '$750']}
        yAxisTextStyle={{color: 'red', fontSize: 11, fontStyle:'italic'}}
        data={data}/>

Hope it helps. 🤗

from react-native-gifted-charts.

Abhinandan-Kushwaha commented on June 1, 2024 1

Hi @deepaksinghrb Thanks for pointing it out.
For Pie and Donut charts, till now we didn't have any way to add custom font-family or font-weight or font-style

But, I have added these features in version "0.1.14"

Here's an example-

<PieChart
        showText
        textColor="white"
        radius={120}
        showValuesAsLabels
        fontStyle="italic"
        textSize={20}
        font="Cursive"
        fontWeight="bold"
        data={[
          {value: 54, color: '#177AD5'},
          {value: 40, color: '#79D2DE'},
          {value: 20, color: '#ED6665'},
        ]}
      />

The props - font, fontWeight, fontStyle, textSize, textColor, etc can also be passed separately to each data item.

Cheers. 🎉

from react-native-gifted-charts.

deepaksinghrb commented on June 1, 2024

@Abhinandan-Kushwaha What about Pie Chart?

I'am using something like below:

<PieChart data = {[
   {value: 20, color: '#003E9C', text: 'tag', textColor: 'white', textSize: 16, shiftTextY: -20, shiftTextX: -10},
   {value: 30, color: '#A14E00', text: 'someTag', textColor: 'white', textSize: 16, shiftTextY: -30, shiftTextX: -10},
   {value: 25, color: '#9C0000', text: 'someTag', textColor: 'white', textSize: 16, shiftTextX: 10},
   {value: 25, color: '#B51CA5', text: 'someTag', textColor: 'white', textSize: 16, shiftTextX: -10},
  ]}
   donut
   showText
   radius={150}
   innerRadius={60}
/>

Do we have textStyle for this as well?

from react-native-gifted-charts.

Recommend Projects