Skip to content

Commit 66cf4dc

Browse files
marin-bratanovmarin-bratanov
committed
docs(chart): scatter series
1 parent 4810b48 commit 66cf4dc

File tree

3 files changed

+113
-1
lines changed

3 files changed

+113
-1
lines changed

‎components/chart/types/bubble.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,9 @@ To create a bubble chart:
100100

101101
### Color
102102

103-
The color of a series is controlled through the `Color` property that can take any valid CSS color (for example, `#abcdef`, `#f00`, or `blue`). The color control the fill color of the bubble.
103+
The color of a series is controlled through the `Color` property that can take any valid CSS color (for example, `#abcdef`, `#f00`, or `blue`). The color control the fill color of the bubble.
104+
105+
The `ColorField` can change the color of individual items. To use it, pass a valid CSS color to the corresponding field in the model and the chart will use its values instead of the `Color` parameter.
104106

105107
<!--
106108

‎components/chart/types/images/basic-scatter-chart.png

16.1 KB
Loading

‎components/chart/types/scatter.md

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
---
2+
title: Scatter
3+
page_title: Chart for Blazor | Scatter
4+
description: Overview of the Scatter Chart for Blazor
5+
slug: components/chart/types/scatter
6+
tags: telerik,blazor,chart,scatter
7+
published: True
8+
position: 0
9+
---
10+
11+
# Scatter Chart
12+
13+
A **Scatter** chart shows data as points defined by their items' values. Its x-axis is also numerical and does not require categorical items, but numerical values.
14+
15+
Scatter charts are useful for showing the relation between different sets of data, for example scientific (experimental) results.
16+
17+
>caption Scatter chart. Results from the first code snippet below
18+
19+
![](images/basic-scatter-chart.png)
20+
21+
@[template](/_contentTemplates/chart/link-to-basics.md#understand-basics-and-databinding-first)
22+
23+
To create a scatter chart:
24+
25+
1. add a `ChartSeries` to the `ChartSeriesItems` collection
26+
2. set its `Type` property to `ChartSeriesType.Scatter`
27+
3. provide a data collection to its `Data` property, which contains numerical data for the X and Y axes
28+
29+
30+
>caption A bubble chart that shows projected population change on a plot of life expectancy versus fertility rate
31+
32+
````CSHTML
33+
@* Scatter Series *@
34+
35+
<TelerikChart>
36+
<ChartTitle Text="Unrecoverable Errors Per Minute vs. Signal Level"></ChartTitle>
37+
38+
<ChartSeriesItems>
39+
<ChartSeries Type="ChartSeriesType.Scatter"
40+
Data="@Series1Data"
41+
Name="APSK modulation"
42+
XField="@nameof(ModelData.Strength)"
43+
YField="@nameof(ModelData.Errors)">
44+
</ChartSeries>
45+
46+
<ChartSeries Type="ChartSeriesType.Scatter"
47+
Data="@Series2Data"
48+
Name="QAM modulation"
49+
XField="@nameof(ModelData.Strength)"
50+
YField="@nameof(ModelData.Errors)">
51+
</ChartSeries>
52+
</ChartSeriesItems>
53+
54+
<ChartXAxes>
55+
<ChartXAxis Max="-30" AxisCrossingValue="@(new object[] { -100 })">
56+
<ChartXAxisTitle Text="Signal Strength, dBm"></ChartXAxisTitle>
57+
</ChartXAxis>
58+
</ChartXAxes>
59+
60+
<ChartYAxes>
61+
<ChartYAxis>
62+
<ChartYAxisTitle Text="Error count"></ChartYAxisTitle>
63+
</ChartYAxis>
64+
</ChartYAxes>
65+
</TelerikChart>
66+
67+
@code {
68+
public class ModelData
69+
{
70+
public double Strength { get; set; }
71+
public double Errors { get; set; }
72+
}
73+
74+
public List<ModelData> Series1Data = new List<ModelData>()
75+
{
76+
new ModelData { Strength = -82, Errors = 15 },
77+
new ModelData { Strength = -79, Errors = 13 },
78+
new ModelData { Strength = -77, Errors = 10 },
79+
new ModelData { Strength = -74, Errors = 7 },
80+
new ModelData { Strength = -70, Errors = 3 },
81+
new ModelData { Strength = -65, Errors = 1 }
82+
};
83+
84+
public List<ModelData> Series2Data = new List<ModelData>()
85+
{
86+
new ModelData { Strength = -80, Errors = 25 },
87+
new ModelData { Strength = -76, Errors = 22 },
88+
new ModelData { Strength = -73, Errors = 17 },
89+
new ModelData { Strength = -70, Errors = 15 },
90+
new ModelData { Strength = -65, Errors = 12 },
91+
new ModelData { Strength = -61, Errors = 10 },
92+
new ModelData { Strength = -55, Errors = 7 },
93+
new ModelData { Strength = -50, Errors = 3 }
94+
};
95+
}
96+
````
97+
98+
99+
## Scatter Chart Specific Appearance Settings
100+
101+
### Color
102+
103+
The color of a series is controlled through the `Color` property that can take any valid CSS color (for example, `#abcdef`, `#f00`, or `blue`).
104+
105+
The `ColorField` can change the color of individual items. To use it, pass a valid CSS color to the corresponding field in the model and the chart will use its values instead of the `Color` parameter.
106+
107+
108+
## See Also
109+
110+
* [Live Demo: Area Chart](https://demos.telerik.com/blazor-ui/chart/area-chart)

0 commit comments

Comments
 (0)