0
307
ViewsPersonalice las etiquetas y los colores del gráfico de barras ReChart para cada barra
Tengo un gráfico de barras de recarga en el que me gustaría tener las etiquetas como esta... 
Y quiero que los colores sean así... 
El problema es que no puedo conseguir los dos al mismo tiempo. La segunda imagen es lo más cercano que puedo obtener, pero trae el valor en lugar del nombre, por lo tanto, el int (85) en lugar de la cadena (85%) y tampoco son ángulos.
Aquí está mi código. Comenté la parte que permite etiquetas en ángulo porque no funcionará cuando esté allí.
import { BarChart, Bar, LabelList, Cell } from "recharts"; import { colors } from "../../Colors/colors"; const data = [ { name: `${85}%`, uv: 85, }, { name: `${95}%`, uv: 95, }, { name: `${80}%`, uv: 80, }, ]; export default function MyBarChart(): JSX.Element { return ( <BarChart width={150} height={400} data={data}> <Bar dataKey="uv" fill={colors.blueTheme[0]} radius={8} label={{ position: "insideBottom", fill: "black" }} name="name" > {/* <LabelList dataKey="name" position="insideBottom" angle={270} offset={25} /> */} {colors.blueTheme.map((entry, index) => ( <Cell key={`cell-${index}`} fill={colors.blueTheme[index % 20]} /> ))} </Bar> </BarChart> ); }Los colores.tsx
export const colors = { blueTheme: ["#85A5FF", "#ADC6FF", "#D6E4FF"], };¿Cómo puedo obtener las etiquetas en ángulo con las diferencias de color simultáneamente?
2 answers
Answer question0
Me lo imaginé...
<BarChart width={150} height={400} data={data}> <Bar dataKey="uv" radius={8}> <LabelList dataKey="name" position="insideBottom" angle={270} offset={25} fill="black" /> {colors.blueTheme.map((entry, index) => ( <Cell key={`cell-${index}`} fill={colors.blueTheme[index % 20]} /> ))} </Bar> </BarChart>0
Si actualiza los data y agrega el color que debe tener cada barra, de la siguiente manera:
const data = [ { name: `${85}%`, uv: 85, color: "#85A5FF" // you may pass a value directly as string }, { name: `${95}%`, uv: 95, color: colors.blueTheme[1] // or colors.blueTheme by index }, { name: `${80}%`, uv: 80, color: colors.blueTheme[getIndex()] // or some custom logic to evaluate index }, ];Puede actualizar el código de la siguiente manera y funcionará:
export default function MyBarChart(): JSX.Element { return ( <BarChart width={300} height={400} data={data}> <Bar dataKey="uv" fill="#85A5FF" radius={8} label={{ position: "insideBottom", angle: -60, fill: "black", offset: 25 }} > <LabelList dataKey="name" /> {data.map((entry, index) => ( <Cell fill={entry.color} key={`cell-${index}`} /> ))} </Bar> </BarChart> ); }Ejemplo de trabajo: https://codesandbox.io/embed/bar-chart-with-customized-event-forked-4ygf7i?fontsize=14&hidenavigation=1&theme=dark