FlexChart上にコントロール（パネル、ボタン、テキストボックスなど）を配置したとき、ラインマーカーを移動すると、ラインマーカーはこれらのコントロールよりも前面に表示されます（図Ａ）。


 

この動作は、ラインマーカーの表示が他のコントロールよりも優先され、最前面に描画されるという仕様からきています。

ラインマーカーがFlexChart上のコントロールの背面になるようにするには、本コンポーネントのラインマーカーの機能を使用せず、代わりにRendered イベントで独自に縦線を描画する方法が考えられます。

以下に、ラインマーカーに代えて、黒い点線を表示するコードを記載します（図Ｂ）。

◎サンプルコード（VB）

Imports C1.Chart

Public Class Form1
    Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
        ' データテーブルの設定
        Dim dt As New DataTable()
        dt.Columns.Add(New DataColumn("ID", GetType(Integer)))
        dt.Columns.Add(New DataColumn("Count", GetType(Integer)))
        dt.Rows.Add(0, 10)
        dt.Rows.Add(1, 50)
        dt.Rows.Add(2, 20)
        dt.Rows.Add(3, 75)
        dt.Rows.Add(4, 40)
        dt.Rows.Add(5, 80)

        ' チャートの設定
        FlexChart1.ChartType = ChartType.Line
        FlexChart1.Legend.Position = Position.None
        FlexChart1.DataSource = dt
        FlexChart1.BindingX = "ID"
        FlexChart1.Binding = "Count"

        ' ツールチップを非表示（オプション設定）'
        'flexChart1.ToolTip.Content = " "
        'flexChart1.ToolTip.Active  = False

        '' 参考）FlexChart 標準の ラインマーカー表示処理
        '' ※今回は使用しません。
        'Dim lineMarker As LineMarker = New LineMarker(flexChart1)
        'lineMarker.Lines = LineMarkerLines.Vertical
        'lineMarker.Content = ""

        ' Renderedイベントでマウス位置にラインを描画する
        AddHandler FlexChart1.Rendered, Sub(s, er)
                                            ' マウス位置を取得
                                            Dim p = FlexChart1.PointToClient(Cursor.Position)

                                            ' プロット領域を取得
                                            Dim pa = FlexChart1.PlotRect
                                            If p.X  pa.Right Then
                                                p.X = CInt(pa.Right)
                                            End If

                                            ' 垂直線を描画
                                            Dim pen As New Pen(Color.Black, 5)
                                            pen.DashStyle = Drawing2D.DashStyle.Dot
                                            er.Graphics.DrawLine(pen, p.X, pa.Top, p.X, pa.Bottom)

                                            ' 簡略化した描画方法（必要に応じて使用）
                                            ' e.Graphics.DrawLine(Pens.Red, p.X, pa.Top, p.X, pa.Bottom)
                                        End Sub

        ' マウス移動時にチャートを更新
        AddHandler FlexChart1.MouseMove, Sub(s, ev) FlexChart1.Invalidate()

    End Sub
End Class

◎サンプルコード（C#）

using C1.Chart;

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

        private void Form1_Load(object sender, EventArgs e)
        {
            // データテーブルの設定
            var dt = new DataTable();
            dt.Columns.Add(new DataColumn("ID", typeof(Int32)));
            dt.Columns.Add(new DataColumn("Count", typeof(Int32)));
            dt.Rows.Add(0, 10);
            dt.Rows.Add(1, 50);
            dt.Rows.Add(2, 20);
            dt.Rows.Add(3, 75);
            dt.Rows.Add(4, 40);
            dt.Rows.Add(5, 80);

            // チャートの設定
            flexChart1.ChartType = ChartType.Line;
            flexChart1.Legend.Position = Position.None;
            flexChart1.DataSource = dt;
            flexChart1.BindingX = "ID";
            flexChart1.Binding = "Count";

            //// ツールチップを非表示
            //flexChart1.ToolTip.Content = " ";
            //flexChart1.ToolTip.Active = false;

            // 参考）FlexChart 標準の ラインマーカー表示処理
            // ※今回は使用しません。
            //LineMarker lineMarker = new LineMarker(flexChart1);
            //lineMarker.Lines = LineMarkerLines.Vertical;
            //lineMarker.Content = "";

            // Renderedイベントでマウス位置にラインを描画する
            flexChart1.Rendered += (s, er) =
            {
                // マウス位置を取得
                var p = flexChart1.PointToClient(Cursor.Position);

                // プロット領域を取得
                var pa = flexChart1.PlotRect;
                if (p.X  pa.Right)
                    p.X = (int)pa.Right;

                // 垂直線を描画
                // 線の色、太さを設定
                var pen = new Pen(Color.Black, 5);
                // 線のスタイルを設定
                pen.DashStyle = System.Drawing.Drawing2D.DashStyle.Dot;

                er.Graphics.DrawLine(pen, p.X, pa.Top, p.X, pa.Bottom);
            };

            // マウス移動時にチャートを更新
            flexChart1.MouseMove += (s, ev) = flexChart1.Invalidate();

        }
    }
}