# 一些 React Charts Library 的簡單使用經驗記錄

## 結論

目前用起來最順手的還是 Nivo，缺點是文件不全。

---

## List

  * [[https://github.com/recharts/recharts|Recharts]]
  * [[https://github.com/FormidableLabs/victory|Victory]]
  * [[https://github.com/airbnb/visx|visx]]
    * airbnb
    * [[https://blog.techbridge.cc/2020/10/13/datavis-visx/|使用 visx 製作資料圖表-台灣六都即時空氣品質指標]]
  * [[https://github.com/plouc/nivo|nivo]]
  * [[https://github.com/uber/react-vis|react-vis]]
    * uber
  * [[https://github.com/alibaba/BizCharts|BizCharts]]
    * alibaba
  * [[https://github.com/reactchartjs/react-chartjs-2|react-chartjs-2]]

---

## 各別記錄

### Recharts

- 案例
  - Project Lutein （後來改用 nivo）
- 遭遇到的 bug
  - 手機上會有奇怪的偵測反應，且即便開啟 container 的 `overflow: scroll` 也沒辦法改變其判定

### Victory

### vx

### nivo

  - 案例
    - Project Cherry
  - 遭遇到的 bug
    - [[https://github.com/plouc/nivo/issues/1290#issuecomment-728630376|Line Chart Breaking with NextJS after upgrading to 0.65.1]] ( `TypeError: r.willAdvance is not a function`)

### react-vis

### BizCharts

### react-chartjs-2



---

## Ref

- [[https://livecodestream.dev/post/2020-08-08-7-react-chart-libraries-for-your-web-projects/|7 React Chart Libraries For Your Web Projects]]