0
130
ViewsCómo cambiar el color en el BarChart
Hola, tengo este BarChart que muestra el porcentaje de algunos dadta. ¿Cómo cambiar el color de la barra si el porcentaje es < 20 en rojo, por ejemplo?
Este es mi gráfico de barras:
<BarChart //style={graphStyle} style={{marginBottom: -20}} data={this.state.chartData} width={screenWidth - 40} height={220} //yAxisLabel="$" chartConfig={this.state.chartConfig} verticalLabelRotation={30} /> <View style={{padding: 5, paddingTop: 0}}> { this.state.labels.map((obj, i) => { return ( <Text style={{fontSize: 14, marginBottom: 2.5, color: '#666'}}>{i+1}. {obj} ({this.state.chartData.datasets[0].data[i]} gallons({this.state.procent[i]}%))</Text> ) }) } </View>Esta es chartConfig:
const chartConfig = { backgroundGradientFrom: "#fff", //backgroundGradientFromOpacity: 0, backgroundGradientTo: "#fff", //backgroundGradientToOpacity: 0.5, color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`, strokeWidth: 1, // optional, default 3 barPercentage: 0.75, useShadowColorFromDataset: false // optional };¿Dónde agregar un segundo color si mi porcentaje de datos es inferior a 20?
Esta es la foto como se ve.
Y si alguien sabe que estoy haciendo una fórmula para obtener el porcentaje del gráfico de barras y el gráfico de barras espera datos para llenar la fila vertical con números, ¿cómo puedo codificarlo para que el número sea siempre 100 en la parte superior de la y?
1 answers
Answer question0
Desde la versión 6.7.0 , puede usar el accesorio withCustomBarColorFromData como se presentó con este PR .
Esto funciona de la siguiente manera:
- Establezca la propiedad
withCustomBarColorFromDataentrue - Proporcione una matriz de
colorsdentro de su objeto de datos. Hay biyección entre los índices de la matriz de colores y los índices de datos. Debe proporcionar una función que asigne la opacidad a una cadena de color.
Para tener un color personalizado si el punto de datos es inferior a 20, puede administrar un estado de colores separado que contenga todas las funciones necesarias.
Aquí hay un ejemplo mínimo.
const init = [19, 18, 25, 20, 16]; const MyBarChart = () => { const [colors, setcolors] = useState(init.map(item => (opacity = 1) => `rgba(0, 0, 0, ${opacity})`)) const [data, setData] = useState(init) React.useEffect(() => { setcolors(data.map(item => item < 20 ? (opacity = 1) => `rgba(255, 0, 0, ${opacity})` : (opacity = 1) => `rgba(0, 0, 0, ${opacity})`)) }, [data]) const dataset = { labels: ["january", "february", "march", "april", "may"], datasets: [ { data: data, colors: colors } ] } return ( <> <BarChart data={dataset} width={300} height={220} withCustomBarColorFromData={true} flatColor={true} chartConfig={{ backgroundColor: '#ffffff', backgroundGradientFrom: '#ffffff', backgroundGradientTo: '#ffffff', data: dataset.datasets, color: (opacity = 1) => '#fff', labelColor: () => '#6a6a6a', }} /> </> ); };El resultado es el siguiente.
