Skip to content
This repository was archived by the owner on Jun 8, 2026. It is now read-only.

Commit 06fe0ad

Browse files
CopilotCopilot
authored
Add MarkerSize property documentation to chart markers topics (#2003)
* Add MarkerSize property documentation to chart markers topics (en, jp, kr) * Clarify MarkerSize uses device-independent pixels, not absolute pixels
1 parent d305b42 commit 06fe0ad

3 files changed

Lines changed: 213 additions & 6 deletions

File tree

‎doc/en/components/charts/features/chart-markers.md‎

Lines changed: 71 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
---
22
title: {Platform} Chart Markers | Data Visualization | Infragistics
33
_description: Infragistics' {Platform} Chart Markers
4-
_keywords: {Platform} Charts, Markers, Infragistics
4+
_keywords: {Platform} Charts, Markers, Marker Size, Infragistics
55
_license: commercial
6-
mentionedTypes: ["CategoryChart", "CategoryChartType", "MarkerType", "MarkerAutomaticBehavior", "SeriesViewer"]
6+
mentionedTypes: ["CategoryChart", "CategoryChartType", "MarkerType", "MarkerSeries", "ScatterLineSeries", "ScatterSplineSeries", "ScatterSeries", "LineSeries", "SplineSeries", "MarkerAutomaticBehavior", "SeriesViewer"]
77
namespace: Infragistics.Controls.Charts
88
---
99

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

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

24+
## {Platform} Chart Marker Size
25+
26+
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.
27+
28+
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.
29+
30+
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.
31+
32+
The following code examples show how to set `MarkerSize` to 30 device-independent pixels on a `ScatterLineSeries` in the `XamDataChart` control:
33+
34+
```razor
35+
<IgbDataChart>
36+
<IgbScatterLineSeries
37+
MarkerSize="30"
38+
MarkerType="Circle"
39+
XMemberPath="X"
40+
YMemberPath="Y"
41+
XAxisName="xAxis"
42+
YAxisName="yAxis" />
43+
</IgbDataChart>
44+
```
45+
46+
```tsx
47+
<IgrDataChart>
48+
<IgrScatterLineSeries
49+
markerSize={30}
50+
markerType="Circle"
51+
xMemberPath="X"
52+
yMemberPath="Y"
53+
xAxisName="xAxis"
54+
yAxisName="yAxis" />
55+
</IgrDataChart>
56+
```
57+
58+
```html
59+
<igc-data-chart>
60+
<igc-scatter-line-series
61+
marker-size="30"
62+
marker-type="Circle"
63+
x-member-path="X"
64+
y-member-path="Y"
65+
x-axis-name="xAxis"
66+
y-axis-name="yAxis">
67+
</igc-scatter-line-series>
68+
</igc-data-chart>
69+
```
70+
71+
To reset markers to their default template-driven size, set `MarkerSize` to `NaN` (or remove the attribute in markup):
72+
73+
```razor
74+
<IgbLineSeries MarkerSize="NaN" MarkerType="Circle" ... />
75+
```
76+
77+
```tsx
78+
<IgrLineSeries markerSize={NaN} markerType="Circle" ... />
79+
```
80+
81+
The following sample demonstrates `MarkerSize` on scatter series with an interactive editor:
82+
83+
`sample="/charts/data-chart/scatter-marker-options", height="500", alt="{Platform} Chart Marker Size Example"`
84+
85+
> [!NOTE]
86+
> 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.
87+
88+
<div class="divider--half"></div>
89+
2490
## {Platform} Chart Checkmark Marker Type
2591

2692
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.
@@ -54,7 +120,10 @@ The following is a list of API members mentioned in the above sections:
54120

55121
- `MarkerBrushes`
56122
- `MarkerOutlines`
123+
- `MarkerSize`
57124
- `MarkerType`
125+
- `UseLightweightMarkers`
58126
- `MarkerAutomaticBehavior`
59127
- `SeriesViewer.CheckmarkMarkerTemplate`
60128
- `CategoryChart`
129+
- `XamDataChart`

‎doc/jp/components/charts/features/chart-markers.md‎

Lines changed: 71 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
---
22
title: {Platform} チャート マーカー | データ可視化 | インフラジスティックス
33
_description: インフラジスティックスの {Platform} チャート マーカー
4-
_keywords: {Platform} Charts, Markers, Infragistics, {Platform} チャート, マーカー, インフラジスティックス
4+
_keywords: {Platform} Charts, Markers, Marker Size, Infragistics, {Platform} チャート, マーカー, マーカー サイズ, インフラジスティックス
55
_license: commercial
6-
mentionedTypes: ["CategoryChart", "CategoryChartType", "MarkerType", "MarkerAutomaticBehavior", "SeriesViewer"]
6+
mentionedTypes: ["CategoryChart", "CategoryChartType", "MarkerType", "MarkerSeries", "ScatterLineSeries", "ScatterSplineSeries", "ScatterSeries", "LineSeries", "SplineSeries", "MarkerAutomaticBehavior", "SeriesViewer"]
77
namespace: Infragistics.Controls.Charts
88
_language: ja
99
---
@@ -22,6 +22,72 @@ _language: ja
2222

2323

2424

25+
<div class="divider--half"></div>
26+
27+
## {Platform} チャート マーカー サイズ
28+
29+
`MarkerSize` プロパティをマーカーをサポートするシリーズに設定することで、データ ポイント マーカーのデバイス非依存ピクセル寸法を正確に制御できます。これにより、マーカー テンプレートやスタイルに関係なく、マーカーが画面上に表示される大きさを正確に制御できます。
30+
31+
デフォルトでは、マーカーのサイズはシリーズのマーカー テンプレートによって決まります。`MarkerSize` に特定の数値を設定すると、そのシリーズのすべてのマーカーがその正確なデバイス非依存ピクセルの幅と高さでレンダリングされます。`MarkerSize` を `NaN` に戻すと、デフォルトのテンプレート駆動のサイズ設定が復元されます。
32+
33+
`MarkerSize` プロパティは、`MarkerSeries` から派生するすべてのシリーズ タイプ (`LineSeries`、`SplineSeries`、`AreaSeries`、`ColumnSeries`、`ScatterSeries`、`ScatterLineSeries`、`ScatterSplineSeries`、極座標/放射状シリーズ タイプなど) で使用できます。
34+
35+
次のコード例は、`XamDataChart` コントロールの `ScatterLineSeries` で `MarkerSize` を 30 デバイス非依存ピクセルに設定する方法を示しています。
36+
37+
```razor
38+
<IgbDataChart>
39+
<IgbScatterLineSeries
40+
MarkerSize="30"
41+
MarkerType="Circle"
42+
XMemberPath="X"
43+
YMemberPath="Y"
44+
XAxisName="xAxis"
45+
YAxisName="yAxis" />
46+
</IgbDataChart>
47+
```
48+
49+
```tsx
50+
<IgrDataChart>
51+
<IgrScatterLineSeries
52+
markerSize={30}
53+
markerType="Circle"
54+
xMemberPath="X"
55+
yMemberPath="Y"
56+
xAxisName="xAxis"
57+
yAxisName="yAxis" />
58+
</IgrDataChart>
59+
```
60+
61+
```html
62+
<igc-data-chart>
63+
<igc-scatter-line-series
64+
marker-size="30"
65+
marker-type="Circle"
66+
x-member-path="X"
67+
y-member-path="Y"
68+
x-axis-name="xAxis"
69+
y-axis-name="yAxis">
70+
</igc-scatter-line-series>
71+
</igc-data-chart>
72+
```
73+
74+
マーカーをデフォルトのテンプレート駆動サイズにリセットするには、`MarkerSize` を `NaN` に設定します (またはマークアップで属性を削除します)。
75+
76+
```razor
77+
<IgbLineSeries MarkerSize="NaN" MarkerType="Circle" ... />
78+
```
79+
80+
```tsx
81+
<IgrLineSeries markerSize={NaN} markerType="Circle" ... />
82+
```
83+
84+
次のサンプルは、インタラクティブなエディターを使用して散布図シリーズで `MarkerSize` を示しています。
85+
86+
`sample="/charts/data-chart/scatter-marker-options", height="500", alt="{Platform} チャート マーカー サイズの例"`
87+
88+
> [!NOTE]
89+
> `BubbleSeries` の場合、`MarkerSize` プロパティはバブルの半径をオーバーライドしません。バブルの半径は、半径データ列と `RadiusScale` によって制御されます。バブルのサイズは、データとスケールの構成によって完全に決まります。
90+
2591
<div class="divider--half"></div>
2692

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

58124
- `MarkerBrushes`
59125
- `MarkerOutlines`
126+
- `MarkerSize`
60127
- `MarkerType`
128+
- `UseLightweightMarkers`
61129
- `MarkerAutomaticBehavior`
62130
- `SeriesViewer.CheckmarkMarkerTemplate`
63131
- `CategoryChart`
132+
- `XamDataChart`

‎doc/kr/components/charts/features/chart-markers.md‎

Lines changed: 71 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
---
22
title: {Platform} Chart Markers | Data Visualization | Infragistics
33
_description: Infragistics' {Platform} Chart Markers
4-
_keywords: {Platform} Charts, Markers, Infragistics
4+
_keywords: {Platform} Charts, Markers, Marker Size, Infragistics
55
_language: kr
6-
mentionedTypes: ["CategoryChart", "MarkerType", "MarkerAutomaticBehavior", "SeriesViewer"]
6+
mentionedTypes: ["CategoryChart", "CategoryChartType", "MarkerType", "MarkerSeries", "ScatterLineSeries", "ScatterSplineSeries", "ScatterSeries", "LineSeries", "SplineSeries", "MarkerAutomaticBehavior", "SeriesViewer"]
77
---
88

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

2121

2222

23+
<div class="divider--half"></div>
24+
25+
## {Platform} Chart Marker Size
26+
27+
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.
28+
29+
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.
30+
31+
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.
32+
33+
The following code examples show how to set `MarkerSize` to 30 device-independent pixels on a `ScatterLineSeries` in the `XamDataChart` control:
34+
35+
```razor
36+
<IgbDataChart>
37+
<IgbScatterLineSeries
38+
MarkerSize="30"
39+
MarkerType="Circle"
40+
XMemberPath="X"
41+
YMemberPath="Y"
42+
XAxisName="xAxis"
43+
YAxisName="yAxis" />
44+
</IgbDataChart>
45+
```
46+
47+
```tsx
48+
<IgrDataChart>
49+
<IgrScatterLineSeries
50+
markerSize={30}
51+
markerType="Circle"
52+
xMemberPath="X"
53+
yMemberPath="Y"
54+
xAxisName="xAxis"
55+
yAxisName="yAxis" />
56+
</IgrDataChart>
57+
```
58+
59+
```html
60+
<igc-data-chart>
61+
<igc-scatter-line-series
62+
marker-size="30"
63+
marker-type="Circle"
64+
x-member-path="X"
65+
y-member-path="Y"
66+
x-axis-name="xAxis"
67+
y-axis-name="yAxis">
68+
</igc-scatter-line-series>
69+
</igc-data-chart>
70+
```
71+
72+
To reset markers to their default template-driven size, set `MarkerSize` to `NaN` (or remove the attribute in markup):
73+
74+
```razor
75+
<IgbLineSeries MarkerSize="NaN" MarkerType="Circle" ... />
76+
```
77+
78+
```tsx
79+
<IgrLineSeries markerSize={NaN} markerType="Circle" ... />
80+
```
81+
82+
The following sample demonstrates `MarkerSize` on scatter series with an interactive editor:
83+
84+
`sample="/charts/data-chart/scatter-marker-options", height="500", alt="{Platform} Chart Marker Size Example"`
85+
86+
> [!NOTE]
87+
> 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.
88+
2389
<div class="divider--half"></div>
2490

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

56122
- `MarkerBrushes`
57123
- `MarkerOutlines`
124+
- `MarkerSize`
58125
- `MarkerType`
126+
- `UseLightweightMarkers`
59127
- `MarkerAutomaticBehavior`
60128
- `SeriesViewer.CheckmarkMarkerTemplate`
61129
- `CategoryChart`
130+
- `XamDataChart`

0 commit comments

Comments
 (0)