Skip to content
This repository was archived by the owner on Jun 8, 2026. It is now read-only.
73 changes: 71 additions & 2 deletions doc/en/components/charts/features/chart-markers.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
---
title: {Platform} Chart Markers | Data Visualization | Infragistics
_description: Infragistics' {Platform} Chart Markers
_keywords: {Platform} Charts, Markers, Infragistics
_keywords: {Platform} Charts, Markers, Marker Size, Infragistics
_license: commercial
mentionedTypes: ["CategoryChart", "CategoryChartType", "MarkerType", "MarkerAutomaticBehavior", "SeriesViewer"]
mentionedTypes: ["CategoryChart", "CategoryChartType", "MarkerType", "MarkerSeries", "ScatterLineSeries", "ScatterSplineSeries", "ScatterSeries", "LineSeries", "SplineSeries", "MarkerAutomaticBehavior", "SeriesViewer"]
namespace: Infragistics.Controls.Charts
---

Expand All @@ -21,6 +21,72 @@ The colors of the markers are also managed by setting the `MarkerBrushes` and `M

<div class="divider--half"></div>

## {Platform} Chart Marker Size

You can control the exact device-independent pixel dimensions of data point markers by setting the `MarkerSize` property on any series that supports markers. This gives you precise control over how large markers appear on screen, regardless of the marker template or style being used.

By default, marker sizing is determined by the series marker template. When you set `MarkerSize` to a specific numeric value, all markers in that series render at that exact device-independent pixel width and height. Setting `MarkerSize` back to `NaN` restores the default template-driven sizing.

The `MarkerSize` property is available on all series types that derive from `MarkerSeries`, including `LineSeries`, `SplineSeries`, `AreaSeries`, `ColumnSeries`, `ScatterSeries`, `ScatterLineSeries`, `ScatterSplineSeries`, and polar/radial series types.

The following code examples show how to set `MarkerSize` to 30 device-independent pixels on a `ScatterLineSeries` in the `XamDataChart` control:

```razor
<IgbDataChart>
<IgbScatterLineSeries
MarkerSize="30"
MarkerType="Circle"
XMemberPath="X"
YMemberPath="Y"
XAxisName="xAxis"
YAxisName="yAxis" />
</IgbDataChart>
```

```tsx
<IgrDataChart>
<IgrScatterLineSeries
markerSize={30}
markerType="Circle"
xMemberPath="X"
yMemberPath="Y"
xAxisName="xAxis"
yAxisName="yAxis" />
</IgrDataChart>
```

```html
<igc-data-chart>
<igc-scatter-line-series
marker-size="30"
marker-type="Circle"
x-member-path="X"
y-member-path="Y"
x-axis-name="xAxis"
y-axis-name="yAxis">
</igc-scatter-line-series>
</igc-data-chart>
```

To reset markers to their default template-driven size, set `MarkerSize` to `NaN` (or remove the attribute in markup):

```razor
<IgbLineSeries MarkerSize="NaN" MarkerType="Circle" ... />
```

```tsx
<IgrLineSeries markerSize={NaN} markerType="Circle" ... />
```

The following sample demonstrates `MarkerSize` on scatter series with an interactive editor:

`sample="/charts/data-chart/scatter-marker-options", height="500", alt="{Platform} Chart Marker Size Example"`

> [!NOTE]
> For `BubbleSeries`, the `MarkerSize` property does not override the bubble radius, which is controlled by the radius data column and the `RadiusScale`. Bubble sizes remain entirely driven by the data and scale configuration.

<div class="divider--half"></div>

## {Platform} Chart Checkmark Marker Type

The {ProductName} charts include a `Checkmark` option in the `MarkerType` enum. This marker renders a V-shaped checkmark icon inside a circle on data points in your chart.
Expand Down Expand Up @@ -54,7 +120,10 @@ The following is a list of API members mentioned in the above sections:

- `MarkerBrushes`
- `MarkerOutlines`
- `MarkerSize`
- `MarkerType`
- `UseLightweightMarkers`
- `MarkerAutomaticBehavior`
- `SeriesViewer.CheckmarkMarkerTemplate`
- `CategoryChart`
- `XamDataChart`
73 changes: 71 additions & 2 deletions doc/jp/components/charts/features/chart-markers.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
---
title: {Platform} チャート マーカー | データ可視化 | インフラジスティックス
_description: インフラジスティックスの {Platform} チャート マーカー
_keywords: {Platform} Charts, Markers, Infragistics, {Platform} チャート, マーカー, インフラジスティックス
_keywords: {Platform} Charts, Markers, Marker Size, Infragistics, {Platform} チャート, マーカー, マーカー サイズ, インフラジスティックス
_license: commercial
mentionedTypes: ["CategoryChart", "CategoryChartType", "MarkerType", "MarkerAutomaticBehavior", "SeriesViewer"]
mentionedTypes: ["CategoryChart", "CategoryChartType", "MarkerType", "MarkerSeries", "ScatterLineSeries", "ScatterSplineSeries", "ScatterSeries", "LineSeries", "SplineSeries", "MarkerAutomaticBehavior", "SeriesViewer"]
namespace: Infragistics.Controls.Charts
_language: ja
---
Expand All @@ -22,6 +22,72 @@ _language: ja



<div class="divider--half"></div>

## {Platform} チャート マーカー サイズ

`MarkerSize` プロパティをマーカーをサポートするシリーズに設定することで、データ ポイント マーカーのデバイス非依存ピクセル寸法を正確に制御できます。これにより、マーカー テンプレートやスタイルに関係なく、マーカーが画面上に表示される大きさを正確に制御できます。

デフォルトでは、マーカーのサイズはシリーズのマーカー テンプレートによって決まります。`MarkerSize` に特定の数値を設定すると、そのシリーズのすべてのマーカーがその正確なデバイス非依存ピクセルの幅と高さでレンダリングされます。`MarkerSize` を `NaN` に戻すと、デフォルトのテンプレート駆動のサイズ設定が復元されます。

`MarkerSize` プロパティは、`MarkerSeries` から派生するすべてのシリーズ タイプ (`LineSeries`、`SplineSeries`、`AreaSeries`、`ColumnSeries`、`ScatterSeries`、`ScatterLineSeries`、`ScatterSplineSeries`、極座標/放射状シリーズ タイプなど) で使用できます。

次のコード例は、`XamDataChart` コントロールの `ScatterLineSeries` で `MarkerSize` を 30 デバイス非依存ピクセルに設定する方法を示しています。

```razor
<IgbDataChart>
<IgbScatterLineSeries
MarkerSize="30"
MarkerType="Circle"
XMemberPath="X"
YMemberPath="Y"
XAxisName="xAxis"
YAxisName="yAxis" />
</IgbDataChart>
```

```tsx
<IgrDataChart>
<IgrScatterLineSeries
markerSize={30}
markerType="Circle"
xMemberPath="X"
yMemberPath="Y"
xAxisName="xAxis"
yAxisName="yAxis" />
</IgrDataChart>
```

```html
<igc-data-chart>
<igc-scatter-line-series
marker-size="30"
marker-type="Circle"
x-member-path="X"
y-member-path="Y"
x-axis-name="xAxis"
y-axis-name="yAxis">
</igc-scatter-line-series>
</igc-data-chart>
```

マーカーをデフォルトのテンプレート駆動サイズにリセットするには、`MarkerSize` を `NaN` に設定します (またはマークアップで属性を削除します)。

```razor
<IgbLineSeries MarkerSize="NaN" MarkerType="Circle" ... />
```

```tsx
<IgrLineSeries markerSize={NaN} markerType="Circle" ... />
```

次のサンプルは、インタラクティブなエディターを使用して散布図シリーズで `MarkerSize` を示しています。

`sample="/charts/data-chart/scatter-marker-options", height="500", alt="{Platform} チャート マーカー サイズの例"`

> [!NOTE]
> `BubbleSeries` の場合、`MarkerSize` プロパティはバブルの半径をオーバーライドしません。バブルの半径は、半径データ列と `RadiusScale` によって制御されます。バブルのサイズは、データとスケールの構成によって完全に決まります。

<div class="divider--half"></div>

## {Platform} チャート チェックマーク マーカー タイプ
Expand Down Expand Up @@ -57,7 +123,10 @@ _language: ja

- `MarkerBrushes`
- `MarkerOutlines`
- `MarkerSize`
- `MarkerType`
- `UseLightweightMarkers`
- `MarkerAutomaticBehavior`
- `SeriesViewer.CheckmarkMarkerTemplate`
- `CategoryChart`
- `XamDataChart`
73 changes: 71 additions & 2 deletions doc/kr/components/charts/features/chart-markers.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
---
title: {Platform} Chart Markers | Data Visualization | Infragistics
_description: Infragistics' {Platform} Chart Markers
_keywords: {Platform} Charts, Markers, Infragistics
_keywords: {Platform} Charts, Markers, Marker Size, Infragistics
_language: kr
mentionedTypes: ["CategoryChart", "MarkerType", "MarkerAutomaticBehavior", "SeriesViewer"]
mentionedTypes: ["CategoryChart", "CategoryChartType", "MarkerType", "MarkerSeries", "ScatterLineSeries", "ScatterSplineSeries", "ScatterSeries", "LineSeries", "SplineSeries", "MarkerAutomaticBehavior", "SeriesViewer"]
---

# {Platform} Chart Markers
Expand All @@ -20,6 +20,72 @@ The colors of the markers are also managed by setting the `MarkerBrushes` and `M



<div class="divider--half"></div>

## {Platform} Chart Marker Size

You can control the exact device-independent pixel dimensions of data point markers by setting the `MarkerSize` property on any series that supports markers. This gives you precise control over how large markers appear on screen, regardless of the marker template or style being used.

By default, marker sizing is determined by the series marker template. When you set `MarkerSize` to a specific numeric value, all markers in that series render at that exact device-independent pixel width and height. Setting `MarkerSize` back to `NaN` restores the default template-driven sizing.

The `MarkerSize` property is available on all series types that derive from `MarkerSeries`, including `LineSeries`, `SplineSeries`, `AreaSeries`, `ColumnSeries`, `ScatterSeries`, `ScatterLineSeries`, `ScatterSplineSeries`, and polar/radial series types.

The following code examples show how to set `MarkerSize` to 30 device-independent pixels on a `ScatterLineSeries` in the `XamDataChart` control:

```razor
<IgbDataChart>
<IgbScatterLineSeries
MarkerSize="30"
MarkerType="Circle"
XMemberPath="X"
YMemberPath="Y"
XAxisName="xAxis"
YAxisName="yAxis" />
</IgbDataChart>
```

```tsx
<IgrDataChart>
<IgrScatterLineSeries
markerSize={30}
markerType="Circle"
xMemberPath="X"
yMemberPath="Y"
xAxisName="xAxis"
yAxisName="yAxis" />
</IgrDataChart>
```

```html
<igc-data-chart>
<igc-scatter-line-series
marker-size="30"
marker-type="Circle"
x-member-path="X"
y-member-path="Y"
x-axis-name="xAxis"
y-axis-name="yAxis">
</igc-scatter-line-series>
</igc-data-chart>
```

To reset markers to their default template-driven size, set `MarkerSize` to `NaN` (or remove the attribute in markup):

```razor
<IgbLineSeries MarkerSize="NaN" MarkerType="Circle" ... />
```

```tsx
<IgrLineSeries markerSize={NaN} markerType="Circle" ... />
```

The following sample demonstrates `MarkerSize` on scatter series with an interactive editor:

`sample="/charts/data-chart/scatter-marker-options", height="500", alt="{Platform} Chart Marker Size Example"`

> [!NOTE]
> For `BubbleSeries`, the `MarkerSize` property does not override the bubble radius, which is controlled by the radius data column and the `RadiusScale`. Bubble sizes remain entirely driven by the data and scale configuration.

<div class="divider--half"></div>

## {Platform} Chart Checkmark Marker Type
Expand Down Expand Up @@ -55,7 +121,10 @@ The following is a list of API members mentioned in the above sections:

- `MarkerBrushes`
- `MarkerOutlines`
- `MarkerSize`
- `MarkerType`
- `UseLightweightMarkers`
- `MarkerAutomaticBehavior`
- `SeriesViewer.CheckmarkMarkerTemplate`
- `CategoryChart`
- `XamDataChart`
Loading