Progress Ring Chart - Githubissues

rafaeelrf commented 4 years ago

I'd like to define a color for each data on Progress Ring, it's possible?

JakinTayo commented 4 years ago

I would like to give each legend on a Progress Chart a different color. How can this be done?

aviveershetty commented 4 years ago

Hi did anyone find a resolution for this? This is a very fine library with everything in place except that am stuck with this one issue before production of my application. Any help would be appreciated! Thanks in advance.

dave-vazquez commented 3 years ago

const data = {
    data: [0.4, 0.2, .09, 0.8],
    colors: ["red", "blue", "green", "yellow"],
  };

Obviously, use hex colors but this is the way to do it.

avnikakkar commented 3 years ago

const data = {
    data: [0.4, 0.2, .09, 0.8],
    colors: ["red", "blue", "green", "yellow"],
  };
Obviously, use hex colors but this is the way to do it.

Hey! Tried this and it won't change the colors at all, any advice on integrating this with the color component in chartConfig?

edx-mohamed-khamis commented 3 years ago

@avnikakkar Hey there, if you are still struggling use this example `export default function ProgressRing() { const screenWidth = Dimensions.get('window').width; const {colors} = useTheme(); const data: ProgressChartData = { labels: ['Web servers', 'Operating systems', 'Programming languages' , 'JavaScript' , 'Web Frameworks'], // optional data: [0.2, 0.6, 0.8 , 0.1 , 0.25], colors: [ 'rgba(255, 0, 0,0.5)', 'rgba(238, 130, 238,0.6)', 'rgba(106, 90, 205,0.5)', 'rgba(60, 179, 113,0.2)', 'rgba(255, 172, 71 , 0.3)' ], }; return (

`rgba(0,0,0,${opacity})`, }} style={{ marginVertical: 8, borderRadius:10, }} />

); }`

dave-vazquez commented 3 years ago

@avnikakkar Hey there, if you are still struggling use this example

that format was killing me...


export default function ProgressRing() {
  const screenWidth = Dimensions.get("window").width;
  const { colors } = useTheme();
  const data = {
    labels: [
      "Web servers",
      "Operating systems",
      "Programming languages",
      "JavaScript",
      "Web Frameworks",
    ], // optional
    data: [0.2, 0.6, 0.8, 0.1, 0.25],
    colors: [
      "rgba(255, 0, 0,0.5)",
      "rgba(238, 130, 238,0.6)",
      "rgba(106, 90, 205,0.5)",
      "rgba(60, 179, 113,0.2)",
      "rgba(255, 172, 71 , 0.3)",
    ],
  };
  return (
    <View>
      <ProgressChart
        data={data}
        width={Dimensions.get("window").width - 10}
        height={170}
        strokeWidth={7}
        hasLegend={true}
        withCustomBarColorFromData={true}
        radius={35}
        chartConfig={{
          backgroundGradientFromOpacity: 0.5,
          backgroundGradientToOpacity: 1,
          backgroundColor: colors.surface,
          backgroundGradientFrom: colors.surface,
          backgroundGradientTo: colors.surface,
          propsForLabels: { fill: colors.text },
          decimalPlaces: 2,
          color: (opacity = 1, _index) => `rgba(0,0,0,${opacity})`,
        }}
        style={{ marginVertical: 8, borderRadius: 10 }}
      />
    </View>
  );
}

dave-vazquez commented 3 years ago

@avnikakkar, I no longer have an example to share. I switched from react-native-chart-kit to react-native-svg-charts.