Add option to control SfCartesianChart X-Axis height

[bismarabia]

Hi,

I'm using SfCartesianChart with BarSeries as series,
and I'm having one single record in dataSource and one single series each.

Is there a way to control the dimension of the whole chart or xAxis height?

[SriramKiranSenthilkumar]

Hi @bismarabia,

Greetings from Syncfusion. We have analyzed your scenario at our end, and in your case if you want to decrease the x-axis height, you can wrap the chart widget inside a container and provide the necessary height as required and when decreasing the height, the bar gets shrank based on the height of the container so you need to provide necessary value to the width property of the bar series accordingly. Please refer the code snippet below for reference.

// wrapping chart widget inside the container o specify the height.
Container(
            height: 75,
            child: SfCartesianChart(
                primaryXAxis: CategoryAxis(),
                primaryYAxis: NumericAxis(isVisible: false),
                series: <ChartSeries<_SalesData, String>>[
                  BarSeries<_SalesData, String>(
                      dataSource: data,
                      width: 0.5, // setting width for bar series
                      xValueMapper: (_SalesData sales, _) => sales.year,
                      yValueMapper: (_SalesData sales, _) => sales.sales,)
                ]),
          )
)

Please check and revert us if you still require further assistance.

Regards,
Sriram Kiran

[bismarabia]

Hello, thank you fro the reply..

I've tried your suggested solution, and everything get shrank not just x-axis.

I believe the with of x-axis should be proportional to the width of all of bars, let's say 150% of the bars width. this way, when we don't have to deal with setting the height.

Plus, the number of bars is dynamic as it's populated from service.

This is the original

After shrinking, Container(height: 75)

[SriramKiranSenthilkumar]

Hi @bismarabia,

We have analyzed your query at our end, and we would like to let you know that the default rendering behavior of our x and y axes is that they are rendered based on the chart widget's parent container's size (height and width) and also to mention that the current default rendering behavior of the BarSeries is that when there is one or more bar series rendered in the chart, the bars will be sized automatically based on the x-axis height when there is no static width and spacing values set for BarSeries. We have attached the test sample below along with various screenshots that depicts the above explained behavior. So, in your case you can change height of the chart container to control the x-axis height and thus the bar data points render according to the available space respective to x-axis.

Test Sample: sample.zip

Please revert us if you still have further concerns.

Regards,
Sriram Kiran

[bismarabia]

I fixed this by not setting width explicitly, and setting Container's height as (Number of Bars) * (height of a single bar).

thanks @SriramKiranSenthilkumar for the idea.