Skip to content

Commit 0bcafe2

Browse files
P1l3T0P1l3T0
authored
feat(chart): add patterns documentation (#710)
1 parent b9d3575 commit 0bcafe2

File tree

1 file changed

+169
-0
lines changed

1 file changed

+169
-0
lines changed

‎controls/htmlchart/appearance-and-styling/patterns.md‎

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
---
2+
title: Patterns
3+
page_title: Patterns
4+
description: "Learn how to use Series Patterns of the Telerik UI for ASP.NET AJAX Chart."
5+
slug: htmlchart/appearance-and-styling/patterns
6+
tags: patterns
7+
published: True
8+
position: 8
9+
---
10+
11+
# Patterns
12+
13+
The Chart offers customization options for presenting data visually, including support for using patterns in Chart series. Patterns are providing unique and visually differentiate between them. This article demonstrates how to apply various patterns to the series in a Bar Chart.
14+
15+
## Pattern Settings
16+
17+
The Chart series Patterns can be customized by adjusting the following settings:
18+
19+
| Property | Data Type | Description |
20+
| ------------ | -------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
21+
| `Background` | `System.Drawing.Color` | The background color of the pattern (can be the color's name or hex code). |
22+
| `Color` | `System.Drawing.Color` | The color of the pattern. Defaults to transparent (can be the color's name or hex code). |
23+
| `Gap` | `Double` | The gap between the elements of the pattern. |
24+
| `Radius` | `Double` | The radius of the dots (applicable only for the **Dots** pattern). |
25+
| `Size` | `Double` | The size of the squares in the grid (applicable only for the **Grid** pattern). |
26+
| `Type` | [`PatternType?`](#pattern-types) | Specifies the type of the pattern. |
27+
| `Width` | `Double` | The width of the lines (applicable for the **Crosshatch**, **DiagonalStripes**, and **VerticalStripes** patterns). |
28+
29+
## Pattern Types
30+
31+
Several pattern types can be used to enhance the visual presentation of the Chart series:
32+
33+
- `Crosshatch`
34+
- `DiagonalStripes`
35+
- `Dots`
36+
- `Grid`
37+
- `VerticalStripes`
38+
39+
## Create Patterns
40+
41+
The following examples showcases how to add Patterns to a Bar chart where each series uses a different pattern, allowing users to easily differentiate between them.
42+
43+
> note In order to use the patterns, you will need to set the `RenderAs` property of the Chart to **Canvas**.
44+
45+
### In the Markup
46+
47+
````ASP.NET
48+
<telerik:RadHtmlChart runat="server" ID="ColumnChart" Width="800" RenderAs="Canvas" BackColor="White">
49+
<PlotArea>
50+
<Series>
51+
<telerik:ColumnSeries>
52+
<PatternAppearance Type="VerticalStripes" Color="White" Background="Blue" Width="1.2" Gap="12" />
53+
<SeriesItems>
54+
<telerik:CategorySeriesItem Y="33" />
55+
</SeriesItems>
56+
</telerik:ColumnSeries>
57+
<telerik:ColumnSeries>
58+
<PatternAppearance Type="Crosshatch" Color="White" Background="#9933ff" Width="1.2" Gap="12" />
59+
<SeriesItems>
60+
<telerik:CategorySeriesItem Y="19" />
61+
</SeriesItems>
62+
</telerik:ColumnSeries>
63+
<telerik:ColumnSeries>
64+
<PatternAppearance Type="DiagonalStripes" Color="White" Background="#ff66ff" Width="1.2" Gap="12" />
65+
<SeriesItems>
66+
<telerik:CategorySeriesItem Y="28" />
67+
</SeriesItems>
68+
</telerik:ColumnSeries>
69+
<telerik:ColumnSeries>
70+
<PatternAppearance Type="Grid" Color="Red" Background="White" Size="12" Gap="1.2" />
71+
<SeriesItems>
72+
<telerik:CategorySeriesItem Y="33" />
73+
</SeriesItems>
74+
</telerik:ColumnSeries>
75+
<telerik:ColumnSeries>
76+
<PatternAppearance Type="Dots" Color="#009900" Background="#ffff99" Radius="7.2" Gap="3.6" />
77+
<SeriesItems>
78+
<telerik:CategorySeriesItem Y="26" />
79+
</SeriesItems>
80+
</telerik:ColumnSeries>
81+
</Series>
82+
</PlotArea>
83+
</telerik:RadHtmlChart>
84+
````
85+
86+
### In the CodeBehind
87+
88+
````C#
89+
protected void Page_Load(object sender, EventArgs e)
90+
{
91+
if (!IsPostBack)
92+
{
93+
RadHtmlChart columnChart = new RadHtmlChart
94+
{
95+
ID = "ColumnChart1",
96+
Width = Unit.Pixel(800),
97+
RenderAs = ChartRenderingEngine.Canvas,
98+
BackColor = Color.White
99+
};
100+
101+
columnChart.PlotArea.Series.Add(CreatePatternedColumnSeries(33, PatternType.VerticalStripes, "White", "Blue", 1.2, 12));
102+
columnChart.PlotArea.Series.Add(CreatePatternedColumnSeries(19, PatternType.Crosshatch, "White", "#9933ff", 1.2, 12));
103+
columnChart.PlotArea.Series.Add(CreatePatternedColumnSeries(28, PatternType.DiagonalStripes, "White", "#ff66ff", 1.2, 12));
104+
columnChart.PlotArea.Series.Add(CreatePatternedColumnSeries(33, PatternType.Grid, "Red", "White", 12, 1.2));
105+
columnChart.PlotArea.Series.Add(CreatePatternedColumnSeries(26, PatternType.Dots, "#009900", "#ffff99", 7.2, 3.6, true));
106+
107+
ChartPlaceholder.Controls.Add(columnChart);
108+
}
109+
}
110+
111+
private ColumnSeries CreatePatternedColumnSeries(
112+
decimal yValue,
113+
PatternType patternType,
114+
string color,
115+
string background,
116+
double widthOrSizeOrRadius,
117+
double gap,
118+
bool isDotPattern = false)
119+
{
120+
ColumnSeries series = new ColumnSeries();
121+
series.SeriesItems.Add(new CategorySeriesItem(yValue));
122+
123+
series.PatternAppearance.Type = patternType;
124+
series.PatternAppearance.Color = ColorTranslator.FromHtml(color);
125+
series.PatternAppearance.Background = ColorTranslator.FromHtml(background);
126+
series.PatternAppearance.Width = widthOrSizeOrRadius;
127+
series.PatternAppearance.Gap = gap;
128+
series.PatternAppearance.Radius = isDotPattern ? widthOrSizeOrRadius : 0;
129+
130+
return series;
131+
}
132+
````
133+
````VB
134+
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
135+
If Not IsPostBack Then
136+
Dim columnChart As RadHtmlChart = New RadHtmlChart With {
137+
.ID = "ColumnChart1",
138+
.Width = Unit.Pixel(800),
139+
.RenderAs = ChartRenderingEngine.Canvas,
140+
.BackColor = Color.White
141+
}
142+
143+
columnChart.PlotArea.Series.Add(CreatePatternedColumnSeries(33, PatternType.VerticalStripes, "White", "Blue", 1.2, 12))
144+
columnChart.PlotArea.Series.Add(CreatePatternedColumnSeries(19, PatternType.Crosshatch, "White", "#9933ff", 1.2, 12))
145+
columnChart.PlotArea.Series.Add(CreatePatternedColumnSeries(28, PatternType.DiagonalStripes, "White", "#ff66ff", 1.2, 12))
146+
columnChart.PlotArea.Series.Add(CreatePatternedColumnSeries(33, PatternType.Grid, "Red", "White", 12, 1.2))
147+
columnChart.PlotArea.Series.Add(CreatePatternedColumnSeries(26, PatternType.Dots, "#009900", "#ffff99", 7.2, 3.6, True))
148+
149+
ChartPlaceholder.Controls.Add(columnChart)
150+
End If
151+
End Sub
152+
153+
Private Function CreatePatternedColumnSeries(ByVal yValue As Decimal, ByVal patternType As PatternType, ByVal color As String, ByVal background As String, ByVal widthOrSizeOrRadius As Double, ByVal gap As Double, ByVal Optional isDotPattern As Boolean = False) As ColumnSeries
154+
Dim series As ColumnSeries = New ColumnSeries()
155+
156+
series.SeriesItems.Add(New CategorySeriesItem(yValue))
157+
158+
series.PatternAppearance.Type = patternType
159+
series.PatternAppearance.Color = ColorTranslator.FromHtml(color)
160+
series.PatternAppearance.Background = ColorTranslator.FromHtml(background)
161+
series.PatternAppearance.Width = widthOrSizeOrRadius
162+
series.PatternAppearance.Gap = gap
163+
series.PatternAppearance.Radius = If(isDotPattern, widthOrSizeOrRadius, 0)
164+
165+
Return series
166+
End Function
167+
````
168+
169+
For a live demonstration, go to the [Chart Series Patterns](https://demos.telerik.com/aspnet-ajax/htmlchart/examples/appearance/patterns/defaultcs.aspx) demo.

0 commit comments

Comments
 (0)