Power BI 縦棒グラフで文字を傾けない

# はじめに
縦棒グラフで 軸ラベルが傾いてしまうことはありませんか？
![傾いたグラフ_赤線付き.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239983/f07c7f59-4f2e-c187-87d2-fe0a7631debd.png)
文字を水平から傾ける毎に文字の認識に要する時間が伸びていくという研究があり、
45°で最大52%、90°で205%多くの時間がかかるそうです。
つまり**文字を傾けるほど伝わりにくい**のです！

詳しくはこちら　⇒　[データ視覚化のデザイン #1｜Go Ando](https://note.mu/goando/n/neb6ea35f1da3)
[![データ視覚化のデザイン#1_軸ラベルを傾けない.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239983/c0117558-550e-94a5-4b8b-5f7550f0efef.png)](https://note.mu/goando/n/neb6ea35f1da3)

この記事は文字を傾けないようにするヒントを紹介します。

# 軸ラベルを傾けないために
## １．横にする
いきなり前提を覆すようですが、
グラフそのものを横向きにすれば**軸ラベルも横書き**になり、すべてが解決します。
### 横棒グラフ
![横棒グラフ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239983/3fd2e7f5-ae5b-9642-8d73-e22de4791399.png)
### テーブル
データバーを表示すると、横棒と似たイメージになります。
軸ラベルは左･右･中央揃えを選べます。
![横棒グラフ_テーブルデータバー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239983/17893a72-ad7b-8e26-35a2-23e73192b619.png)
### Horizontal bar chart ビジュアル
横にしても軸ラベルが長いとか、グラフとのバランスが悪い場合は、[Horizontal bar chart(カスタムビジュアル)](https://appsource.microsoft.com/ja/product/power-bi-visuals/WA104381230)を使うと
棒の中に納まるので、あまり気にならなくなります。
![横棒グラフ_棒中にラベル.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239983/e866d608-0042-144c-d77d-f97c8d5d4c7f.png)
### おまけ
人は広告やWEBページを見る時に、視線が Z字 や F字 のように移動するそうです。
つまり横棒グラフの場合、まず一番上の軸ラベルが目に入り、次にその値に視線が移動する ということです。

そのため横棒グラフを選ぶことで、
値が最大である、おそらく**一番見せたいデータが自然に伝わる**ことが期待できます。
![Zの法則、Fの法則.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239983/c02a17fd-f1d8-844f-8d43-f4f1ee10a175.png)
### ▲横にしない方が良い場合
グラフよっては縦棒の方が好ましいケースがあるのですが、

それは**軸が時系列**の場合で、例えば年とか日、秒などです。
時間の経過による値の推移を表すときは、
左から右に進むにつれて時が経過するのが一般的であるため、縦棒(または折れ線)を選ぶのが無難です。
![軸が時系列のグラフ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239983/a9156940-0eaf-731c-12a6-07dce59a4dcd.png)

## ２．省略して幅を縮める
一番単純なやり方ですが、
文字数を減らして横幅を縮めると、文字を傾けなくても収まるようになります。
　2019年5月　⇒　19年05月
　2019年5月　⇒　'19-05
　5月1日(水)　⇒　05/01水

### ▲フォントサイズは縮小しない
文字サイズを小さくすると全体の横幅は縮まるかもしれませんが、
いろんな文字サイズが混在して、見る人の負担が増える上に、
老眼の方にはツライので個人的にはあまりオススメしません。。。

## ３．棒と棒の間隔を広げる
(2019/5/28:追記 コメント欄の内容を反映しました)
X軸プロパティの カテゴリの最小値 を大きくすると、棒と棒の間隔が広がり、軸ラベルが水平に表示されます。
![パディング調整１と２.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239983/74c9e7a9-686d-c997-c764-e94598144807.png)
ちなみに見ての通り、棒の太さも横に広がります。
これがバランス悪く感じるときは、内側のパディング を大きくすると細くなるので お好みの太さに調整してください。
![パディング調整３.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239983/48ff3e5e-6837-bab6-bda2-1bb91b1c6866.png)

## ４．折り返して幅を縮める（２段にする）
エクセルで文字がセルからはみ出す場合、よく**折り返して全体を表示**すると思います。
これと同じことをPower BIでやってみます。
### ４－１．X軸ラベルの連結をオフにする
(2019/5/28:追記 コメント欄の内容を反映しました)
X軸に項目を２つ以上設定するときに使います。
ドリルダウンして両方を表示させた後
![ラベルの連結オフ１.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239983/834fadbb-72da-2762-c9a2-42df76d246af.png)
X軸プロパティのラベルの連結をオフにします。
![ラベルの連結オフ２＿２.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239983/f2d25164-a44d-4f73-3170-fd3de0375397.png)

`YY年`と`MM月`の連結が外れて2段になり、YY年はまとまって表示されます。
もしプロパティを切り替えても連結されたままだったら、一度並び替えすると反映されます。
![ラベルの連結オフ３.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239983/63afd54e-cdaf-d859-2811-b5d8f5dfd738.png)

### ４－２．Small Multipleにする
いくつかのグループに規則的に分かれる場合、
Small Multipleなビジュアルにする方法もあります。
![SmallMultioleで収めたグラフ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239983/cebaad7c-8b1a-8f4a-1656-e6b31ebf4fde.png)
Small Multipleは[コレ](https://appsource.microsoft.com/ja/product/power-bi-visuals/WA104380898)とか[コレ](https://appsource.microsoft.com/ja/product/power-bi-visuals/WA104381825)をどうぞ。

### ４－３．軸ラベルの中に空白を入れる
軸の項目が1つだけの場合（ドリルダウンしない場合）の対処法です。
Power BIでは半角スペースを区切り文字と見なして、2段に改行してくれるようです。
![折り返して収めたグラフ_解説付き.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239983/d75e22b6-321c-0192-b171-93cf918741ee.png)


<font color="LightGray">*【ひとりごと】そもそも縦書きと横書きを選べたらいいのに・・・。*</font>
# あとがき
ほとんどのグラフは、見れば誰でも描かれている情報を読めると思います。
でも、読めるけど…なんとなく見にくい、すんなり理解できない、
なんて感じることはありませんか？
それはもしかしたらグラフをちょこっと変えるだけで改善する…かもしれません。

以上、最後までお読みいただきありがとうざいました。
他にも軸を傾けないやり方を知っている方はコメント欄にお願いします！！

## 参考資料
[データ視覚化のデザイン #1｜Go Ando](https://note.mu/goando/n/neb6ea35f1da3)