# Figmaで様々なグラフ・チャートが作れて、詳細な見た目の設定もできるプラグイン「Chart」

URL: https://webrandum.net/figma-plugin-chart/
公開日: 2022-04-18
更新日: 2022-04-18
カテゴリー: デザイン
タグ: Figma, Figmaプラグイン
出典: Webrandum（著者: サイトウ マサカズ）

Figmaでグラフ・チャートをつくるとなると少し面倒です。

今回はFigma上で入力したデータをもとにグラフ・チャートを作成できるプラグインの「Chart」についてまとめておきます。

## Chart

![Chart](https://webrandum.net/mskz/wp-content/uploads/2022/04/image_1-8-scaled.jpg)

[![](https://www.google.com/s2/favicons?domain=www.figma.com)Figma![](https://s.wordpress.com/mshots/v1/https%3A%2F%2Fwww.figma.com%2Fcommunity%2Fplugin%2F734590934750866002%2FChart?w=160)Figmahttps://www.figma.com/community/plugin/734590934750866002/ChartFigma Community plugin — Chart is a plugin for Figma that uses real or random data to create the most popular charts. Chart supports copy-paste from editors like Excel, Numbers, Google Sheets, live connection with Google Sheets and remote JSON (REST API), local CSV and JSON files.Key features:— 16 types of charts out-...](https://www.figma.com/community/plugin/734590934750866002/Chart)

Figmaでチャートを作成できるプラグインで、下記のようにデータをもとにして作成します。

- 入力したデータをもとに作成する

- Google Spreadsheetのデータをもとに作成する

- CSVファイルやJSONファイルのデータをもとに作成する

- ランダムなデータで作成する

作成できるチャートの種類は無料版だと2種類しかありませんが、有料版にすることで残りの14種類が使えるようになります。

- Line chart（無料版）：折れ線グラフ

- Area chart（無料版）：面グラフ

- Pie chart：円グラフ

- Donut chart：ドーナツグラフ

- Sparkline：スパークライン

- Stream graph：ストリームグラフ

- Candlestick：ローソク足チャート

- Stacked area chart：積層型エリアグラフ

- Vertical bar chart：棒グラフ

- Horizontal bar chart：水平棒グラフ

- Grouped bar chart：グループバーチャート

- Progress bar：プログレスバー

- Scatter plot：散布図

## 基本的な使い方

メニューバーの［Plugins］→［Chart］→［Create chart］を選択するとパネルが表示されるので、必要な情報を入力してグラフの作成をします。

［Data］タブではデータの設定、［Style］タブでは見た目の設定をして、サイドバーで作成したいグラフの種類を選択します。

![Chartパネル](https://webrandum.net/mskz/wp-content/uploads/2022/04/image_2-13.png)

「Show preview」でプレビューを表示できて、問題なければ「Create chart」でアートボード上に追加できます。

### Data：データの設定

まずは作成するチャートのデータを設定します。

タブが［Random（ランダム）］［Table（入力・CSV）］［JSON］の3種類があり、使用したい方法を選択します。

#### Random

［Random］ではデータをランダムに生成します。

![Chartパネル](https://webrandum.net/mskz/wp-content/uploads/2022/04/image_2-13.png)

| 項目 | 内容 |
| --- | --- |

| Number of lines | 線の数（縦の数）を指定する |
| --- | --- |

| Number of points | 点線の数（横の数）を指定する |
| --- | --- |

| Select data distribution | 下記5つの中から選択する Random Trend up Trend down Normal distribution Mixed |
| --- | --- |

| Min value | 最小値を指定する |
| --- | --- |

| Max value | 最大値を指定する |
| --- | --- |

#### Table

［Table］では手入力でデータを入力するか、Google SpreadsheetやCSVからデータを取り込めます。

![［Table］タブ](https://webrandum.net/mskz/wp-content/uploads/2022/04/image_4-9.png)

テーブルが表示されているので、手入力の場合はここに入力していきます。

Google Spreadsheetからインポートしたい場合は「Google Sheets」と書かれた青いリンクをクリックして「Link with Google Sheet」にSpreadsheetのリンクを入力して「Sync with GC」をクリックするとインポートできます。

![「Link with Google Sheet」](https://webrandum.net/mskz/wp-content/uploads/2022/04/image_3-12.png)

CSVをインポートしたい場合は「CSV」と書かれた青いリンクをクリックして、CSVファイルを選択するだけでインポートできます。

#### JSON

［JSON］ではJSONファイルからデータを取り込めます。

![［JSON］タブ](https://webrandum.net/mskz/wp-content/uploads/2022/04/image_6-5.png)

ネット上にあがっているJSONファイルをインポートしたい場合は、「HTTPS link」と書かれた青いリンクをクリックして、「HTTPS link to JSON」にJSONファイルのリンクを入力して「Sync JSON」をクリックするとインポートできます。

![「HTTPS link to JSON」](https://webrandum.net/mskz/wp-content/uploads/2022/04/image_7-4.png)

ローカルファイルのJSONファイルをインポートしたい場合は「Local JSON」と書かれた青いリンクをクリックして、JSONファイルを選択するだけでインポートできます。

### Style：見た目の設定

［Style］では見た目の設定ができます。

#### Colors

［Colors］タブではチャートで使用する色を設定できます。

ラベルや線の色ではなく、グラフの色（折れ線グラフの場合は折れ線の色）を選択します。

![Colors](https://webrandum.net/mskz/wp-content/uploads/2022/04/image_8-2.png)

上から順に優先して使われていくので、線の数が少ない場合は下の方の色は使われません。

各色の右に表示されている「三本線アイコン」をドラッグして並び変えられるので、それで調整しましょう。

#### Settings

［Settings］タブではグラフ全般の設定ができます。

![［Settings］](https://webrandum.net/mskz/wp-content/uploads/2022/04/image_9-2.png)

| 項目 | 設定内容 |
| --- | --- |

| Type of line | 線の種類を選択する Curved：曲線 Straight：直線 Spline：スプライン曲線 |
| --- | --- |

| Dots | ドットの種類を選択する Without dots：ドットなし Filled dots：ドットあり Unfilled dots：塗りなしのドット |
| --- | --- |

| Thickness of line, px | 線の太さを指定する |
| --- | --- |

| Diameter of dot, px | ドットの直径を指定する |
| --- | --- |

#### Labels

［Labels］ではグラフの端に表示されるラベルの設定ができます。

![［Labels］](https://webrandum.net/mskz/wp-content/uploads/2022/04/image_10.png)

| 項目 | 設定内容 |
| --- | --- |

| Labels | ラベルの表示を選択する Without labels：ラベルなし X&Y labels：X軸とY軸のラベルを表示する Y labels：Y軸のラベルを表示する X labels：X軸のラベルを表示する |
| --- | --- |

| Line height, px | 行の高さを指定する |
| --- | --- |

| Font name | フォント名を指定する |
| --- | --- |

| Letter spacing, % | 文字間を指定する |
| --- | --- |

| Font style | フォントスタイルを指定する |
| --- | --- |

| Text case | 文字ケースを選択する Original：そのまま表示 Upper case：全て大文字で表示 Lower case：全て小文字で表示 Title：最初の文字が大文字で表示 |
| --- | --- |

| Font size | 文字サイズを指定する |
| --- | --- |

| Color | 文字色を指定する |
| --- | --- |

| Data labels | データラベルの表示を選択する Show：表示 Hide：非表示 |
| --- | --- |

| Data labels font size | データラベルの文字サイズを指定する |
| --- | --- |

| Data labels color | データラベルの文字色を指定する |
| --- | --- |

| Allow overlap of data labels | データラベルの重複を許可する No：許可しない Yes：許可する |
| --- | --- |

| Rotate labels | ラベルの回転する No：回転しない Auto：ラベル幅が狭いときに自動で回転する Always：常に回転する |
| --- | --- |

| Angle | 開店時の角度を指定する |
| --- | --- |

#### Grid

［Grid］ではグラフのグリッド線の設定ができます。

![［Grid］](https://webrandum.net/mskz/wp-content/uploads/2022/04/image_11.png)

| 項目 | 設定内容 |
| --- | --- |

| Grid | グリッドの表示設定を選択する Without grid：グリッドを非表示 Full grid：グリッドを表示 Horizontal grid：水平線のみ表示 Vertical grid：垂直線のみ表示 |
| --- | --- |

| Color | グリッド線の色を指定する |
| --- | --- |

| Thickness of grid line, px | グリッド線の太さを指定する |
| --- | --- |

#### Legend

［Legend］では凡例の設定ができます。

![［Legend］](https://webrandum.net/mskz/wp-content/uploads/2022/04/image_12.png)

| 項目 | 設定内容 |
| --- | --- |

| Legend | 凡例の表示設定を選択する Without：凡例を非表示 Bottom：凡例をグラフ下に表示 Right：凡例をグラフ右に表示 |
| --- | --- |

| Font size | 凡例の文字サイズを指定する |
| --- | --- |

| Color | 凡例の文字色を指定する |
| --- | --- |