indiespirit / react-native-chart-kit

📊React Native Chart Kit: Line Chart, Bezier Line Chart, Progress Ring, Bar chart, Pie chart, Contribution graph (heatmap)
https://expo.io/@indiespirit/react-native-chart-kit
MIT License
2.84k stars 656 forks source link

StackedBarChart doesn't render #270

Closed Panicum closed 4 years ago

Panicum commented 4 years ago

Hi, I am trying to use StackedBarChart in my app, but instead of the chart I am getting white space: image

As you can see LineChart is working correctly. I am using default example of StackedBarChart, he is a code: <StackedBarChart data={{ labels: ['Test1', 'Test2'], legend: ['L1', 'L2', 'L3'], data: [[60, 60, 60], [30, 30, 60]], barColors: ['#dfe4ea', '#ced6e0', '#a4b0be'], }} width={Dimensions.get('window').width - 16} height={220} chartConfig={{ backgroundColor: '#1cc910', backgroundGradientFrom: '#eff3ff', backgroundGradientTo: '#efefef', decimalPlaces: 2, color: (opacity = 1) =>rgba(0, 0, 0, ${opacity}), style: { borderRadius: 16, }, }} style={{ marginVertical: 8, borderRadius: 16, }} />

And it is a content of my packege.json file: { "main": "node_modules/expo/AppEntry.js", "rnpm": { "assets": [ ".assets/fonts" ] }, "scripts": { "start": "expo start", "android": "expo start --android", "ios": "expo start --ios", "web": "expo start --web", "eject": "expo eject" }, "dependencies": { "@expo/vector-icons": "latest", "@firebase/firestore": "^1.9.3", "@react-native-community/geolocation": "^2.0.2", "accordion-collapse-react-native": "^0.1.11", "braces": ">=2.3.1", "css-select": "^2.1.0", "css-tree": "^1.0.0-alpha.37", "expo": "^35.0.0", "expo-app-auth": "~7.0.0", "expo-constants": "~7.0.0", "expo-font": "~7.0.0", "expo-google-app-auth": "^7.0.0", "expo-location": "~7.0.0", "expo-permissions": "~7.0.0", "expo-secure-store": "^7.0.0", "firebase": "^7.3.0", "lodash": "^4.17.15", "mem": ">=4.0.0", "native-base": "^2.13.8", "paths-js": "^0.4.10", "random-string": "^0.2.0", "react": "16.8.3", "react-dom": "16.8.3", "react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz", "react-native-action-button": "^2.8.5", "react-native-actionsheet": "^2.4.2", "react-native-calendar-heatmap": "^0.1.3", "react-native-chart-kit": "latest", "react-native-collapsible": "^1.5.1", "react-native-gesture-handler": "~1.3.0", "react-native-maps": "latest", "react-native-paper": "^3.0.0", "react-native-reanimated": "~1.2.0", "react-native-screens": "~1.0.0-alpha.23", "react-native-sectioned-multi-select": "^0.7.2", "react-native-scrollable-tab-view": "^0.10.0", "react-native-slider": "^0.11.0", "react-native-svg": "latest", "react-native-web": "^0.11.7", "react-navigation": "^4.0.10", "ws": ">=3.3.1" }, "devDependencies": { "@openapitools/openapi-generator-cli": "^1.0.7-4.2.1", "babel-eslint": "^10.0.1", "babel-preset-expo": "^7.0.0", "eslint": "5.9.0", "eslint-plugin-babel": "5.3.0", "eslint-plugin-react": "7.11.1", "eslint-plugin-react-native": "3.5.0", "prop-types": "^15.7.2", "react-navigation-stack": "^1.9.4" }, "private": true }

Do you have any idea what could be wrong? I would be very grateful for your help

Panicum commented 4 years ago

Update to version 4.5 of react-native-chart-kit fix this issue.