margelo/react-native-graph

これは何？

主な機能

• 01Skiaで描画する折れ線グラフ。滑らかな線を描く三次ベジェ曲線に対応。
• 02データセット間の切り替えをアニメーション表示。UIスレッド上で実行。
• 03長押ししながらパンして点をスクラブでき、選択時のコールバックにも対応。
• 04リスト内に多数のグラフを軽量に表示できる静的レンダラー。
• 05選択ドット、終点インジケーター、上下の軸ラベルをカスタマイズ可能。
• 06特定の期間や値のスケールを表示するため、x軸とy軸の範囲を任意で固定可能。

ユースケース

• 暗号資産ウォレットや取引アプリで、トークンや資産の価格推移を表示する。
• React Nativeアプリで、株価やポートフォリオのパフォーマンスチャートを表示する。
• スクロール可能なリスト内に、スパークライン風の小さなグラフを多数表示する。
• チャート上をドラッグするとラベルが更新される、インタラクティブな価格スクラブを追加する。

クイックスタート

1. 1

   peer dependencies の Reanimated、Gesture Handler、Skia をインストールします

   yarn add react-native-reanimated
2. 2

   react-native-graph をインストールします

   yarn add react-native-graph
3. 3

   GraphPoint 配列と color prop を指定して LineGraph コンポーネントを描画します

使う前に知っておきたいこと

• !Reanimated、Gesture Handler、Skia を併せてインストールする必要があります。
• !パンジェスチャー、ラベル、選択ドット、グラデーション塗りつぶしは、animated を true に設定した場合にのみ機能します。
• !グラフはデータを取得しません。ポイントは自分で渡す必要があります。
• !x 軸ではカテゴリを表す文字列値はサポートされていません。

トピック

よくある質問

react-native-graph とは？

Skiaを使ったReact Native向けの折れ線グラフコンポーネント。アニメーション、三次ベジェ曲線、タッチ操作によるスクラブに対応。 react-native-graphは、Skia 2Dグラフィックスエンジンで描画するReact Native向けの折れ線グラフコンポーネントです。滑らかな三次ベジェ曲線を描画し、データセット間のアニメーション付き切り替えに対応しています。アニメーションはUIスレッド上で実行され、最大120 FPSで動作します。

react-native-graph は無料で使えますか？ライセンスは？

react-native-graph は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

react-native-graph は今もメンテナンスされていますか？

活発にメンテナンス中。react-native-graph の最終コミットは 2026年10月13日 です。

react-native-graph は何に使えますか？

暗号資産ウォレットや取引アプリで、トークンや資産の価格推移を表示する。 React Nativeアプリで、株価やポートフォリオのパフォーマンスチャートを表示する。 スクロール可能なリスト内に、スパークライン風の小さなグラフを多数表示する。 チャート上をドラッグするとラベルが更新される、インタラクティブな価格スクラブを追加する。

react-native-graph のインストール方法は？

peer dependencies の Reanimated、Gesture Handler、Skia をインストールします: yarn add react-native-reanimated react-native-graph をインストールします: yarn add react-native-graph GraphPoint 配列と color prop を指定して LineGraph コンポーネントを描画します

react-native-graph はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/margelo/react-native-graph