チャートを作成するにあたりデータの上限・下限等の特定の要素を強調したい場合、チャート内に目盛となる破線（または点線）を入れることがあります。
ここでは IgbDataChart における IgbValueOverlay を使用して、任意の破線を配置する方法についてご紹介します。
方法
- まず IgbValueOverlayModule を追加します。
Program.cs
builder.Services.AddIgniteUIBlazor( ... typeof(IgbValueOverlayModule) ... );
2. IgbValueOverlay のプロパティより DashArray を追加します。
定義する値は破線のパターンを指定しており、線のセグメントが交互に表示・非表示となります。
破線を凡例に表示したくない場合は LegendItemVisibility=”Visibility.Collapsed” と設定します。
※ .NET7以前は DashArray=”new[]{ 3, 5 }” のように記述します。
App.razor
<IgbValueOverlay AxisName="xAxis"
Value="7.5"
Brush="red"
Thickness="3"
DashArray="[3,5]"
Title="Target Revenue" />
<IgbValueOverlay AxisName="xAxis"
Value="12.5"
Brush="blue"
Thickness="2"
DashArray="[5,3]"
LegendItemVisibility="Visibility.Collapsed" />
<IgbValueOverlay AxisName="xAxis"
Value="19"
Brush="black"
Thickness="2"
DashArray="[3,5,9,5]"
LegendItemVisibility="Visibility.Collapsed" />
これらのプロパティの設定で実際に描画される破線は下図のようになります。
