0
251
ViewsEl gráfico de recargas de React no se está ampliando para mostrar una pequeña diferencia de valor
Así que tengo un gráfico con grandes valores que son casi todos diferentes. Por ejemplo (1024.3, 1024.1, ...). Pero el problema es que el gráfico no está ampliando esos valores para mostrar la diferencia y también las marcas en el eje Y se superponen.
El código del gráfico es:
<div className="chart"> <ResponsiveContainer width="100%" height="100%"> <LineChart width={1000} height={300} data={props.chartData.data} margin={{ top: 5, right: 30, left: 20, bottom: 0, }} > <XAxis dataKey={props.chartData.xAxis} stroke="#000000" /> <YAxis type="number" padding={{ top: 50, bottom: 30 }} ticks={props.chartData.minmaxavg.arrayMinMax} stroke="#000000" interval={0} /> <Tooltip cursor={false} /> <Legend /> <Line type="monotone" dataKey={props.chartData.value1} stroke="#000000" dot={false} /> <ReferenceLine y={props.chartData.minmaxavg.avg} stroke="white" strokeDasharray="4 4" /> <Line type="monotone" dataKey={props.chartData.value2} stroke="#6EDEFF" dot={false} /> </LineChart> </ResponsiveContainer> </div>Y el gráfico se ve así: imagen del gráfico
Me encantaría acercar esos valores para mostrar curvas y también para mostrar todos los ticks pero no superponerlos.
1 answers
Answer question0
Entonces logré que funcionara agregando dominio en el eje Y. El dominio tiene un intervalo desde el valor mínimo que estoy pasando y el valor máximo. Todavía hay un problema si desea mostrar todos los ticks porque se superponen, pero en mi caso estoy feliz de mostrar solo el tick máximo, mínimo y promedio.
Código de trabajo:
<div className="chart"> <ResponsiveContainer width="100%" height="100%"> <LineChart data={props.chartData.data} margin={{ top: 5, right: 30, left: 20, bottom: 0, }} > <XAxis dataKey={props.chartData.xAxis} stroke="#000000" /> <YAxis type="number" padding={{ top: 50, bottom: 30 }} ticks={props.chartData.minmaxavg.arrayMinMax} stroke="#000000" interval={0} domain={[props.chartData.minmaxavg.min, props.chartData.minmaxavg.max]} /> <Tooltip cursor={false} /> <Legend /> <Line type="monotone" dataKey={props.chartData.value1} stroke="#000000" dot={false} /> <ReferenceLine y={props.chartData.minmaxavg.avg} stroke="white" strokeDasharray="4 4" /> <Line type="monotone" dataKey={props.chartData.value2} stroke="#6EDEFF" dot={false} /> </LineChart> </ResponsiveContainer> </div>Imagen del gráfico final:
