Chart

【C#】Chart グラフの線と背景に色を付ける方法

はじめに

Chartコントロールで「系列の線(Series)」「グラフの背景」に色を付ける方法をご紹介します。

こんなことに使える
  • デフォルトの線の色を変えて見やすくする
  • グラフの背景色を変えて、DarkModeっぽいグラフを作る

環境

環境バージョンなど備考
VisualStudio   2019 Community 2017でも使用できます
.NET4.7.2
プロジェクトFormアプリケーション(.NET Framework) 
OSWindows10

実行結果

後述する「系列の線とグラフの背景色を変える」コードの実行結果 です。

Chartコントロールの系列の線・グラフの背景色を変えるコードの実行結果
系列の線・グラフの背景色を変えるコードの実行結果

全体コード

Chartコントロールの「系列の線とグラフの背景色を変える」コードは以下の通りです。ポイントとなる部分を「コードのポイント」で詳しく解説します。

※ DarkMode風にするため、「Form全体の背景色」も変更しています。

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

// Chartクラスの宣言を簡略化するために
// Usingを追加しています
using System.Windows.Forms.DataVisualization.Charting;

namespace FormChart8_Color
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();

            // FormにChartコントロール(chart1)を
            // 貼り付け済みであることを前提にしています。

            // サンプル用のデータです。 
            double[] pointX = { 1.0, 2.0, 3.0, 4.0, 5.0 };
            double[] pointY = { 1.0, 1.5, 1.1, 2.0, 1.8 };

            //
            // 貼り付けたChartコントロールには
            // 初期値のデータがセットされているので、一旦クリアします
            //
            chart1.ChartAreas.Clear();
            chart1.Series.Clear();

            // 「chartArea」という名前のエリアを生成します
            ChartArea chartAria = new ChartArea("chartArea");
            
            // 生成したエリアをChartコントロールに追加します。
            chart1.ChartAreas.Add(chartAria);

            // Series(系列)を生成します
            Series series = new Series();

            // 系列の種類を折れ線グラフ(Line)に設定します
            series.ChartType = SeriesChartType.Line;

            // 系列の凡例を設置します
            series.LegendText = "凡例1";

            // 系列の線の太さを設定します
            series.BorderWidth = 3;

            // 系列の線の色を設定します
            series.Color = Color.Blue;

            // 系列のポイント情報をセットします
            for (int i = 0; i < 5; i++)
            {
                series.Points.AddXY(pointX[i], pointY[i]);
            }
            // 生成・設定した系列をChartコントロールに追加します
            chart1.Series.Add(series);

            // グラフの背景の色を変更します
            chart1.ChartAreas["chartArea"].BackColor = Color.Gray;

            // グラフコントロール全体の色を変更します
            chart1.BackColor = Color.DimGray;

            // Form全体の背景色を変更します
            this.BackColor = Color.DimGray;

        }
    }
}

コードのポイント

系列の線の色を変える

以下で系列(Series)の線の色を変えています。SeriesのColorプロパティに色を設定するのみで変更できます。(見やすさのために線の太さも変更しています)

            // 系列の線の太さを設定します
            series.BorderWidth = 3;

            // 系列の線の色を設定します
            series.Color = Color.Blue;

グラフの背景色を変える

以下の部分でグラフエリアの背景色を変更しています。グラフを表示するChartAreaのBackColorプロパティに対して色を設定してください。

            // グラフの背景の色を変更します
            chart1.ChartAreas["chartArea"].BackColor = Color.Gray;

Form全体の背景色を変える

Formのデフォルトの背景色が明るい色であるため、Chartコントロールの貼り付け方によっては、以下の画像のように縁が残る場合があります。

Formの背景色を設定しない場合の実行画面
Formの背景色を設定しない場合の実行画面

Formの縁を消したい(同系の色にしたい)場合は、以下のように、FormのBackColorも変更してみてください。

            // Form全体の背景色を変更します
            this.BackColor = Color.DimGray;

色の名称

Colorの種類については以下のMicrosoft公式ページをご覧ください。

まとめ

Chartコントロールで「系列の線(Series)」「背景」に色を付ける方法をご紹介しました。参考になればうれしいです。

お知らせ

\ C#でFormアプリを作りたい方へ /

「もっとFormアプリの作ってみたい」という方には、こちらの本をおすすめします。

「買ってきた素材(Controll)をそのまま並べる」「簡単な手順(コード)で作る」など、作るコードの内容がイメージしやすく、実行画面を見た上で話が進むため「最終的に何ができるのか?」イメージしつつ、ストレスなく読み進むことができます。

イラスト多めなので、文字が苦手な方も安心です。

Chartコントロール その他の情報

このブログでは、色の設定以外にもChartコントロールの使い方について解説しています。興味のある方は以下の内容も是非ご覧ください。

凡例の非表示

軸のラベルの設定方法

質問・要望 大歓迎です

「こんな解説記事作って」「こんなことがしたいけど、〇〇で困ってる」など、コメント欄で教えてください。 質問・要望に、中の人ができる限り対応します。

使えたよ・設定できたよの一言コメントも大歓迎。気軽に足跡を残してみてください。記事を紹介したい方はブログ、SNSにバシバシ貼ってもらってOKです。

ABOUT ME
えす
現役のソフトウェアエンジニアです。 C++ C# Python を使ってます。10年ちょい設計/開発部門にいましたが、今はQAエンジニアっぽいことをしています。

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です