Pie Chart - no labels showing

kbvanhaverbeck commented 3 years ago

I recently upgraded react-native and all of my dependencies:

System:
    OS: macOS 10.15.7
    CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
    Memory: 441.05 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 15.8.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.5.0 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.1 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.4, DriverKit 20.2, macOS 11.1, tvOS 14.3, watchOS 7.2
    Android SDK:
      API Levels: 23, 27, 28, 29
      Build Tools: 28.0.3, 29.0.2
      System Images: android-28 | Google Play Intel x86 Atom, android-30 | Google APIs Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.1 AI-201.8743.12.41.6953283
    Xcode: 12.4/12D4e - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_231 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1 
    react-native: 0.63.3 => 0.63.3 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

with the dependencies:

  "dependencies": {
    "@react-navigation/native": "^3.8.4",
    "gm-react-native-msal": "^1.0.0",
    "moment": "^2.29.1",
    "prop-types": "^15.7.2",
    "react": "16.13.1",
    "react-moment": "^1.1.1",
    "react-native": "0.63.3",
    "react-native-chart-kit": "^6.11.0",
    "react-native-elements": "^3.3.0",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-material-dropdown-v2": "^0.11.1",
    "react-native-modal": "^11.7.0",
    "react-native-paper": "^4.7.2",
    "react-native-reanimated": "^1.13.2",
    "react-native-safe-area": "^0.5.1",
    "react-native-safe-area-context": "^3.2.0",
    "react-native-safe-area-view": "^0.14.9",
    "react-native-screens": "^2.18.1",
    "react-native-svg": "^12.1.0",
    "react-native-swipeout": "^2.3.6",
    "react-native-vector-icons": "^8.1.0",
    "react-navigation": "^4.4.4",
    "react-navigation-drawer": "^2.7.0",
    "react-navigation-stack": "^2.10.4",
    "react-navigation-tabs": "^2.11.0"
  },

I have no label appearing in my chart:

const chartConfig = {
        backgroundColor: "#cccccc",
        backgroundGradientFrom: "#ffffff",
        backgroundGradientTo: "#ffffff",
        decimalPlaces: 0, // optional, defaults to 2dp
        color: (opacity = 1) => `rgba(35,113,231, ${opacity})`,
        labelColor: "#000000",
        propsForLabels: {
          fontSize: "11", 
          color: "#000"
     },
        style: {
          borderRadius: 16
        },
        propsForDots: {
                r: "6",
                strokeWidth: "2",
                stroke: "#ffa726"
              }
      };

                      <PieChart
                          data={this.state.SRStatus}
                          width={screenWidth}
                          height={220}
                          chartConfig={chartConfig}
                          accessor="count"
                          labelColor="#000"
                          hasLegend={true}
                        />

I do see the legend - but there is no label next to each marker.

OkancanCosar commented 3 years ago

name, color and count property must be found in your data

kbvanhaverbeck commented 3 years ago

@OkancanCosar - I do:

I/ReactNativeJS: 'srStatus', [ { name: 'SRstatus', count: 1, color: '#AECBF6' }, { name: 'SRstatus', count: 1, color: '#D6E5FB' }, { name: 'SRstatus', count: 1, color: '#EC9B9D' }, { name: 'SRstatus', count: 1, color: '#39B54A' }, { name: 'SRstatus', count: 1, color: '#FEC710' }, { name: 'SRstatus', count: 1, color: '#F57F20' }, { name: 'SRstatus', count: 1, color: '#F5D6D6' }, { name: 'SRstatus', count: 1, color: '#DDE7D5' }, { name: 'SRstatus', count: 1, color: '#FCF1D2' }, { name: 'Other', count: 24, color: '#B9B9B9' } ]

kumar155 commented 3 years ago

{ name: 'Other', count: 24, color: '#B9B9B9', legendFontColor: "#7F7F7F", } Object should have legendFontColor.

indiespirit / react-native-chart-kit

Pie Chart - no labels showing #491