rechartsライブラリを使ってレスポンシブにグラフを表示してみた

こんにちわ。nap5です。

rechartsライブラリを使ってレスポンシブにグラフを表示してみたので、紹介したいと思います。

rechartsライブラリは以下になります。

https://recharts.org/en-US/

デモサイトです。

タイトル未設定

デモコードです。

Vitejs - Vite (forked) - StackBlitz

StackBlitzを使ってみましたが、一部のブラウザで見れないらしいので、codesandboxでも配備しました。

デモサイトです。

Vite App

デモコードです。

restless-architecture-ch2gxv - CodeSandbox

今回は6つのグラフをグリッドレイアウトで表示してみました。

最近では、Twitterでモックアップ動画を公開しているので、こちらもよかったら、覗いてみてください。

Tweets by napzak5

最後に、Udemyでコースを公開しました。

良かったら覗いてみてください。

https://www.udemy.com/course/count-down-up-using-javascript-animation-api/

Web標準のJavascript Animation APIを使ったインタラクティブなカウントアップダウンの作り方

また、コースの内容紹介記事は以下になります。

https://note.com/zak5/n/nfae54a10ae67

簡単ですが、以上です。