In React native with library react-native-chart-kit fonts are not working

Viewed 46

using the library react-native-chart-kit but fonts not working with this library

code below used for line chart

using fontFamily "Montserrat-Regular"

  <LineChart
              data={{
                labels: [`10 Jun`,'11 Jun','12 Jun','13 Jun','14 Jun'],
                datasets: [{data: [5, 10, 7, 20, 8, 30]}],    
               // legend: ['Time spent on your programs'],
              }}
              width={Dimensions.get('window').width / 1.1} // from react-native
              height={200}
              yAxisSuffix="h"
              withDots={false}
              withShadow={false}
              withHorizontalLines={false}
              chartConfig={{
                fontFamily: "Montserrat-Regular",
                backgroundColor: 'black',
                backgroundGradientFrom: colors.textColor,
                backgroundGradientTo: colors.textColor,
                color: (opacity = 1) => `rgba(255, 255, 255, 0.5)`,
                labelColor: (opacity = 1) => `rgba(255, 255, 255,0.4)`,
                decimalPlaces: 0,
                propsForDots: {
                  r: '6',
                  strokeWidth: '2',
                  stroke: '#fffff',
                },
              }}
              style={{
                marginVertical: 8,
                marginTop:30,
                borderRadius: 16,
                fontFamily:"Montserrat-Regular"
              }}
            />
1 Answers

Issue is resolved by using the props

propsForLabels:{fontFamily:"Montserrat-Regular" }

 <LineChart
              data={{
                labels: [`10 Jun`,'11 Jun','12 Jun','13 Jun','14 Jun'],
                datasets: [{data: [5, 10, 7, 20, 8, 30]}],    
               // legend: ['Time spent on your programs'],
              }}
              width={Dimensions.get('window').width / 1.1} // from react-native
              height={200}
              yAxisSuffix="h"
              withDots={false}
              withShadow={false}
              withHorizontalLines={false}
              chartConfig={{
                **propsForLabels:{fontFamily:"Montserrat-Regular"}**
                backgroundColor: 'black',
                backgroundGradientFrom: colors.textColor,
                backgroundGradientTo: colors.textColor,
                color: (opacity = 1) => `rgba(255, 255, 255, 0.5)`,
                labelColor: (opacity = 1) => `rgba(255, 255,255,0.4)`,
                decimalPlaces: 0,
                propsForDots: {
                  r: '6',
                  strokeWidth: '2',
                  stroke: '#fffff',
                },
              }}
              style={{
                marginVertical: 8,
                marginTop:30,
                borderRadius: 16,
                fontFamily:"Montserrat-Regular"
              }}
            />
Related