Skip to content

Commit 4f593e0

Browse files
GowrimathiGowrimathi
authored
Merge pull request #6669 from syncfusion-content/Blaz-SF4989-UGChart2
982808: Updated the contents and samples in the UG for the chart control.
2 parents 147fc1a + 6dfebd0 commit 4f593e0

11 files changed

+348
-354
lines changed

‎blazor/chart/axis-customization.md‎

Lines changed: 47 additions & 46 deletions
Large diffs are not rendered by default.

‎blazor/chart/axis-labels.md‎

Lines changed: 187 additions & 187 deletions
Large diffs are not rendered by default.

‎blazor/chart/images/axis-labels/blazor-chart-axis-label-in-edge.png‎

-8.09 KB
Loading

‎blazor/chart/images/axis-labels/blazor-column-chart-label-with-custom-border.png‎

3.53 KB
Loading

‎blazor/chart/images/logarithmic-axis/blazor-line-chart-axis-based-on-interval.png‎

23.4 KB
Loading

‎blazor/chart/images/logarithmic-axis/blazor-line-chart-axis-based-on-range.png‎

-7.02 KB
Loading

‎blazor/chart/images/logarithmic-axis/blazor-line-chart-axis-custom-label-format.png‎

-4.65 KB
Loading

‎blazor/chart/images/logarithmic-axis/interval.png‎

-28 KB
Binary file not shown.

‎blazor/chart/logarithmic-axis.md‎

Lines changed: 52 additions & 50 deletions
Large diffs are not rendered by default.

‎blazor/chart/multiple-panes.md‎

Lines changed: 38 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
layout: post
33
title: Multiple Panes in Blazor Charts Component | Syncfusion
4-
description: Checkout and learn here all about Multiple Panes in Syncfusion Blazor Charts component and much more.
4+
description: Check out and learn all about configuring multiple panes in the Syncfusion Blazor Charts component, including rows, columns, axis spanning, and layout tips.
55
platform: Blazor
66
control: Chart
77
documentation: ug
@@ -15,35 +15,36 @@ The chart area can be divided into multiple panes using [Rows](https://help.sync
1515

1616
Use the chart's [Rows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartRow.html) property to divide the chart area vertically into any number of rows.
1717

18-
* The [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartRow.html#Syncfusion_Blazor_Charts_ChartRow_Height) property can be used to allocate space for each row. The value can be expressed either in percentage or pixel.
18+
* The [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartRow.html#Syncfusion_Blazor_Charts_ChartRow_Height) property can be used to allocate space for each row. The value can be expressed either in percentage or pixels.
1919

20-
* To bind a vertical axis to a specific row, set the axis's [RowIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.AxisSet.html#Syncfusion_Blazor_PivotView_AxisSet_RowIndex) property to that row's index.
20+
* To bind a vertical axis to a specific row, set the axis's [RowIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAxis.html#Syncfusion_Blazor_Charts_ChartAxis_RowIndex) property to that row's index.
2121

22-
* The bottom line of each row can be customized by specified in [ChartBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartBorder.html).
22+
* The bottom line of each row can be customized by specifying the [ChartBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartRow.html#Syncfusion_Blazor_Charts_ChartRow_Border).
23+
24+
N> Rows are zero-based. For example, the first row is index 0. Percentage values enable responsive layouts while pixel values allocate fixed space.
2325

2426
```cshtml
2527
2628
@using Syncfusion.Blazor.Charts
2729
2830
<SfChart Title="Weather condition JPN vs DEU">
29-
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"/>
31+
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />
3032
31-
<ChartPrimaryYAxis Title="Temperature (Fahrenheit)" LabelFormat="{value}°F" Minimum="0" Maximum="90" Interval="20"/>
33+
<ChartPrimaryYAxis Title="Temperature (Fahrenheit)" LabelFormat="{value}°F" Minimum="0" Maximum="90" Interval="20" />
3234
3335
<ChartRows>
34-
<ChartRow Height="50%"/>
35-
<ChartRow Height="50%"/>
36+
<ChartRow Height="50%" />
37+
<ChartRow Height="50%" />
3638
</ChartRows>
3739
3840
<ChartAxes>
39-
<ChartAxis Minimum="24" Maximum="36" Interval="2" OpposedPosition="true" RowIndex="1" Name="YAxis" LabelFormat="{value}°C"/>
41+
<ChartAxis Minimum="24" Maximum="36" Interval="2" OpposedPosition="true" RowIndex="1" Name="YAxis" LabelFormat="{value}°C" />
4042
</ChartAxes>
4143
4244
<ChartSeriesCollection>
4345
44-
<ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" Type="ChartSeriesType.Column"/>
45-
46-
<ChartSeries DataSource="@WeatherReports" XName="X" YName="Y1" YAxisName="YAxis"/>
46+
<ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" Type="ChartSeriesType.Column" />
47+
<ChartSeries DataSource="@WeatherReports" XName="X" YName="Y1" YAxisName="YAxis" />
4748
4849
</ChartSeriesCollection>
4950
</SfChart>
@@ -78,32 +79,29 @@ Use the chart's [Rows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C
7879

7980
![Rows with Multiple Panes in Blazor Chart](images/multiple-panes/blazor-chart-multiple-panes-with-rows.png)
8081

81-
The [Span](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartCommonAxis.html#Syncfusion_Blazor_Charts_StockChartCommonAxis_Span) property of the axis can be used to span the vertical axis across multiple rows.
82+
Use the axis [Span](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAxis.html#Syncfusion_Blazor_Charts_ChartAxis_Span) property to span the vertical axis across multiple rows.
8283

8384
```cshtml
8485
8586
@using Syncfusion.Blazor.Charts
8687
8788
<SfChart Title="Weather condition JPN vs DEU">
88-
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"/>
89+
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />
8990
90-
<ChartPrimaryYAxis Span="2" Title="Temperature (Fahrenheit)" LabelFormat="{value}°F" Minimum="0" Maximum="90" Interval="20"/>
91+
<ChartPrimaryYAxis Span="2" Title="Temperature (Fahrenheit)" LabelFormat="{value}°F" Minimum="0" Maximum="90" Interval="20" />
9192
9293
<ChartRows>
93-
<ChartRow Height="50%"/>
94-
<ChartRow Height="50%"/>
94+
<ChartRow Height="50%" />
95+
<ChartRow Height="50%" />
9596
</ChartRows>
9697
9798
<ChartAxes>
98-
<ChartAxis Minimum="24" Maximum="36" Interval="2" OpposedPosition="true" RowIndex="1" Name="YAxis" LabelFormat="{value}°C"/>
99+
<ChartAxis Minimum="24" Maximum="36" Interval="2" OpposedPosition="true" RowIndex="1" Name="YAxis" LabelFormat="{value}°C" />
99100
</ChartAxes>
100101
101102
<ChartSeriesCollection>
102-
103-
<ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" Type="ChartSeriesType.Column"/>
104-
105-
<ChartSeries DataSource="@WeatherReports" XName="X" YName="Y1" YAxisName="YAxis"/>
106-
103+
<ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" Type="ChartSeriesType.Column" />
104+
<ChartSeries DataSource="@WeatherReports" XName="X" YName="Y1" YAxisName="YAxis" />
107105
</ChartSeriesCollection>
108106
</SfChart>
109107
@@ -142,35 +140,33 @@ The [Span](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockC
142140

143141
Use the chart's [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartColumn.html) property to divide the chart area horizontally into any number of columns.
144142

145-
* The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartColumn.html#Syncfusion_Blazor_Charts_ChartColumn_Width) property can be used to allocate space for each column. The value can be expressed either in percentage or pixel.
143+
* The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartColumn.html#Syncfusion_Blazor_Charts_ChartColumn_Width) property can be used to allocate space for each column. The value can be expressed either in percentage or pixels.
146144

147145
* To bind a horizontal axis to a specific column, set the axis's [ColumnIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAxis.html#Syncfusion_Blazor_Charts_ChartAxis_ColumnIndex) property to that column's index.
148146

149-
* The left line of each column can be customized by specified in [ChartBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartBorder.html).
147+
* The left line of each column can be customized by specifying the column [Border](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartColumn.html#Syncfusion_Blazor_Charts_ChartColumn_Border).
150148

151149
```cshtml
152150
153151
@using Syncfusion.Blazor.Charts
154152
155153
<SfChart Title="Weather condition JPN vs DEU">
154+
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />
156155
157-
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"/>
158-
159-
<ChartPrimaryYAxis Title="Temperature (Fahrenheit)" LabelFormat="{value}°F" Minimum="0" Maximum="90" Interval="20"/>
156+
<ChartPrimaryYAxis Title="Temperature (Fahrenheit)" LabelFormat="{value}°F" Minimum="0" Maximum="90" Interval="20" />
160157
161158
<ChartColumns>
162-
<ChartColumn Width="50%"/>
163-
<ChartColumn Width="50%"/>
159+
<ChartColumn Width="50%" />
160+
<ChartColumn Width="50%" />
164161
</ChartColumns>
165162
166163
<ChartAxes>
167-
<ChartAxis Interval="2" OpposedPosition="true" ColumnIndex="1" Name="XAxis" ValueType="Syncfusion.Blazor.Charts.ValueType.Category"/>
168-
164+
<ChartAxis Interval="2" OpposedPosition="true" ColumnIndex="1" Name="XAxis" ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />
169165
</ChartAxes>
170166
171167
<ChartSeriesCollection>
172-
<ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" Type="ChartSeriesType.Column"/>
173-
<ChartSeries DataSource="@WeatherReports" XName="X" YName="Y1" XAxisName="XAxis" />
168+
<ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" Type="ChartSeriesType.Column" />
169+
<ChartSeries DataSource="@WeatherReports" XName="X" YName="Y1" XAxisName="XAxis" />
174170
</ChartSeriesCollection>
175171
</SfChart>
176172
@@ -204,25 +200,24 @@ Use the chart's [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo
204200

205201
![Columns with Multiple Panes in Blazor Chart](images/multiple-panes/blazor-chart-multiple-panes-with-column.png)
206202

207-
The [Span](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartCommonAxis.html#Syncfusion_Blazor_Charts_StockChartCommonAxis_Span) property of the axis can be used to span the horizontal axis across multiple column.
203+
Use the axis [Span](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAxis.html#Syncfusion_Blazor_Charts_ChartAxis_Span) property to span the horizontal axis across multiple columns.
208204

209205
```cshtml
210206
211207
@using Syncfusion.Blazor.Charts
212208
213209
<SfChart Title="Weather condition JPN vs DEU">
210+
<ChartPrimaryXAxis Span="2" ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />
214211
215-
<ChartPrimaryXAxis Span="2" ValueType="Syncfusion.Blazor.Charts.ValueType.Category"/>
216-
217-
<ChartPrimaryYAxis Title="Temperature (Fahrenheit)" LabelFormat="{value}°F" Minimum="0" Maximum="90" Interval="20"/>
212+
<ChartPrimaryYAxis Title="Temperature (Fahrenheit)" LabelFormat="{value}°F" Minimum="0" Maximum="90" Interval="20" />
218213
219214
<ChartColumns>
220-
<ChartColumn Width="50%"/>
221-
<ChartColumn Width="50%"/>
215+
<ChartColumn Width="50%" />
216+
<ChartColumn Width="50%" />
222217
</ChartColumns>
223218
224219
<ChartAxes>
225-
<ChartAxis Interval="2" OpposedPosition="true" ColumnIndex="1" Name="XAxis" ValueType="Syncfusion.Blazor.Charts.ValueType.Category"/>
220+
<ChartAxis Interval="2" OpposedPosition="true" ColumnIndex="1" Name="XAxis" ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />
226221
227222
</ChartAxes>
228223
@@ -262,10 +257,10 @@ The [Span](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockC
262257

263258
![Column Spanning with Multiple Panes in Blazor Chart](images/multiple-panes/blazor-chart-multiple-panes-with-column-span.png)
264259

265-
N> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore our [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to know various chart types and how to represent time-dependent data, showing trends at equal intervals.
260+
N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for feature overviews and explore the [Blazor Chart example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to learn about chart types and time-based data visualization.
266261

267262
## See also
268263

269264
* [Data label](./data-labels)
270265
* [Tooltip](./tool-tip)
271-
* [Marker](./data-markers)
266+
* [Marker](./data-markers)

0 commit comments

Comments
 (0)