|
1 | 1 | --- |
2 | 2 | layout: post |
3 | 3 | title: Chart Dimensions in Blazor Charts Component | Syncfusion |
4 | | -description: Checkout and learn here all about Chart Dimensions in Syncfusion Blazor Charts component and much more. |
| 4 | +description: Learn how to configure chart dimensions in the Syncfusion Blazor Charts component, including sizing by container, explicit pixel sizes, and percentage-based width and height. |
5 | 5 | platform: Blazor |
6 | 6 | control: Chart |
7 | 7 | documentation: ug |
8 | 8 | --- |
9 | 9 |
|
10 | 10 | # Chart Dimensions in Blazor Charts Component |
11 | 11 |
|
12 | | -N> |
13 | | -* When no size is specified, the default height and width are 450px and 600px, respectively. |
14 | | -* To avoid delayed rendering, architectural changes were made to the Chart when the width/height were specified [in percentages](#In-Percentage) or [through style settings](#Size-for-Container) applied in the component's parent. As a result, the Chart is initially rendered with the default width and height and then redrawn by adjusting only the size of the Chart in a responsive manner. By including the following script in the header tag, the redrawn scenario can now be avoided. |
| 12 | +N> |
| 13 | +When dimensions are defined using [percentages](#in-percentage) or [through style settings](#size-for-container), the chart initially renders at default size, then redraws responsively based on dimensions. To avoid this redraw, include the following script in the section of your HTML page. |
15 | 14 |
|
16 | 15 | ```html |
17 | 16 | <head> |
18 | 17 | ... |
19 | | - <!--- To avoid the redraw scenario, add the CDN link below. ---> |
| 18 | + <!-- To avoid the redraw scenario, add the CDN link below. --> |
20 | 19 | <script src="https://cdn.syncfusion.com/blazor/syncfusion-blazor-base.min.js"></script> |
21 | 20 | </head> |
22 | 21 | ``` |
23 | 22 |
|
24 | 23 | ## Size for container |
25 | 24 |
|
26 | | -The chart can be scaled to fit the container. As shown below, the size can be set using CSS. |
| 25 | +The chart can scale to fit its container. Set the size using CSS on the container element, as shown below. |
27 | 26 |
|
28 | 27 | ```cshtml |
29 | 28 |
|
@@ -67,11 +66,11 @@ The chart can be scaled to fit the container. As shown below, the size can be s |
67 | 66 |
|
68 | 67 | ## Size for chart |
69 | 68 |
|
70 | | -The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_Height) properties specify the size of the chart in pixels or percentages directly. |
| 69 | +The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_Height) properties set the chart size directly, using pixel or percentage values. |
71 | 70 |
|
72 | 71 | ### In pixel |
73 | 72 |
|
74 | | -The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_Height) properties can be set in pixel as shown below. |
| 73 | +Set [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_Height) in pixels, as shown below. |
75 | 74 |
|
76 | 75 | ```cshtml |
77 | 76 |
|
@@ -113,7 +112,7 @@ The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfCha |
113 | 112 |
|
114 | 113 | ### In percentage |
115 | 114 |
|
116 | | -By setting the values of [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_Height) properties in percentage, the chart gets its dimension with respect to its container. For example, when the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_Height) is set to **50%**, the chart is half the height of its container. |
| 115 | +Setting [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_Height) in percentages sizes the chart relative to its container. For example, setting [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_Height) to **50%** renders the chart at half the container's height. |
117 | 116 |
|
118 | 117 | ```cshtml |
119 | 118 |
|
@@ -153,10 +152,10 @@ By setting the values of [Width](https://help.syncfusion.com/cr/blazor/Syncfusio |
153 | 152 |
|
154 | 153 |  |
155 | 154 |
|
156 | | -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. |
| 155 | +N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page and the [Blazor Chart example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to explore chart types and time-dependent data. |
157 | 156 |
|
158 | 157 | ## See also |
159 | 158 |
|
160 | | -* [Data Label](./data-labels) |
| 159 | +* [Data label](./data-labels) |
161 | 160 | * [Tooltip](./tool-tip) |
162 | | -* [Marker](./data-markers) |
| 161 | +* [Marker](./data-markers) |
0 commit comments