構図を決める

作成していく画像のサイズはA4サイズ（595px×842px）です。
まず使うテキストを大まかに配置します。配置する際は「見出し」「主題（メインの要素）」「副題（サブの要素）」を意識します。

余白を決める

外側にどれだけ余白を取るか決めます。実際に作業を進めていくと、想定よりも余白が必要な場合・不要な場合が多々ありますが、仮で決めます。今回は64pxにしました。

グラフ部分の作成・配置

次は、グラフ部分の作成と各要素の配置をしていきます。まずは文字周りです。
フォントはNoto Sans Jpを使っていきます。下記の画像と表を参考に文字の大きさを整え配置していきます。グラフの上下には28pxの余白を取りました。

文字を配置し終えたので、グラフを作成していきます。
グラフを作成していく部分の大きさは665px×274pxです。

グラフにメモリ線を引いていきます。数値は0〜1000までを200ずつで区切っていくので、メモリ線は4本です。274を5等分にするため、間隔が55pxと54pxの箇所が出てしまいますが、偶数、かつ同じ数値で揃っているとデータとしては美しいです。
そのあとは、グラフの棒部分の作成です。今回の場合、数値が50刻みなので50/1000を表示するには縦幅が何px必要か考えます。下記は数値が500の棒を作成した場合のイメージです。

あとは、残りの棒部分を作成して並べます。棒と棒の間隔は8px、月毎の間隔は31pxです。

凡例作成

凡例部分を作成していきます。16pxの四角形から8px離してテキストを置き、りんごとバナナの凡例は20px離します。

配色

配色していきます。今回は青（#0096FA）と*補色のオレンジ（#FA6400）を使った配色です。

補色：色相環で対極に位置している色のことです。補色を使うことでメリハリのある配色をすることができます。

全体調整・完成

最後に全体を調整します。200や400のようにメモリ線上にあるはずの棒がずれていると美しくありません。下記の画像は拡大した画像です。微妙ずれている箇所は少し縮めて、または伸ばして調整します。

最後に棒の上にそれぞれの数値を配置して完成です。