C# Chartコントロールでグラフを描画する方法|折れ線・棒グラフをサンプルコード付きで解説
はじめに
C#で業務アプリやデスクトップアプリを作っていると、「売上推移を折れ線グラフで表示したい」「カテゴリ別の件数を棒グラフにしたい」「CSVやデータベースの値を画面上で可視化したい」という場面がよくあります。そのようなときに使える代表的な機能が、Windows FormsのChartコントロールです。
Chartコントロールを使うと、C#のコードから折れ線グラフ、棒グラフ、円グラフ、散布図などを比較的簡単に描画できます。Visual StudioのフォームデザイナーでChartを配置して設定することもできますし、すべてコードで生成することも可能です。
この記事では、「csharp chart」「C# Chart」「C# グラフ 描画」といったキーワードで調べている方に向けて、Chartコントロールの基本構成、折れ線グラフ・棒グラフのサンプルコード、デザインのカスタマイズ、データバインド、リアルタイム更新、よくあるエラーまでまとめて解説します。
1. C# Chartコントロールでできること
1-1. Chartコントロールとは
Chartコントロールは、Windows Formsアプリケーション上にグラフを表示するためのコントロールです。名前空間は主に次のものを使用します。
C#using System.Windows.Forms.DataVisualization.Charting;
ChartクラスはWindows FormsのControlを継承したグラフ表示用コントロールで、グラフのデータを表すSeries、描画領域を表すChartArea、凡例を表すLegend、タイトルを表すTitleなどを組み合わせてグラフを作成します。Microsoftのドキュメントでも、Chartクラスの重要なプロパティとしてSeriesとChartAreasが説明されています。Microsoft Learn
たとえば、月別売上を折れ線グラフで表示したり、部署別の件数を棒グラフにしたり、カテゴリの割合を円グラフで表示したりできます。Windows Formsの画面内に直接配置できるため、業務アプリのダッシュボードや管理画面にも使いやすいのが特徴です。
1-2. 折れ線グラフ・棒グラフ・円グラフなど対応できるグラフの種類
Chartコントロールでは、SeriesChartTypeを変更することでさまざまな種類のグラフを描画できます。代表的なグラフの種類は次のとおりです。
C#series.ChartType = SeriesChartType.Line; // 折れ線グラフ
series.ChartType = SeriesChartType.Column; // 縦棒グラフ
series.ChartType = SeriesChartType.Bar; // 横棒グラフ
series.ChartType = SeriesChartType.Pie; // 円グラフ
series.ChartType = SeriesChartType.Point; // 散布図
series.ChartType = SeriesChartType.Area; // 面グラフ
折れ線グラフは時系列データの推移、棒グラフはカテゴリ別の比較、円グラフは割合の表示、散布図は2つの数値の関係を確認する用途に向いています。
1-3. C#でグラフ描画したい検索ユーザーの主な目的
C#でChartを調べている方の目的は、主に次のようなものです。
「C#で折れ線グラフを表示したい」「Windows Formsで棒グラフを作りたい」「CSVファイルのデータをグラフ化したい」「データベースの集計結果をChartに表示したい」「Timerでリアルタイムグラフを作りたい」「Chartコントロールが表示されないエラーを解決したい」などです。
Chartコントロールは、簡単な可視化であれば少ないコードで実装できます。一方で、.NETのバージョンやプロジェクトの種類によって参照方法が変わるため、最初の環境設定でつまずくケースもあります。
1-4. Chartコントロールを使うメリットと注意点
Chartコントロールのメリットは、Windows Formsアプリに組み込みやすく、折れ線・棒・円・散布図など基本的なグラフをすぐに表示できることです。フォームデザイナーから配置できるため、画面レイアウトを確認しながら開発できます。
一方で注意点もあります。特に.NET Framework向けのWindows Formsでは使いやすい一方、.NET 6以降のモダンなWinFormsプロジェクトでは、標準機能として同じ感覚で使えない場合があります。Microsoftのdotnet/winforms-datavisualizationリポジトリでは、System.Windows.Forms.DataVisualizationは非推奨であり、.NET Core 3への移植を容易にする目的で提供されたもので、今後このコンポーネントに新機能を追加しない旨が説明されています。GitHub
そのため、既存の.NET Framework業務アプリではChartコントロールが便利ですが、新規開発で長期運用や高機能なグラフが必要な場合は、ScottPlot、LiveCharts、OxyPlotなどのライブラリも候補に入れるとよいでしょう。
2. C# Chartコントロールを使うための準備
2-1. 開発環境と対応する.NET Framework・Windows Formsの確認
Chartコントロールを使う場合、まずプロジェクトの種類を確認します。もっとも扱いやすいのは、Visual Studioで作成する「Windows フォーム アプリケーション(.NET Framework)」です。
.NET Framework 4.x系のWindows Formsプロジェクトであれば、System.Windows.Forms.DataVisualizationを参照に追加することでChartコントロールを利用できます。
一方、「Windows Forms App」「Windows フォーム アプリ」などの.NET 6、.NET 8、.NET 10向けプロジェクトでは、環境によって標準のChartコントロールがツールボックスに出てこない場合があります。その場合は、NuGetパッケージや代替ライブラリを検討します。
学習目的や既存システムの改修であれば.NET Framework版Chartコントロールが扱いやすく、新規の.NET 6以降のアプリであれば代替ライブラリも含めて選定するのがおすすめです。
2-2. System.Windows.Forms.DataVisualizationの参照を追加する方法
.NET FrameworkのWindows FormsプロジェクトでChartを使うには、参照設定を追加します。
Visual Studioでは、次の手順で追加できます。
ソリューションエクスプローラーでプロジェクトを右クリックする
「参照の追加」を選択する
「アセンブリ」から
System.Windows.Forms.DataVisualizationを探すチェックを入れて「OK」をクリックする
コード側では次のusingを追加します。
C#using System.Windows.Forms.DataVisualization.Charting;
これでChart、ChartArea、Series、Legend、SeriesChartTypeなどのクラスを使えるようになります。
2-3. Visual StudioのツールボックスからChartを配置する方法
Visual Studioのフォームデザイナーを使う場合は、ツールボックスからChartコントロールを配置できます。
手順は次のとおりです。
Windows Formsのフォームをデザイナーで開く
ツールボックスを表示する
「データ」または「すべてのWindowsフォーム」からChartを探す
フォーム上にドラッグ&ドロップする
プロパティウィンドウで名前やサイズを設定する
たとえば、配置したChartの名前をchart1にしておくと、コードから次のように操作できます。
C#chart1.Series.Clear();
chart1.ChartAreas.Clear();
フォームデザイナーで配置する方法は、画面レイアウトを視覚的に調整しやすい点がメリットです。
2-4. コードでChartコントロールを生成する方法
Chartコントロールは、フォームデザイナーを使わずにコードだけで生成することもできます。
C#using System;
using System.Drawing;
using System.Windows.Forms;
using System.Windows.Forms.DataVisualization.Charting;
public partial class Form1 : Form
{
private Chart chart1;
public Form1()
{
InitializeComponent();
CreateChart();
}
private void CreateChart()
{
chart1 = new Chart();
chart1.Dock = DockStyle.Fill;
ChartArea chartArea = new ChartArea("MainArea");
chart1.ChartAreas.Add(chartArea);
Series series = new Series("売上");
series.ChartType = SeriesChartType.Line;
series.Points.AddXY(1, 120);
series.Points.AddXY(2, 180);
series.Points.AddXY(3, 150);
chart1.Series.Add(series);
this.Controls.Add(chart1);
}
}
コードで生成する方法は、動的にChartを追加したい場合や、共通部品としてグラフ作成処理をまとめたい場合に便利です。
3. Chartコントロールの基本構成
3-1. ChartAreaとは
ChartAreaは、グラフを描画する領域です。X軸、Y軸、グリッド線、背景色、目盛りなどの設定を持ちます。
C#ChartArea area = new ChartArea("MainArea");
chart1.ChartAreas.Add(area);
1つのChartに複数のChartAreaを追加することもできます。たとえば、上段に売上グラフ、下段に利益率グラフを表示するような構成も可能です。
よく使う設定は次のとおりです。
C#chart1.ChartAreas["MainArea"].AxisX.Title = "月";
chart1.ChartAreas["MainArea"].AxisY.Title = "売上";
chart1.ChartAreas["MainArea"].AxisY.LabelStyle.Format = "#,0";
3-2. Seriesとは
Seriesは、グラフに表示するデータ系列です。たとえば「2024年売上」「2025年売上」のように、複数のデータを比較する場合はSeriesを複数作成します。
C#Series series = new Series("売上");
series.ChartType = SeriesChartType.Line;
chart1.Series.Add(series);
Seriesには、グラフの種類、線の色、棒の色、マーカー、ラベル、データ点などを設定できます。MicrosoftのCharting名前空間の説明でも、Seriesはデータポイントと系列属性を格納する要素として説明されています。Microsoft Learn
3-3. Pointsとは
Pointsは、Seriesの中に入る個々のデータ点です。X値とY値を指定して追加します。
C#series.Points.AddXY("1月", 120);
series.Points.AddXY("2月", 180);
series.Points.AddXY("3月", 150);
折れ線グラフでは点と点が線で結ばれ、棒グラフでは各データ点が1本の棒として表示されます。
3-4. Legend・Title・Axisの役割
Chartコントロールでは、グラフを見やすくするために凡例、タイトル、軸を設定できます。
Legendは凡例です。複数系列のグラフで、どの線や棒が何を表しているかを示します。
C#chart1.Legends.Add(new Legend("Default"));
Titleはグラフタイトルです。
C#chart1.Titles.Add("月別売上推移");
Axisは軸です。X軸とY軸のタイトル、目盛り、ラベル、最大値、最小値などを設定できます。AxisクラスはChartAreaのAxisX、AxisY、AxisX2、AxisY2などから利用されます。Microsoft Learn
C#chart1.ChartAreas[0].AxisX.Title = "月";
chart1.ChartAreas[0].AxisY.Title = "売上金額";
3-5. ChartTypeでグラフの種類を指定する方法
グラフの種類は、SeriesのChartTypeプロパティで指定します。
C#series.ChartType = SeriesChartType.Line;
代表的な指定例は次のとおりです。
C#SeriesChartType.Line // 折れ線グラフ
SeriesChartType.Column // 縦棒グラフ
SeriesChartType.Bar // 横棒グラフ
SeriesChartType.Pie // 円グラフ
SeriesChartType.Point // 散布図
SeriesChartType.Area // 面グラフ
SeriesChartType.Spline // 滑らかな折れ線グラフ
同じデータでもChartTypeを変えるだけで表示形式を変更できます。最初は折れ線グラフや棒グラフから試すと理解しやすいです。
4. C# Chartで折れ線グラフを描画する方法
4-1. 折れ線グラフを作成する基本手順
C# Chartで折れ線グラフを描画する基本手順は次のとおりです。
ChartAreaを作成する
Seriesを作成する
SeriesのChartTypeに
Lineを指定するPointsにX値とY値を追加する
ChartにSeriesを追加する
折れ線グラフは、売上推移、アクセス数推移、センサー値、株価、温度変化など、時間や連続した数値の変化を表示するのに向いています。
4-2. 折れ線グラフのサンプルコード
次のコードは、月別売上を折れ線グラフで表示するサンプルです。
C#using System;
using System.Drawing;
using System.Windows.Forms;
using System.Windows.Forms.DataVisualization.Charting;
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
DrawLineChart();
}
private void DrawLineChart()
{
chart1.Series.Clear();
chart1.ChartAreas.Clear();
chart1.Titles.Clear();
ChartArea area = new ChartArea("MainArea");
area.AxisX.Title = "月";
area.AxisY.Title = "売上";
area.AxisY.LabelStyle.Format = "#,0";
chart1.ChartAreas.Add(area);
Series series = new Series("売上");
series.ChartType = SeriesChartType.Line;
series.BorderWidth = 3;
series.Color = Color.DodgerBlue;
series.MarkerStyle = MarkerStyle.Circle;
series.MarkerSize = 8;
series.Points.AddXY("1月", 120000);
series.Points.AddXY("2月", 150000);
series.Points.AddXY("3月", 130000);
series.Points.AddXY("4月", 180000);
series.Points.AddXY("5月", 210000);
chart1.Series.Add(series);
chart1.Titles.Add("月別売上推移");
}
}
このコードでは、SeriesChartType.Lineを指定して折れ線グラフを作成しています。BorderWidthで線の太さ、Colorで線の色、MarkerStyleでデータ点のマーカーを設定しています。
4-3. X軸・Y軸に数値データを追加する方法
X軸とY軸の両方に数値データを使いたい場合は、次のようにAddXYへ数値を渡します。
C#series.Points.AddXY(1, 10);
series.Points.AddXY(2, 30);
series.Points.AddXY(3, 20);
series.Points.AddXY(4, 50);
X軸を時間として扱う場合は、DateTimeを使うこともできます。
C#series.XValueType = ChartValueType.DateTime;
series.Points.AddXY(DateTime.Now.AddMinutes(-3), 10);
series.Points.AddXY(DateTime.Now.AddMinutes(-2), 15);
series.Points.AddXY(DateTime.Now.AddMinutes(-1), 12);
chart1.ChartAreas[0].AxisX.LabelStyle.Format = "HH:mm:ss";
時系列データを扱う場合は、X軸ラベルのフォーマットを設定すると見やすくなります。
4-4. 線の色・太さ・マーカーをカスタマイズする方法
折れ線グラフは、線やマーカーのデザインを変えるだけで見やすさが大きく変わります。
C#series.Color = Color.Red;
series.BorderWidth = 4;
series.BorderDashStyle = ChartDashStyle.Solid;
series.MarkerStyle = MarkerStyle.Diamond;
series.MarkerSize = 10;
series.MarkerColor = Color.White;
series.MarkerBorderColor = Color.Red;
series.MarkerBorderWidth = 2;
複数系列を表示する場合は、系列ごとに色やマーカーを変えると判別しやすくなります。
4-5. 複数系列の折れ線グラフを表示する方法
複数のSeriesを追加すると、複数の折れ線を同じChartAreaに表示できます。
C#private void DrawMultiLineChart()
{
chart1.Series.Clear();
chart1.ChartAreas.Clear();
chart1.Legends.Clear();
chart1.ChartAreas.Add(new ChartArea("MainArea"));
chart1.Legends.Add(new Legend("Legend"));
Series sales2024 = new Series("2024年");
sales2024.ChartType = SeriesChartType.Line;
sales2024.BorderWidth = 3;
sales2024.MarkerStyle = MarkerStyle.Circle;
Series sales2025 = new Series("2025年");
sales2025.ChartType = SeriesChartType.Line;
sales2025.BorderWidth = 3;
sales2025.MarkerStyle = MarkerStyle.Square;
string[] months = { "1月", "2月", "3月", "4月", "5月" };
int[] data2024 = { 120, 150, 130, 180, 210 };
int[] data2025 = { 140, 160, 170, 200, 230 };
for (int i = 0; i < months.Length; i++)
{
sales2024.Points.AddXY(months[i], data2024[i]);
sales2025.Points.AddXY(months[i], data2025[i]);
}
chart1.Series.Add(sales2024);
chart1.Series.Add(sales2025);
}
複数系列の折れ線グラフは、年度別、店舗別、商品別などの推移を比較する場合に便利です。
5. C# Chartで棒グラフを描画する方法
5-1. 棒グラフを作成する基本手順
棒グラフを作成する流れは折れ線グラフとほぼ同じです。違いは、SeriesのChartTypeにColumnまたはBarを指定する点です。
縦棒グラフにしたい場合はColumnを使います。
C#series.ChartType = SeriesChartType.Column;
横棒グラフにしたい場合はBarを使います。
C#series.ChartType = SeriesChartType.Bar;
カテゴリ別の売上、部署別の人数、商品別の販売数などを比較する場合は、棒グラフが向いています。
5-2. 棒グラフのサンプルコード
次のコードは、商品別販売数を縦棒グラフで表示するサンプルです。
C#using System.Drawing;
using System.Windows.Forms.DataVisualization.Charting;
private void DrawBarChart()
{
chart1.Series.Clear();
chart1.ChartAreas.Clear();
chart1.Titles.Clear();
ChartArea area = new ChartArea("MainArea");
area.AxisX.Title = "商品";
area.AxisY.Title = "販売数";
area.AxisX.Interval = 1;
chart1.ChartAreas.Add(area);
Series series = new Series("販売数");
series.ChartType = SeriesChartType.Column;
series.Color = Color.SteelBlue;
series.IsValueShownAsLabel = true;
series.Points.AddXY("商品A", 35);
series.Points.AddXY("商品B", 52);
series.Points.AddXY("商品C", 28);
series.Points.AddXY("商品D", 64);
chart1.Series.Add(series);
chart1.Titles.Add("商品別販売数");
}
IsValueShownAsLabel = trueを指定すると、棒の上に数値ラベルが表示されます。集計値をひと目で確認したい場合に便利です。
5-3. 横軸にカテゴリ名を表示する方法
横軸にカテゴリ名を表示するには、AddXYのX値に文字列を指定します。
C#series.Points.AddXY("東京", 120);
series.Points.AddXY("大阪", 90);
series.Points.AddXY("名古屋", 75);
ラベルが重なる場合は、角度を変えると見やすくなります。
C#chart1.ChartAreas[0].AxisX.LabelStyle.Angle = -45;
chart1.ChartAreas[0].AxisX.Interval = 1;
カテゴリ数が多い場合は、横棒グラフに変更するのも有効です。
C#series.ChartType = SeriesChartType.Bar;
5-4. 棒の色・幅・ラベルを変更する方法
棒グラフでは、色やラベルを設定すると視認性が上がります。
C#series.Color = Color.Orange;
series.IsValueShownAsLabel = true;
series.LabelFormat = "#,0";
データ点ごとに色を変えることもできます。
C#series.Points[0].Color = Color.SkyBlue;
series.Points[1].Color = Color.LightGreen;
series.Points[2].Color = Color.Orange;
series.Points[3].Color = Color.Pink;
棒の幅を調整したい場合は、PointWidthを設定します。
C#series["PointWidth"] = "0.6";
値は文字列で指定します。大きくすると棒が太くなり、小さくすると細くなります。
5-5. 複数データを比較する棒グラフを作る方法
複数系列の棒グラフを作ると、年度別や店舗別の比較ができます。
C#private void DrawCompareBarChart()
{
chart1.Series.Clear();
chart1.ChartAreas.Clear();
chart1.Legends.Clear();
chart1.ChartAreas.Add(new ChartArea("MainArea"));
chart1.Legends.Add(new Legend("Legend"));
Series tokyo = new Series("東京");
tokyo.ChartType = SeriesChartType.Column;
tokyo.IsValueShownAsLabel = true;
Series osaka = new Series("大阪");
osaka.ChartType = SeriesChartType.Column;
osaka.IsValueShownAsLabel = true;
string[] months = { "1月", "2月", "3月" };
tokyo.Points.AddXY(months[0], 120);
tokyo.Points.AddXY(months[1], 135);
tokyo.Points.AddXY(months[2], 150);
osaka.Points.AddXY(months[0], 100);
osaka.Points.AddXY(months[1], 110);
osaka.Points.AddXY(months[2], 125);
chart1.Series.Add(tokyo);
chart1.Series.Add(osaka);
}
このようにSeriesを複数追加すると、同じカテゴリ内で複数の棒が並んで表示されます。
6. Chartコントロールのデザインをカスタマイズする
6-1. グラフタイトルを表示する方法
グラフタイトルはTitlesコレクションに追加します。
C#chart1.Titles.Clear();
chart1.Titles.Add("月別売上グラフ");
フォントや色を変えたい場合は、Titleオブジェクトを作成して設定します。
C#Title title = new Title();
title.Text = "月別売上グラフ";
title.Font = new Font("Meiryo UI", 14, FontStyle.Bold);
title.ForeColor = Color.DarkBlue;
chart1.Titles.Add(title);
タイトルは、グラフが何を表しているのかを明確にする重要な要素です。
6-2. 凡例を表示・非表示にする方法
凡例を表示するには、Legendを追加します。
C#chart1.Legends.Clear();
chart1.Legends.Add(new Legend("Legend"));
凡例を非表示にしたい場合は、Series側で設定できます。
C#series.IsVisibleInLegend = false;
または、Legend自体を削除します。
C#chart1.Legends.Clear();
単一系列のグラフでは凡例がなくても意味が伝わる場合があります。複数系列の場合は凡例を表示したほうが分かりやすくなります。
6-3. 軸ラベル・目盛り・単位を設定する方法
X軸とY軸のタイトルは、ChartAreaから設定します。
C#ChartArea area = chart1.ChartAreas[0];
area.AxisX.Title = "月";
area.AxisY.Title = "売上金額(円)";
数値の表示形式を変えるには、LabelStyle.Formatを使います。
C#area.AxisY.LabelStyle.Format = "#,0";
最大値や最小値を固定したい場合は、次のように設定します。
C#area.AxisY.Minimum = 0;
area.AxisY.Maximum = 100;
area.AxisY.Interval = 10;
単位を明確にしたい場合は、軸タイトルに「円」「件」「%」「℃」などを入れると読みやすくなります。
6-4. グリッド線を設定する方法
グリッド線は、値を読み取りやすくするために使います。
C#ChartArea area = chart1.ChartAreas[0];
area.AxisX.MajorGrid.Enabled = false;
area.AxisY.MajorGrid.Enabled = true;
area.AxisY.MajorGrid.LineColor = Color.LightGray;
area.AxisY.MajorGrid.LineDashStyle = ChartDashStyle.Dash;
棒グラフではX軸のグリッド線を非表示にし、Y軸のグリッド線だけを薄く表示すると見やすくなります。
6-5. 背景色やフォントを変更する方法
Chart全体やChartAreaの背景色を変えることもできます。
C#chart1.BackColor = Color.White;
chart1.ChartAreas[0].BackColor = Color.WhiteSmoke;
軸ラベルのフォントを変える場合は、次のように設定します。
C#chart1.ChartAreas[0].AxisX.LabelStyle.Font = new Font("Meiryo UI", 9);
chart1.ChartAreas[0].AxisY.LabelStyle.Font = new Font("Meiryo UI", 9);
業務アプリでは、派手な色よりも、背景は白系、線や棒は見やすい色、文字は読みやすいフォントにするのがおすすめです。
7. データを使ってChartにグラフを表示する方法
7-1. 配列やListのデータをChartに追加する方法
配列やListのデータをChartに追加する場合は、ループでPoints.AddXYを呼び出します。
C#string[] labels = { "1月", "2月", "3月", "4月" };
int[] values = { 120, 150, 130, 180 };
Series series = new Series("売上");
series.ChartType = SeriesChartType.Line;
for (int i = 0; i < labels.Length; i++)
{
series.Points.AddXY(labels[i], values[i]);
}
chart1.Series.Clear();
chart1.Series.Add(series);
Listを使う場合も考え方は同じです。
C#List<string> names = new List<string> { "A", "B", "C" };
List<int> scores = new List<int> { 80, 92, 75 };
for (int i = 0; i < names.Count; i++)
{
series.Points.AddXY(names[i], scores[i]);
}
アプリ内で集計したデータをすぐにグラフ化したい場合に便利です。
7-2. DataTableをChartにバインドする方法
DataTableのデータをChartに表示する場合は、DataTableの行をループして追加する方法が分かりやすいです。
C#DataTable table = new DataTable();
table.Columns.Add("Month", typeof(string));
table.Columns.Add("Sales", typeof(int));
table.Rows.Add("1月", 120);
table.Rows.Add("2月", 150);
table.Rows.Add("3月", 130);
Series series = new Series("売上");
series.ChartType = SeriesChartType.Column;
foreach (DataRow row in table.Rows)
{
string month = row["Month"].ToString();
int sales = Convert.ToInt32(row["Sales"]);
series.Points.AddXY(month, sales);
}
chart1.Series.Clear();
chart1.Series.Add(series);
DataTableは、CSV、Excel、データベースなどから取得したデータを扱うときによく使われます。
7-3. CSVデータを読み込んでグラフ化する方法
CSVファイルを読み込んでChartに表示する簡単な例です。CSVの形式は次のようなものを想定します。
csvMonth,Sales
1月,120
2月,150
3月,130
4月,180
C#コードは次のとおりです。
C#using System.IO;
private void DrawChartFromCsv(string filePath)
{
chart1.Series.Clear();
Series series = new Series("売上");
series.ChartType = SeriesChartType.Line;
series.BorderWidth = 3;
string[] lines = File.ReadAllLines(filePath);
for (int i = 1; i < lines.Length; i++)
{
string[] columns = lines[i].Split(',');
string month = columns[0];
int sales = int.Parse(columns[1]);
series.Points.AddXY(month, sales);
}
chart1.Series.Add(series);
}
実務では、カンマを含む文字列や文字コード、空行、数値変換エラーなどを考慮する必要があります。単純なCSVであれば上記のようなコードで十分です。
7-4. データベースの値をChartに表示する方法
データベースの値をChartに表示する場合も、取得した結果をループしてPoints.AddXYに追加します。
C#private void DrawChartFromDataTable(DataTable table)
{
chart1.Series.Clear();
Series series = new Series("売上");
series.ChartType = SeriesChartType.Column;
series.IsValueShownAsLabel = true;
foreach (DataRow row in table.Rows)
{
string category = row["CategoryName"].ToString();
decimal amount = Convert.ToDecimal(row["Amount"]);
series.Points.AddXY(category, amount);
}
chart1.Series.Add(series);
}
SQL Serverなどから取得する場合は、SQLで集計してからChartに渡すと効率的です。
SQLSELECT CategoryName, SUM(Amount) AS Amount
FROM Sales
GROUP BY CategoryName
ORDER BY CategoryName
グラフ表示側では、できるだけ「表示に必要な形」に整えたデータを受け取るようにすると実装が簡単になります。
7-5. データ更新時にグラフを再描画する方法
データが更新されたときは、既存のSeriesやPointsをクリアしてから再追加します。
C#private void RefreshChart(List<string> labels, List<int> values)
{
Series series = chart1.Series["売上"];
series.Points.Clear();
for (int i = 0; i < labels.Count; i++)
{
series.Points.AddXY(labels[i], values[i]);
}
}
Seriesごと作り直す場合は、次のようにします。
C#chart1.Series.Clear();
chart1.Series.Add(newSeries);
データ更新のたびにChartAreaやTitleまで作り直すと処理が重くなることがあります。頻繁に更新する場合は、SeriesのPointsだけを更新する方法がおすすめです。
8. リアルタイムにグラフを更新する方法
8-1. Timerを使ってChartを更新する方法
リアルタイムグラフを作る場合は、Windows FormsのTimerを使う方法が簡単です。一定間隔でデータを追加し、Chartを更新します。
C#private Timer timer;
private Random random = new Random();
private int xValue = 0;
private void StartTimer()
{
timer = new Timer();
timer.Interval = 1000;
timer.Tick += Timer_Tick;
timer.Start();
}
private void Timer_Tick(object sender, EventArgs e)
{
Series series = chart1.Series["リアルタイム"];
series.Points.AddXY(xValue, random.Next(0, 100));
xValue++;
}
この例では、1秒ごとにランダムな値を追加しています。実際には、センサー値、通信データ、ログ件数などを追加することが多いです。
8-2. 古いデータを削除しながら表示する方法
リアルタイム更新では、データ点が増え続けると表示が重くなります。そのため、一定数を超えたら古いデータを削除します。
C#int maxPointCount = 50;
if (series.Points.Count > maxPointCount)
{
series.Points.RemoveAt(0);
}
X軸の表示範囲も更新すると、流れるようなグラフになります。
C#ChartArea area = chart1.ChartAreas[0];
area.AxisX.Minimum = Math.Max(0, xValue - maxPointCount);
area.AxisX.Maximum = xValue;
8-3. リアルタイム折れ線グラフのサンプルコード
次のコードは、Timerで1秒ごとに値を追加するリアルタイム折れ線グラフのサンプルです。
C#using System;
using System.Drawing;
using System.Windows.Forms;
using System.Windows.Forms.DataVisualization.Charting;
public partial class Form1 : Form
{
private Timer timer;
private Random random = new Random();
private int xValue = 0;
private const int MaxPointCount = 50;
public Form1()
{
InitializeComponent();
InitializeRealtimeChart();
StartRealtimeChart();
}
private void InitializeRealtimeChart()
{
chart1.Series.Clear();
chart1.ChartAreas.Clear();
ChartArea area = new ChartArea("MainArea");
area.AxisX.Title = "時間";
area.AxisY.Title = "値";
area.AxisY.Minimum = 0;
area.AxisY.Maximum = 100;
chart1.ChartAreas.Add(area);
Series series = new Series("リアルタイム");
series.ChartType = SeriesChartType.Line;
series.BorderWidth = 3;
series.Color = Color.DodgerBlue;
chart1.Series.Add(series);
}
private void StartRealtimeChart()
{
timer = new Timer();
timer.Interval = 1000;
timer.Tick += Timer_Tick;
timer.Start();
}
private void Timer_Tick(object sender, EventArgs e)
{
Series series = chart1.Series["リアルタイム"];
int value = random.Next(0, 101);
series.Points.AddXY(xValue, value);
if (series.Points.Count > MaxPointCount)
{
series.Points.RemoveAt(0);
}
ChartArea area = chart1.ChartAreas[0];
area.AxisX.Minimum = Math.Max(0, xValue - MaxPointCount);
area.AxisX.Maximum = xValue;
xValue++;
}
}
このように、Timer、Series、Pointsを組み合わせることで、簡単なリアルタイム折れ線グラフを作成できます。
8-4. 更新処理が重いときの対策
リアルタイム更新が重い場合は、次の点を見直します。
まず、データ点を増やしすぎないようにします。数千、数万点を頻繁に再描画すると処理が重くなります。表示に必要な点数だけ残すようにしましょう。
次に、更新間隔を短くしすぎないことも重要です。画面表示であれば、必ずしも数ミリ秒単位で更新する必要はありません。100ms、500ms、1000msなど、用途に応じて調整します。
また、毎回ChartAreaやSeriesを作り直すのではなく、Pointsだけを更新するようにします。デザイン設定は初期化時に行い、Timerの中ではデータ追加と古いデータの削除に絞ると軽くなります。
さらに大量データや高速描画が必要な場合は、Chartコントロール以外のライブラリも検討しましょう。
9. C# Chartでよくあるエラーと解決方法
9-1. Chartがツールボックスに表示されない場合
ChartがVisual Studioのツールボックスに表示されない場合、まずプロジェクトの種類を確認してください。.NET FrameworkのWindows Formsプロジェクトでは表示されることが多いですが、.NET 6以降のWindows Formsプロジェクトでは環境によって表示されない場合があります。
対策としては、次の方法があります。
.NET FrameworkのWindows Formsプロジェクトで作成する、参照にSystem.Windows.Forms.DataVisualizationを追加する、ツールボックスをリセットする、コードでChartを生成する、代替ライブラリを使う、といった方法です。
ツールボックスに表示されなくても、参照が追加されていればコードで生成できる場合があります。
9-2. System.Windows.Forms.DataVisualizationが見つからない場合
System.Windows.Forms.DataVisualizationが見つからない場合は、参照が追加されていないか、プロジェクトのターゲットフレームワークが合っていない可能性があります。
.NET Frameworkの場合は、参照の追加からSystem.Windows.Forms.DataVisualizationを選択します。
.NET 6以降の場合は、標準の.NET Framework版と同じ扱いができない場合があります。NuGetで利用できるパッケージもありますが、プロジェクトの種類や運用方針によってはScottPlot、LiveCharts、OxyPlotなどの利用を検討したほうがよいケースもあります。
9-3. グラフが表示されない場合
Chartを配置したのにグラフが表示されない場合は、次の点を確認します。
ChartAreaが追加されているか、Seriesが追加されているか、Seriesにデータ点が入っているか、ChartTypeが指定されているか、Chartのサイズが0になっていないかを確認します。
最低限、次のようなコードが必要です。
C#chart1.ChartAreas.Clear();
chart1.Series.Clear();
chart1.ChartAreas.Add(new ChartArea("MainArea"));
Series series = new Series("Data");
series.ChartType = SeriesChartType.Line;
series.Points.AddXY(1, 10);
series.Points.AddXY(2, 20);
chart1.Series.Add(series);
Seriesだけ作ってChartに追加していない、Pointsが空のまま、ChartAreaが存在しない、といったミスはよくあります。
9-4. 軸ラベルが重なる場合
X軸のラベルが重なる場合は、ラベルの角度や間隔を調整します。
C#chart1.ChartAreas[0].AxisX.Interval = 1;
chart1.ChartAreas[0].AxisX.LabelStyle.Angle = -45;
カテゴリ数が多い場合は、横棒グラフに変える方法もあります。
C#series.ChartType = SeriesChartType.Bar;
また、表示するカテゴリ数を絞る、スクロールを使う、ラベルを短くするなどの工夫も有効です。
9-5. データ追加時に例外が発生する場合
データ追加時に例外が発生する場合は、X値やY値の型、null、空文字、数値変換エラーを確認します。
たとえばCSVから読み込んだ値をintに変換する場合、空文字やカンマ付き数値があるとint.Parseで例外が発生します。安全に処理するにはTryParseを使います。
C#if (int.TryParse(columns[1], out int value))
{
series.Points.AddXY(columns[0], value);
}
データベースから取得した値がDBNullの場合も例外の原因になります。
C#if (row["Amount"] != DBNull.Value)
{
decimal amount = Convert.ToDecimal(row["Amount"]);
series.Points.AddXY(category, amount);
}
グラフ描画の前にデータを検証しておくと、実行時エラーを減らせます。
10. Chartコントロール以外の選択肢
10-1. Chartコントロールが向いているケース
Chartコントロールは、.NET FrameworkのWindows Formsアプリで、基本的な折れ線グラフや棒グラフを素早く表示したい場合に向いています。
既存の業務アプリに簡単なグラフを追加したい、Visual Studioのフォームデザイナーで配置したい、複雑なアニメーションや高度な操作は不要、というケースでは使いやすい選択肢です。
一方で、大量データの高速描画、モダンなUI、WPFやクロスプラットフォーム対応、長期的な保守性を重視する場合は、他のグラフライブラリも比較する価値があります。
10-2. ScottPlotを使うケース
ScottPlotは、.NET向けの無料・オープンソースのプロットライブラリです。公式サイトでは、大規模データセットのインタラクティブ表示がしやすく、折れ線、棒、円、散布図などを少ないコードで作成できるライブラリとして説明されています。scottplot.net
ScottPlotは、WinForms、WPF、コンソール、Blazorなど複数の環境で使えるため、Chartコントロールよりモダンな選択肢として検討できます。
特に、数値データのプロット、科学技術系のグラフ、大量データの表示、画像としての保存などを重視する場合に向いています。
10-3. LiveChartsを使うケース
LiveCharts2は、.NET向けのデータ可視化ライブラリです。公式サイトでは、アニメーション、MVVMとの相性、自動更新、クロスプラットフォーム対応などが特徴として説明されており、WPF、WinForms、WinUI、Blazor、MAUIなど複数のフレームワークに対応しています。livecharts.dev
見た目のきれいなグラフ、アニメーション付きのダッシュボード、WPFやMVVM構成のアプリを作りたい場合は、LiveChartsが候補になります。
業務アプリのダッシュボードをモダンに見せたい場合や、リアルタイム更新を見栄えよく表示したい場合に向いています。
10-4. OxyPlotを使うケース
OxyPlotは、.NET向けのクロスプラットフォームなプロットライブラリです。公式サイトでは、.NET用のクロスプラットフォームプロットライブラリであり、MITライセンスで提供されていると説明されています。oxyplot.github.io
OxyPlotは、WPFやWindows Formsなどで利用でき、PlotModelを中心にグラフを構築します。コードでグラフ構成を管理しやすいため、MVVM構成やテストしやすい設計にしたい場合にも向いています。
シンプルで落ち着いた見た目のグラフを作りたい場合や、WPFアプリでグラフを扱いたい場合に検討するとよいでしょう。
10-5. 業務アプリでグラフライブラリを選ぶ基準
業務アプリでグラフライブラリを選ぶときは、次の基準で比較すると失敗しにくくなります。
まず、対象フレームワークを確認します。.NET FrameworkのWinFormsなのか、.NET 8のWinFormsなのか、WPFなのか、Webなのかによって選択肢が変わります。
次に、必要なグラフの種類を確認します。折れ線や棒だけでよいのか、散布図、ヒートマップ、金融チャート、リアルタイムチャートが必要なのかを整理します。
さらに、データ量と更新頻度も重要です。数十点のデータを表示するだけならChartコントロールで十分ですが、数万点以上を頻繁に更新する場合は高速描画に強いライブラリが必要です。
最後に、保守性、ライセンス、ドキュメント、サンプルコードの充実度を確認しましょう。長く使う業務アプリでは、今動くことだけでなく、数年後も保守しやすいことが重要です。
11. C# Chartコントロールに関するよくある質問
11-1. C# Chartは.NET 6以降でも使える?
.NET 6以降でも、NuGetパッケージや移植版を使ってChart風の機能を利用できる場合があります。ただし、.NET Framework版のChartコントロールと完全に同じ感覚で使えるとは限りません。
Microsoftのdotnet/winforms-datavisualizationリポジトリでは、System.Windows.Forms.DataVisualizationは非推奨であり、.NET Core 3への移植を容易にする目的のものと説明されています。GitHub
そのため、.NET Frameworkの既存アプリではChartコントロール、.NET 6以降の新規開発ではScottPlot、LiveCharts、OxyPlotなども含めて検討するのがおすすめです。
11-2. Chartで円グラフや散布図も描画できる?
はい、Chartコントロールでは円グラフや散布図も描画できます。
円グラフの場合は、SeriesChartType.Pieを指定します。
C#series.ChartType = SeriesChartType.Pie;
series.Points.AddXY("A", 40);
series.Points.AddXY("B", 35);
series.Points.AddXY("C", 25);
散布図の場合は、SeriesChartType.Pointを指定します。
C#series.ChartType = SeriesChartType.Point;
series.Points.AddXY(10, 20);
series.Points.AddXY(15, 25);
series.Points.AddXY(20, 18);
割合を見せたいなら円グラフ、2つの数値の関係を見たいなら散布図が向いています。
11-3. Chartの画像を保存できる?
はい、Chartは画像として保存できます。SaveImageメソッドを使います。
C#chart1.SaveImage("chart.png", ChartImageFormat.Png);
JPEGで保存したい場合は次のようにします。
C#chart1.SaveImage("chart.jpg", ChartImageFormat.Jpeg);
レポート出力やメール添付用にグラフ画像を作成したい場合に便利です。
11-4. Chartを印刷できる?
Chartコントロールには印刷関連の機能も用意されています。簡単に印刷プレビューを表示する場合は、次のように書けます。
C#chart1.Printing.PrintPreview();
直接印刷する場合は次のようにします。
C#chart1.Printing.Print();
ただし、業務アプリで帳票として印刷する場合は、余白、解像度、タイトル、表データとの組み合わせなどを考慮する必要があります。必要に応じて画像として保存して帳票に貼り付ける方法もあります。
11-5. WPFでChartを使うにはどうすればよい?
WPFでは、Windows FormsのChartコントロールをそのまま自然に使うよりも、WPF向けのグラフライブラリを使うほうが一般的です。
候補としては、LiveCharts、OxyPlot、ScottPlotなどがあります。WPFのMVVM構成と組み合わせる場合は、データバインディングしやすいライブラリを選ぶと実装しやすくなります。
どうしてもWindows FormsのChartをWPFで使いたい場合は、WindowsFormsHostを使って埋め込む方法もあります。ただし、WPFらしい設計や見た目を重視するなら、WPF対応のライブラリを使うほうがおすすめです。
まとめ
C#でグラフを描画したい場合、Windows FormsのChartコントロールを使うと、折れ線グラフや棒グラフを比較的簡単に作成できます。
基本は、ChartAreaで描画領域を作り、Seriesでデータ系列を作り、Pointsに値を追加し、ChartTypeで折れ線・棒・円・散布図などの種類を指定する流れです。
折れ線グラフではSeriesChartType.Line、棒グラフではSeriesChartType.ColumnまたはSeriesChartType.Barを指定します。タイトル、凡例、軸ラベル、グリッド線、色、フォントなどを設定すれば、業務アプリでも見やすいグラフを作成できます。
配列、List、DataTable、CSV、データベースの値をChartに追加することも可能です。Timerを使えば、簡単なリアルタイム折れ線グラフも実装できます。
ただし、Chartコントロールは.NET FrameworkのWindows Formsでは扱いやすい一方、.NET 6以降の新規開発では注意が必要です。長期運用、高速描画、モダンUI、WPF対応などを重視する場合は、ScottPlot、LiveCharts、OxyPlotなどのグラフライブラリも比較して選ぶとよいでしょう。

