Estoy usando recargars.js en react.js con el componente funcional. El resultado esperado es obtener el mismo espacio entre 20-50 , 50-80 , 80-100 por ciento como se muestra en la imagen a continuación:

Es posible que haya notado que el espacio entre cada marca es igual. Pero en mi caso, obtengo el resultado en mi navegador como este:

Dígame cómo puedo lograr lo mismo. Mi código está aquí abajo:

activity.json file

 [ { "day" : "Sat", "level": 70 }, { "day" : "Sun", "level": 50 }, { "day" : "Mon", "level": 82 }, { "day" : "Tue", "level": 80 }, { "day" : "Wed", "level": 70 }, { "day" : "Thu", "level": 90 }, { "day" : "Fri", "level": 100 } ]

chart.js file

 import activity from "../../activity.json"; <ResponsiveContainer width="100%" height={170}> <AreaChart data={activity}> <defs> <linearGradient id="color" x1="0" x2="0" y1="0" y2="1"> <stop offset="0%" stopColor="#4DC591" stopOpacity="0.4"></stop> <stop offset="90%" stopColor="#4DC591" stopOpacity="0.05"></stop> </linearGradient> </defs> <Area type="monotone" dataKey="level" stroke="#4DC591" fill="url(#color)" /> <XAxis dataKey="day" axisLine={false} tickLine={false} minTickGap={20} /> <YAxis dx={-17} dataKey="level" axisLine={false} tickLine={false} ticks={[20 , 50 , 80 , 100]} tickFormatter={(number) => {return number + "%"}} interval={0} domain={[20, 'dataMax']} /> <Tooltip /> <CartesianGrid vertical={false} opacity={0.4} strokeDasharray="3 3" /> </AreaChart> </ResponsiveContainer>