Open rafaeelrf opened 4 years ago
I would like to give each legend on a Progress Chart a different color. How can this be done?
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.
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.
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?
@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 (
); }`
@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>
);
}
@avnikakkar, I no longer have an example to share. I switched from react-native-chart-kit
to react-native-svg-charts
.
You can define a colors array and use the index
how can we use different off colors for different bars?
Hey there, @khamisEDX Can we set a shadow around each Progress Ring?
can we displace the legends itself
I'd like to define a color for each data on Progress Ring, it's possible?