IgbDataChart – 折れ線グラフのマーカーサイズを変更したい

Ignite UI for Blazor の IgbDataChart で折れ線グラフ（ライン シリーズ）を表示した際に、データ ポイントに表示されるマーカーのサイズを変更したい場合は、IgbLineSeries の MarkerSize プロパティを設定します。

この記事は、Ignite UI for Blazor 25.2.104（.NET 10）で動作を確認しています。

IgbDataChart の設定

IgbDataChart にカテゴリ X 軸（IgbCategoryXAxis）と数値 Y 軸（IgbNumericYAxis）を配置し、IgbLineSeries で折れ線グラフを表示します。マーカーのサイズは、ライン シリーズの MarkerSize プロパティで指定します。

<IgbDataChart Width="100%"
              Height="300px"
              Legend="_legend"
              ComputedPlotAreaMarginMode="ComputedPlotAreaMarginMode.Series">
    <IgbCategoryXAxis Name="xAxis"
                      DataSource="_data"
                      Label="@nameof(DataItem.Index)">
    </IgbCategoryXAxis>

    <IgbNumericYAxis Name="yAxis"></IgbNumericYAxis>

    <IgbLineSeries Title="Sample Data"
                   DataSource="_data"
                   XAxisName="xAxis"
                   YAxisName="yAxis"
                   MarkerSize="20"
                   ValueMemberPath="@nameof(DataItem.Value)">
    </IgbLineSeries>
</IgbDataChart>

MarkerSize の使用

IgbLineSeries の MarkerSize プロパティに数値を設定すると、各データ ポイントに表示されるマーカーの大きさ（ピクセル）を変更できます。下記の例では MarkerSize="20" を指定し、既定よりも大きなマーカーを表示しています。

<IgbLineSeries Title="Sample Data"
               DataSource="_data"
               XAxisName="xAxis"
               YAxisName="yAxis"
               MarkerSize="20"
               ValueMemberPath="@nameof(DataItem.Value)">
</IgbLineSeries>

実行結果

アプリケーションを実行すると、折れ線グラフの各データ ポイントに MarkerSize で指定したサイズのマーカーが表示されます。