Recharts x축에 시작 시간과 마지막 시간 표시하기!
x축의 나뉘어진 칸?을 tick으로 설정해주는 건데 자꾸 마지막 시간만 표시되고 시작 시간이 표시되지 않는 것이였다.
그래서 어렵게 돌고 돌아서… CustomizedAxisTick으로 커스터 마이즈 해서 틱을 만들었는데, 이번에는 (0,0)지점에 x의 첫 시간이 나오는게 아니고 어느정도 띄어서 나오는 것이였다. 그래서 아 이건 css 마진의 문제인가도 고민해보고 생각해 봤는데,
다시 문서를 읽어보니 이렇게 선명히 적혀있음. 뚜 렷 이..
-
interval“preserveStart” | “preserveEnd” | “preserveStartEnd” | “equidistantPreserveStart” | Number
If set 0, all the ticks will be shown. If set preserveStart”, “preserveEnd” or “preserveStartEnd”, the ticks which is to be shown or hidden will be calculated automatically.
DEFAULT: ‘preserveEnd’
위의 default값으로 표기가 되어 있던 것이다.
그래서 만들어진 내 코드 일부
<ResponsiveContainer width="100%" height="100%">
{isLoading ? (
<></>
) :
realtimeHistory ? (
<AreaChart data={data} margin={{top: 10, right: 45, left: 0, bottom: 0}}>
<XAxis dataKey="time" type="category"
domain={['dataMin', 'dataMax']}
interval={'preserveStartEnd'}
// tick={<CustomizedAxisTick data={data}/>}
/>
<YAxis/>
<Tooltip
formatter={(value, name, props) => {
const visitors = props.payload.visitors;
const time = props.payload.time;
return `${visitors}, time: ${time}`;
}}
/>
<Area type="monotone" dataKey="visitors" stroke="#8884d8" fill="#8884d8"/>
</AreaChart>
) : (
<div>No data available</div>
)
}
</ResponsiveContainer>
커스텀으로 만든거 아까워서 일단 파일은 놔둠…
하.. 문서 잘 읽고 뒤지자 ^^*