Skip to content

Commit 8b0679a

Browse files
marin-bratanovmarin-bratanov
committed
docs(chart): scatter line chart
1 parent d443349 commit 8b0679a

File tree

6 files changed

+185
-36
lines changed

6 files changed

+185
-36
lines changed

‎_config.yml

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -280,13 +280,15 @@ intro_columns:
280280
"Line Charts": "components/chart/types/line"
281281
"Pie Charts": "components/chart/types/pie"
282282
"Donut Charts": "components/chart/types/donut"
283+
"Bubble Charts": "components/chart/types/bubble"
284+
"Scatter Charts": "components/chart/types/scatter"
285+
"ScatterLine Charts": "components/chart/types/scatterline"
283286
-
284287

285288
## The application virtual path
286289
baseurl: /blazor-ui
287290

288291
## Latest UI for Blazor version. Used in some articles
289-
290292
uiForBlazorLatestVersion: "2.0.0"
291293

292294
## The Kendo UI version used

‎_contentTemplates/chart/link-to-basics.md

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,3 +75,51 @@ You can configure the values of `Gap` and `Spacing` for the whole chart in the f
7575
![](images/gap-and-spacing.png)
7676
#end
7777

78+
79+
#markers-line-scatter
80+
### Markers
81+
82+
Each data item is denoted by a marker. You can control its settings through the child `ChartSeriesMarkers` tag of the series.
83+
84+
You can hide the markers by setting their `Visible` property to `false`.
85+
86+
The `Size` property is the size of the marker in pixels.
87+
88+
The `Type` property is a member of the `Telerik.Blazor.ChartSeriesMarkersType` enum:
89+
90+
* `Circle` - the default
91+
* `Cross`
92+
* `Square`
93+
* `Triangle`
94+
95+
The `Rotation` property is the degrees with which the marker is rotated from its default orientation.
96+
#end
97+
98+
99+
#color-line-scatter
100+
### Color
101+
102+
The color of the line and markers is controlled through the `Color` property that can take any valid CSS color (for example, `#abcdef`, `#f00`, or `blue`).
103+
104+
You can control the color of the markers by using the `Background` property of the nested `ChartSeriesMarkers` tag.
105+
106+
#### ColorField
107+
108+
You can pass a `ColorField` to the chart as a part of the model, and the data points (markers) will use that color instead of the `Color` of the series or the `Background` of the markers settings.
109+
#end
110+
111+
112+
#line-style-line
113+
### Line Style
114+
115+
You can render the lines between the points with different styles. The supported styles can be set via the `Style` property that takes a member of `Telerik.Blazor.ChartSeriesStyle` enum:
116+
117+
* `Normal`—This is the default style. It produces a straight line between data points.
118+
* `Step`—The style renders the connection between data points through vertical and horizontal lines. It is suitable for indicating that the value is constant between the changes.
119+
* `Smooth`—This style causes the Chart to display a fitted curve through data points. It is suitable when the data requires to be displayed with a curve, or when you wish to connect the points with smooth instead of straight lines.
120+
121+
>caption Comparison between the line styles
122+
123+
![](images/line-chart-step-and-smooth.png)
124+
#end
125+

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

21.9 KB
Loading

‎components/chart/types/line.md

Lines changed: 3 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -60,28 +60,10 @@ Line series
6060

6161
## Line Chart Specific Appearance Settings
6262

63-
## Markers
63+
@[template](/_contentTemplates/chart/link-to-basics.md#markers-line-scatter)
6464

65-
Each data item is denoted by a marker. You can control its settings through the child `TelerikChartSeriesMarkers` tag of the series.
65+
@[template](/_contentTemplates/chart/link-to-basics.md#color-line-scatter)
6666

67-
You can hide the markers by setting their `Visible` property to `false`.
68-
69-
The `Size` property is the size of the marker in pixels.
70-
71-
The `Type` property is a member of the `Telerik.Blazor.ChartSeriesMarkersType` enum:
72-
73-
* `Circle` - the default
74-
* `Cross`
75-
* `Square`
76-
* `Triangle`
77-
78-
The `Rotation` property is the degrees with which the marker is rotated from its default orientation.
79-
80-
### Color
81-
82-
The color of the line is controlled through the `Color` property that can take any valid CSS color (for example, `#abcdef`, `#f00`, or `blue`).
83-
84-
You can control the color of the markers by using the `Background` property of the nested `ChartSeriesMarkers` tag.
8567

8668
### Missing Values
8769

@@ -92,17 +74,7 @@ If some values are missing from the series data (they are `null`), you can have
9274
* `Gap` - behaves the same way as `Zero` because a line chart cannot have a gap in its filled area.
9375

9476

95-
### Line Style
96-
97-
You can render the lines between the points with different styles. The supported styles can be set via the `Style` property that takes a member of `Telerik.Blazor.ChartSeriesStyle` enum:
98-
99-
* `Normal`—This is the default style. It produces a straight line between data points.
100-
* `Step`—The style renders the connection between data points through vertical and horizontal lines. It is suitable for indicating that the value is constant between the changes.
101-
* `Smooth`—This style causes the Area Chart to display a fitted curve through data points. It is suitable when the data requires to be displayed with a curve, or when you wish to connect the points with smooth instead of straight lines.
102-
103-
>caption Comparison between the line styles
104-
105-
![](images/line-chart-step-and-smooth.png)
77+
@[template](/_contentTemplates/chart/link-to-basics.md#line-style-line)
10678

10779

10880
## See Also

‎components/chart/types/scatter.md

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -98,11 +98,9 @@ To create a scatter chart:
9898

9999
## Scatter Chart Specific Appearance Settings
100100

101-
### Color
101+
@[template](/_contentTemplates/chart/link-to-basics.md#markers-line-scatter)
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`).
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.
103+
@[template](/_contentTemplates/chart/link-to-basics.md#color-line-scatter)
106104

107105

108106
## See Also

‎components/chart/types/scatterline.md

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
---
2+
title: ScatterLine
3+
page_title: Chart for Blazor | ScatterLine
4+
description: Overview of the ScatterLine Chart for Blazor
5+
slug: components/chart/types/scatterline
6+
tags: telerik,blazor,chart,scatterline
7+
published: True
8+
position: 0
9+
---
10+
11+
# ScatterLine Chart
12+
13+
The **ScatterLine** chart is very similar to the [Scatter]({%slug components/chart/types/scatter%}) chart—it shows data as points defined by their items' values, but the points are connected by lines and thus it can account for missing values in a series. Its x-axis is numerical and does not require items.
14+
15+
You would usually use ScatterLine charts for showing the relation between different sets of data, for example scientific (experimental) results, or when you need to have two numerical axes on a line-type chart.
16+
17+
>caption ScatterLine chart. Results from the first code snippet below
18+
19+
![](images/basic-scatterline-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.ScatterLine`
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+
@* ScatterLine Series *@
34+
35+
<TelerikChart>
36+
<ChartTitle Text="Charge current vs. charge time"></ChartTitle>
37+
<ChartLegend Visible="true"></ChartLegend>
38+
39+
<ChartSeriesItems>
40+
<ChartSeries Type="ChartSeriesType.ScatterLine"
41+
Data="@Series1Data"
42+
Name="0.8C"
43+
XField="@nameof(ModelData.X)"
44+
YField="@nameof(ModelData.Y)">
45+
</ChartSeries>
46+
47+
<ChartSeries Type="ChartSeriesType.ScatterLine"
48+
Data="@Series2Data"
49+
Name="1.6C"
50+
XField="@nameof(ModelData.X)"
51+
YField="@nameof(ModelData.Y)">
52+
</ChartSeries>
53+
54+
<ChartSeries Type="ChartSeriesType.ScatterLine"
55+
Data="@Series3Data"
56+
Name="3.1C"
57+
XField="@nameof(ModelData.X)"
58+
YField="@nameof(ModelData.Y)">
59+
</ChartSeries>
60+
</ChartSeriesItems>
61+
62+
<ChartXAxes>
63+
64+
<ChartXAxis Max="100">
65+
<ChartXAxisTitle Text="Time"></ChartXAxisTitle>
66+
<ChartXAxisLabels Format="{0}m"></ChartXAxisLabels>
67+
</ChartXAxis>
68+
</ChartXAxes>
69+
70+
<ChartYAxes>
71+
<ChartYAxis Max="100">
72+
<ChartYAxisTitle Text="Charge"></ChartYAxisTitle>
73+
<ChartYAxisLabels Format="{0}%"></ChartYAxisLabels>
74+
</ChartYAxis>
75+
76+
</ChartYAxes>
77+
</TelerikChart>
78+
79+
@code {
80+
public class ModelData
81+
{
82+
public int X { get; set; }
83+
public int Y { get; set; }
84+
}
85+
86+
public List<ModelData> Series1Data = new List<ModelData>()
87+
{
88+
new ModelData() { X = 10, Y = 10 },
89+
new ModelData() { X = 15, Y = 20 },
90+
new ModelData() { X = 20, Y = 25 },
91+
new ModelData() { X = 32, Y = 40 },
92+
new ModelData() { X = 43, Y = 50 },
93+
new ModelData() { X = 55, Y = 60 },
94+
new ModelData() { X = 60, Y = 70 },
95+
new ModelData() { X = 70, Y = 80 },
96+
new ModelData() { X = 90, Y = 100 },
97+
};
98+
99+
public List<ModelData> Series2Data = new List<ModelData>()
100+
{
101+
new ModelData() { X = 10, Y = 40 },
102+
new ModelData() { X = 17, Y = 50 },
103+
new ModelData() { X = 18, Y = 70 },
104+
new ModelData() { X = 35, Y = 90 },
105+
new ModelData() { X = 47, Y = 95 },
106+
new ModelData() { X = 60, Y = 100 },
107+
};
108+
109+
public List<ModelData> Series3Data = new List<ModelData>()
110+
{
111+
new ModelData() { X = 10, Y = 70 },
112+
new ModelData() { X = 13, Y = 90 },
113+
new ModelData() { X = 25, Y = 100 },
114+
};
115+
}
116+
````
117+
118+
119+
## ScatterLine Chart Specific Appearance Settings
120+
121+
@[template](/_contentTemplates/chart/link-to-basics.md#markers-line-scatter)
122+
123+
@[template](/_contentTemplates/chart/link-to-basics.md#color-line-scatter)
124+
125+
@[template](/_contentTemplates/chart/link-to-basics.md#line-style-line)
126+
127+
## See Also
128+
129+
* [Live Demo: ScatterLine Chart](https://demos.telerik.com/blazor-ui/chart/scatter-line-chart)

0 commit comments

Comments
 (0)