[hyorimcho] 시계열 차트, 호버기능 구현

[hyorimcho]

구현 사항

📊 시계열 차트 만들기

• [x] 주어진 JSON 데이터의 key값(시간)을 기반으로 시계열 차트를 만들어주세요
• [x] 하나의 차트안에 Area 형태의 그래프와 Bar 형태의 그래프가 모두 존재하는 복합 그래프로 만들어주세요
• [x] Area 그래프의 기준값은 value_area 값을 이용해주세요
• [x] Bar 그래프의 기준값은 value_bar 값을 이용해주세요
• [x] 차트의 Y축에 대략적인 수치를 표현해주세요

  🖱 호버 기능 구현

• [x] 특정 데이터 구역에 마우스 호버시 id, value_area, value_bar 데이터를 툴팁 형태로 제공해주세요

참고 사항

• 스타일링은 사전에 미리 협의가 되지 않아 우선 css 파일을 만들어 사용했습니다.

  라이브러리 선정 이유

• 저는 recharts 를 사용해서 시계열 차트를 구현했습니다.
• 처음 차트를 만들어 보는 것이기에 많은 예제가 있는 라이브러리를 사용하는 편이 좋다고 생각했습니다.
• 또한 구현 사항이었던 툴팁에 대해서도 다른 라이브러리에 비해 자세한 설명이 있어 선택하게 되었습니다.

sample