react-native-chart-kit Progress Ring Chart

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

Jun 20 '20 20:06 rafaeelrf

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

Jun 22 '20 18:06 JakinTayo

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.

Sep 02 '20 05:09 aviveershetty

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.

Jan 03 '21 20:01 dave-vazquez

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?

Feb 19 '21 04:02 avnikakkar

@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 ( <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> ); }

Mar 11 '21 13:03 edx-mohamed-khamis

@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>
  );
}

Mar 11 '21 17:03 dave-vazquez

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

Mar 11 '21 17:03 dave-vazquez

You can define a colors array and use the index