Skip to content

Commit dbf7c68

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

File tree

1 file changed

+50
-52
lines changed

1 file changed

+50
-52
lines changed

‎blazor/chart/logarithmic-axis.md‎

Lines changed: 50 additions & 52 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 how to configure and customize logarithmic axis in the Syncfusion Blazor Charts component.
4+
description: Check out and learn about the Logarithmic Axis in the Syncfusion Blazor Charts component and more.
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 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.
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.
1515

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

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

@@ -22,9 +22,9 @@ Logarithmic axis customization in the Syncfusion Blazor Charts component can als
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 @@ Logarithmic axis customization in the Syncfusion Blazor Charts component can als
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/hjhSZYVBgIGRCwEf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
54+
{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLAMLhHLhczYuye?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 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.
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.
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 is calculated automatically based on the data. You can also custo
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/rthyDkBBUHWqIFjh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
96+
{% previewsample "https://blazorplayground.syncfusion.com/embed/hXrqChBHBgilgqlG?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-
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.
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.
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 @@ Customize the logarithmic base using the [LogBase](https://help.syncfusion.com/c
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/hDVStarrqHLexrXV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
138+
{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVKWVLHhgBMKubZ?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-
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**.
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**.
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 @@ Customize the interval using the [Interval](https://help.syncfusion.com/cr/blazo
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/BtLyNkhVqxzKfiiT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
180+
{% previewsample "https://blazorplayground.syncfusion.com/embed/LZhqMhVdrUVPPtnR?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-interval.png)
182+
![Changing Blazor Line Chart Logarithmic Axis based on Interval](images/logarithmic-axis/blazor-line-chart-axis-based-on-range.png)
183183

184184
## Label format
185185

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.
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.
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,24 +206,24 @@ Use the [LabelFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch
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-
{% previewsample "https://blazorplayground.syncfusion.com/embed/VtVoNEhhqnQneEcH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
224-
225223
![Blazor Line Chart Logarithmic Axis with Label Format](images/logarithmic-axis/blazor-line-chart-axis-with-label-format.png)
226224

225+
{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBUWrVHBqKsJuuA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
226+
227227
The table below shows the results of applying some commonly used label formats to logarithmic values.
228228

229229
<!-- markdownlint-disable MD033 -->
@@ -257,49 +257,47 @@ 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 a percentage with 1 decimal place.</td>
260+
<td>The value is converted to 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 a percentage with 2 decimal places.</td>
266+
<td>The value is converted to 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 a percentage with 3 decimal places.</td>
272+
<td>The value is converted to 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 and the number is rounded to 1 decimal place.</td>
278+
<td>The currency symbol is appended to number and 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 and the number is rounded to 2 decimal places.</td>
284+
<td>The currency symbol is appended to number and number is rounded to 2 decimal places.</td>
285285
</tr>
286286
</table>
287287

288288
## Custom label format
289289

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

292292
```cshtml
293293
294-
@using Syncfusion.Blazor.Charts
295-
296294
<SfChart>
297-
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" />
295+
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime"/>
298296
299-
<ChartPrimaryYAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Logarithmic" LabelFormat="${value}K" RangePadding="ChartRangePadding.Auto" />
297+
<ChartPrimaryYAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Logarithmic" LabelFormat="${value}K" RangePadding="ChartRangePadding.Auto"/>
300298
301299
<ChartSeriesCollection>
302-
<ChartSeries DataSource="@Data" XName="XValue" YName="YValue" />
300+
<ChartSeries DataSource="@Data" XName="XValue" YName="YValue" />
303301
</ChartSeriesCollection>
304302
</SfChart>
305303
@@ -310,20 +308,20 @@ The axis also supports custom label formats using placeholders such as {value}K,
310308
public double YValue { get; set; }
311309
}
312310
313-
public List<ChartData> Data = new List<ChartData>
311+
public List<ChartData> Data = new List<ChartData>
314312
{
315313
new ChartData { XValue = new DateTime(2005, 01, 01), YValue = 100 },
316314
new ChartData { XValue = new DateTime(2006, 01, 01), YValue = 200 },
317315
new ChartData { XValue = new DateTime(2007, 01, 01), YValue = 500 },
318316
new ChartData { XValue = new DateTime(2008, 01, 01), YValue = 1000 },
319317
new ChartData { XValue = new DateTime(2009, 01, 01), YValue = 8000 },
320318
new ChartData { XValue = new DateTime(2010, 01, 01), YValue = 90000 },
321-
new ChartData { XValue = new DateTime(2011, 01, 01), YValue = 99000 }
319+
new ChartData { XValue = new DateTime(2011, 01, 01), YValue = 99000 },
322320
};
323321
}
324322
325323
```
326-
{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVyDarLAGtUafbP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
324+
{% previewsample "https://blazorplayground.syncfusion.com/embed/rDrAMhrnBgqGAVip?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
327325

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

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

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

0 commit comments

Comments
 (0)