Skip to content

Commit e795acd

Browse files
mohammednowfel4989mohammednowfel4989
committed
982808: Resolved the conflicts in the PR.
1 parent dbf7c68 commit e795acd

File tree

1 file changed

+52
-50
lines changed

1 file changed

+52
-50
lines changed

‎blazor/chart/logarithmic-axis.md‎

Lines changed: 52 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
layout: post
33
title: Logarithmic Axis in Blazor Charts Component | Syncfusion
4-
description: Check out and learn about the Logarithmic Axis in the Syncfusion Blazor Charts component and more.
4+
description: Check out and learn how to configure and customize logarithmic axis in the Syncfusion Blazor Charts component.
55
platform: Blazor
66
control: Chart
77
documentation: ug
@@ -11,9 +11,9 @@ documentation: ug
1111

1212
<!-- markdownlint-disable MD033 -->
1313

14-
Use a logarithmic axis when data spans multiple orders of magnitude (for example, 10<sup>-6</sup> to 10<sup>6</sup>). This scale makes it easier to visualize both small and large values on the same chart.
14+
Use a logarithmic axis when data spans several orders of magnitude (for example, 10<sup>-6</sup> to 10<sup>6</sup>). This scale helps visualize both small and large values on the same chart.
1515

16-
Watch the following video to learn how to customize the logarithmic axis.
16+
Logarithmic axis customization in the Syncfusion Blazor Charts component can also be explored through the video linked below.
1717

1818
{% youtube "youtube:https://www.youtube.com/watch?v=_67hCchVOu4" %}
1919

@@ -22,9 +22,9 @@ Watch the following video to learn how to customize the logarithmic axis.
2222
@using Syncfusion.Blazor.Charts
2323
2424
<SfChart>
25-
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime"/>
25+
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" />
2626
27-
<ChartPrimaryYAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Logarithmic"/>
27+
<ChartPrimaryYAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Logarithmic" />
2828
2929
<ChartSeriesCollection>
3030
<ChartSeries DataSource="@Data" XName="XValue" YName="YValue" />
@@ -46,30 +46,30 @@ Watch the following video to learn how to customize the logarithmic axis.
4646
new ChartData { XValue = new DateTime(2008, 01, 01), YValue = 1000 },
4747
new ChartData { XValue = new DateTime(2009, 01, 01), YValue = 8000 },
4848
new ChartData { XValue = new DateTime(2010, 01, 01), YValue = 90000 },
49-
new ChartData { XValue = new DateTime(2011, 01, 01), YValue = 99000 },
49+
new ChartData { XValue = new DateTime(2011, 01, 01), YValue = 99000 }
5050
};
5151
}
5252
5353
```
54-
{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLAMLhHLhczYuye?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
54+
{% previewsample "https://blazorplayground.syncfusion.com/embed/hjhSZYVBgIGRCwEf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
5555

5656
![Blazor Chart with Logarithmic Axis](images/logarithmic-axis/blazor-chart-logarithmic-axis.png)
5757

5858
## Range
5959

60-
The axis range will be calculated automatically based on the provided data; however, the axis range can also be customized using [Minimum](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonAxis.html#Syncfusion_Blazor_Charts_ChartCommonAxis_Minimum), [Maximum](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonAxis.html#Syncfusion_Blazor_Charts_ChartCommonAxis_Maximum) and [Interval](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonAxis.html#Syncfusion_Blazor_Charts_ChartCommonAxis_Interval) properties.
60+
The axis range is calculated automatically based on the data. You can also customize it using the [Minimum](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonAxis.html#Syncfusion_Blazor_Charts_ChartCommonAxis_Minimum), [Maximum](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonAxis.html#Syncfusion_Blazor_Charts_ChartCommonAxis_Maximum), and [Interval](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonAxis.html#Syncfusion_Blazor_Charts_ChartCommonAxis_Interval) properties.
6161

6262
```cshtml
6363
6464
@using Syncfusion.Blazor.Charts
6565
6666
<SfChart>
67-
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime"/>
67+
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" />
6868
69-
<ChartPrimaryYAxis Minimum="100" Maximum="10000" ValueType="Syncfusion.Blazor.Charts.ValueType.Logarithmic"/>
69+
<ChartPrimaryYAxis Minimum="100" Maximum="10000" ValueType="Syncfusion.Blazor.Charts.ValueType.Logarithmic" />
7070
7171
<ChartSeriesCollection>
72-
<ChartSeries DataSource="@Data" XName="XValue" YName="YValue"/>
72+
<ChartSeries DataSource="@Data" XName="XValue" YName="YValue" />
7373
</ChartSeriesCollection>
7474
</SfChart>
7575
@@ -80,38 +80,38 @@ The axis range will be calculated automatically based on the provided data; howe
8080
public double YValue { get; set; }
8181
}
8282
83-
public List<ChartData> Data = new List<ChartData>
83+
public List<ChartData> Data = new List<ChartData>
8484
{
8585
new ChartData { XValue = new DateTime(2005, 01, 01), YValue = 100 },
8686
new ChartData { XValue = new DateTime(2006, 01, 01), YValue = 200 },
8787
new ChartData { XValue = new DateTime(2007, 01, 01), YValue = 500 },
8888
new ChartData { XValue = new DateTime(2008, 01, 01), YValue = 1000 },
8989
new ChartData { XValue = new DateTime(2009, 01, 01), YValue = 8000 },
9090
new ChartData { XValue = new DateTime(2010, 01, 01), YValue = 90000 },
91-
new ChartData { XValue = new DateTime(2011, 01, 01), YValue = 99000 },
91+
new ChartData { XValue = new DateTime(2011, 01, 01), YValue = 99000 }
9292
};
9393
}
9494
9595
```
96-
{% previewsample "https://blazorplayground.syncfusion.com/embed/hXrqChBHBgilgqlG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
96+
{% previewsample "https://blazorplayground.syncfusion.com/embed/rthyDkBBUHWqIFjh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
9797

9898
![Changing Blazor Line Chart Logarithmic Axis based on Range](images/logarithmic-axis/blazor-line-chart-axis-based-on-range.png)
9999

100100
## Logarithmic base
101101

102-
Logarithmic base can be customized using the [LogBase](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonAxis.html#Syncfusion_Blazor_Charts_ChartCommonAxis_LogBase) property of the axis. When the LogBase is 5, the axis values are 5<sup>-2</sup>, 5<sup>-1</sup>, 5<sup>0</sup>, 5<sup>1</sup>, 5<sup>2</sup> and so on.
102+
Customize the logarithmic base using the [LogBase](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonAxis.html#Syncfusion_Blazor_Charts_ChartCommonAxis_LogBase) property of the axis. For example, when the base is b, labels appear at b<sup>-2</sup>, b<sup>-1</sup>, b<sup>0</sup>, b<sup>1</sup>, b<sup>2</sup>, and so on.
103103

104104
```cshtml
105105
106106
@using Syncfusion.Blazor.Charts
107107
108108
<SfChart>
109-
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime"/>
109+
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" />
110110
111-
<ChartPrimaryYAxis LogBase="2" ValueType="Syncfusion.Blazor.Charts.ValueType.Logarithmic"/>
111+
<ChartPrimaryYAxis LogBase="2" ValueType="Syncfusion.Blazor.Charts.ValueType.Logarithmic" />
112112
113113
<ChartSeriesCollection>
114-
<ChartSeries DataSource="@Data" XName="XValue" YName="YValue" />
114+
<ChartSeries DataSource="@Data" XName="XValue" YName="YValue" />
115115
</ChartSeriesCollection>
116116
</SfChart>
117117
@@ -122,38 +122,38 @@ Logarithmic base can be customized using the [LogBase](https://help.syncfusion.
122122
public double YValue { get; set; }
123123
}
124124
125-
public List<ChartData> Data = new List<ChartData>
125+
public List<ChartData> Data = new List<ChartData>
126126
{
127127
new ChartData { XValue = new DateTime(2005, 01, 01), YValue = 100 },
128128
new ChartData { XValue = new DateTime(2006, 01, 01), YValue = 200 },
129129
new ChartData { XValue = new DateTime(2007, 01, 01), YValue = 500 },
130130
new ChartData { XValue = new DateTime(2008, 01, 01), YValue = 1000 },
131131
new ChartData { XValue = new DateTime(2009, 01, 01), YValue = 8000 },
132132
new ChartData { XValue = new DateTime(2010, 01, 01), YValue = 90000 },
133-
new ChartData { XValue = new DateTime(2011, 01, 01), YValue = 99000 },
133+
new ChartData { XValue = new DateTime(2011, 01, 01), YValue = 99000 }
134134
};
135135
}
136136
137137
```
138-
{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVKWVLHhgBMKubZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
138+
{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVStarrqHLexrXV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
139139

140140
![Blazor Line Chart Logarithmic Axis with Base](images/logarithmic-axis/blazor-line-chart-logarithmic-axis-with-base.png)
141141

142142
## Logarithmic interval
143143

144-
The interval can be customized using the [Interval](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonAxis.html#Syncfusion_Blazor_Charts_ChartCommonAxis_Interval) property of the logarithmic axis. When the logarithmic base is **10** and logarithmic interval is **2**, then the axis labels are placed at an interval of **10<sup>2</sup>**. The default value of the interval is **1**.
144+
Customize the interval using the [Interval](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonAxis.html#Syncfusion_Blazor_Charts_ChartCommonAxis_Interval) property. For example, when the logarithmic base is **10** and the interval is **2**, labels are placed at powers of 10<sup>2</sup>. The default interval value is **1**.
145145

146146
```cshtml
147147
148148
@using Syncfusion.Blazor.Charts
149149
150150
<SfChart>
151-
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime"/>
151+
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" />
152152
153-
<ChartPrimaryYAxis Interval="2" LogBase="2" ValueType="Syncfusion.Blazor.Charts.ValueType.Logarithmic"/>
153+
<ChartPrimaryYAxis Interval="2" LogBase="2" ValueType="Syncfusion.Blazor.Charts.ValueType.Logarithmic" />
154154
155155
<ChartSeriesCollection>
156-
<ChartSeries DataSource="@Data" XName="XValue" YName="YValue" />
156+
<ChartSeries DataSource="@Data" XName="XValue" YName="YValue" />
157157
</ChartSeriesCollection>
158158
</SfChart>
159159
@@ -164,38 +164,38 @@ The interval can be customized using the [Interval](https://help.syncfusion.com/
164164
public double YValue { get; set; }
165165
}
166166
167-
public List<ChartData> Data = new List<ChartData>
167+
public List<ChartData> Data = new List<ChartData>
168168
{
169169
new ChartData { XValue = new DateTime(2005, 01, 01), YValue = 100 },
170170
new ChartData { XValue = new DateTime(2006, 01, 01), YValue = 200 },
171171
new ChartData { XValue = new DateTime(2007, 01, 01), YValue = 500 },
172172
new ChartData { XValue = new DateTime(2008, 01, 01), YValue = 1000 },
173173
new ChartData { XValue = new DateTime(2009, 01, 01), YValue = 8000 },
174174
new ChartData { XValue = new DateTime(2010, 01, 01), YValue = 90000 },
175-
new ChartData { XValue = new DateTime(2011, 01, 01), YValue = 99000 },
175+
new ChartData { XValue = new DateTime(2011, 01, 01), YValue = 99000 }
176176
};
177177
}
178178
179179
```
180-
{% previewsample "https://blazorplayground.syncfusion.com/embed/LZhqMhVdrUVPPtnR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
180+
{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLyNkhVqxzKfiiT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
181181

182-
![Changing Blazor Line Chart Logarithmic Axis based on Interval](images/logarithmic-axis/blazor-line-chart-axis-based-on-range.png)
182+
![Changing Blazor Line Chart Logarithmic Axis based on Interval](images/logarithmic-axis/blazor-line-chart-axis-based-on-interval.png)
183183

184184
## Label format
185185

186-
Using the [LabelFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonAxis.html#Syncfusion_Blazor_Charts_ChartCommonAxis_LabelFormat) property on an axis, it is possible to format the logarithmic labels to all globalize formats.
186+
Use the [LabelFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonAxis.html#Syncfusion_Blazor_Charts_ChartCommonAxis_LabelFormat) property to format logarithmic labels using standard .NET globalization formats.
187187

188188
```cshtml
189189
190190
@using Syncfusion.Blazor.Charts
191191
192192
<SfChart>
193-
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime"/>
193+
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" />
194194
195-
<ChartPrimaryYAxis LabelFormat="P1" ValueType="Syncfusion.Blazor.Charts.ValueType.Logarithmic"/>
195+
<ChartPrimaryYAxis LabelFormat="P1" ValueType="Syncfusion.Blazor.Charts.ValueType.Logarithmic" />
196196
197197
<ChartSeriesCollection>
198-
<ChartSeries DataSource="@Data" XName="XValue" YName="YValue" />
198+
<ChartSeries DataSource="@Data" XName="XValue" YName="YValue" />
199199
</ChartSeriesCollection>
200200
</SfChart>
201201
@@ -206,23 +206,23 @@ Using the [LabelFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.
206206
public double YValue { get; set; }
207207
}
208208
209-
public List<ChartData> Data = new List<ChartData>
209+
public List<ChartData> Data = new List<ChartData>
210210
{
211211
new ChartData { XValue = new DateTime(2005, 01, 01), YValue = 100 },
212212
new ChartData { XValue = new DateTime(2006, 01, 01), YValue = 200 },
213213
new ChartData { XValue = new DateTime(2007, 01, 01), YValue = 500 },
214214
new ChartData { XValue = new DateTime(2008, 01, 01), YValue = 1000 },
215215
new ChartData { XValue = new DateTime(2009, 01, 01), YValue = 8000 },
216216
new ChartData { XValue = new DateTime(2010, 01, 01), YValue = 90000 },
217-
new ChartData { XValue = new DateTime(2011, 01, 01), YValue = 99000 },
217+
new ChartData { XValue = new DateTime(2011, 01, 01), YValue = 99000 }
218218
};
219219
}
220220
221221
```
222222

223-
![Blazor Line Chart Logarithmic Axis with Label Format](images/logarithmic-axis/blazor-line-chart-axis-with-label-format.png)
223+
{% previewsample "https://blazorplayground.syncfusion.com/embed/VtVoNEhhqnQneEcH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
224224

225-
{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBUWrVHBqKsJuuA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
225+
![Blazor Line Chart Logarithmic Axis with Label Format](images/logarithmic-axis/blazor-line-chart-axis-with-label-format.png)
226226

227227
The table below shows the results of applying some commonly used label formats to logarithmic values.
228228

@@ -257,47 +257,49 @@ The table below shows the results of applying some commonly used label formats t
257257
<td>0.01</td>
258258
<td>p1</td>
259259
<td>1.0%</td>
260-
<td>The value is converted to percentage with 1 decimal place.</td>
260+
<td>The value is converted to a percentage with 1 decimal place.</td>
261261
</tr>
262262
<tr>
263263
<td>0.01</td>
264264
<td>p2</td>
265265
<td>1.00%</td>
266-
<td>The value is converted to percentage with 2 decimal places.</td>
266+
<td>The value is converted to a percentage with 2 decimal places.</td>
267267
</tr>
268268
<tr>
269269
<td>0.01</td>
270270
<td>p3</td>
271271
<td>1.000%</td>
272-
<td>The value is converted to percentage with 3 decimal places.</td>
272+
<td>The value is converted to a percentage with 3 decimal places.</td>
273273
</tr>
274274
<tr>
275275
<td>1000</td>
276276
<td>c1</td>
277277
<td>$1000.0</td>
278-
<td>The currency symbol is appended to number and number is rounded to 1 decimal place.</td>
278+
<td>The currency symbol is appended and the number is rounded to 1 decimal place.</td>
279279
</tr>
280280
<tr>
281281
<td>1000</td>
282282
<td>c2</td>
283283
<td>$1000.00</td>
284-
<td>The currency symbol is appended to number and number is rounded to 2 decimal places.</td>
284+
<td>The currency symbol is appended and the number is rounded to 2 decimal places.</td>
285285
</tr>
286286
</table>
287287

288288
## Custom label format
289289

290-
Axis also supports custom label format using placeholders such as {value}K, where the value represents the axis label, for example, 200K.
290+
The axis also supports custom label formats using placeholders such as {value}K, where value represents the axis label (for example, 200K).
291291

292292
```cshtml
293293
294+
@using Syncfusion.Blazor.Charts
295+
294296
<SfChart>
295-
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime"/>
297+
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" />
296298
297-
<ChartPrimaryYAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Logarithmic" LabelFormat="${value}K" RangePadding="ChartRangePadding.Auto"/>
299+
<ChartPrimaryYAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Logarithmic" LabelFormat="${value}K" RangePadding="ChartRangePadding.Auto" />
298300
299301
<ChartSeriesCollection>
300-
<ChartSeries DataSource="@Data" XName="XValue" YName="YValue" />
302+
<ChartSeries DataSource="@Data" XName="XValue" YName="YValue" />
301303
</ChartSeriesCollection>
302304
</SfChart>
303305
@@ -308,20 +310,20 @@ Axis also supports custom label format using placeholders such as {value}K, wher
308310
public double YValue { get; set; }
309311
}
310312
311-
public List<ChartData> Data = new List<ChartData>
313+
public List<ChartData> Data = new List<ChartData>
312314
{
313315
new ChartData { XValue = new DateTime(2005, 01, 01), YValue = 100 },
314316
new ChartData { XValue = new DateTime(2006, 01, 01), YValue = 200 },
315317
new ChartData { XValue = new DateTime(2007, 01, 01), YValue = 500 },
316318
new ChartData { XValue = new DateTime(2008, 01, 01), YValue = 1000 },
317319
new ChartData { XValue = new DateTime(2009, 01, 01), YValue = 8000 },
318320
new ChartData { XValue = new DateTime(2010, 01, 01), YValue = 90000 },
319-
new ChartData { XValue = new DateTime(2011, 01, 01), YValue = 99000 },
321+
new ChartData { XValue = new DateTime(2011, 01, 01), YValue = 99000 }
320322
};
321323
}
322324
323325
```
324-
{% previewsample "https://blazorplayground.syncfusion.com/embed/rDrAMhrnBgqGAVip?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
326+
{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVyDarLAGtUafbP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
325327

326328
![Blazor Line Chart Logarithmic Axis with Custom Label Format](images/logarithmic-axis/blazor-line-chart-axis-custom-label-format.png)
327329

@@ -331,4 +333,4 @@ N> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/bla
331333

332334
* [Data label](./data-labels)
333335
* [Tooltip](./tool-tip)
334-
* [Marker](./data-markers)
336+
* [Marker](./data-markers)

0 commit comments

Comments
 (0)