y-axis title above the chart and custom content display

[happylh2012]

1：Can the content of the y-axis on the chart be placed above the chart ? This is because the width of the display on mobile phones is limited, and expanding the display area of the chart could be helpful.
2：Is it possible to expand custom content, such as displaying weather icons at fixed intervals above the chart?

[PreethikaSelvam]

Hi,

Query 1: Need to place the y-axis above the chart.

We would like to let you know, we cannot position both the x-axis and y-axis horizontally. To transpose the axis, you can use the transposed property to switch the horizontal and vertical axes. However, we cannot position both the x-axis and y-axis horizontally. If you want to move axis within the plot area and expand the series rendering area, we suggest moving the axis tick position and axis label position inside by using the tickPosition and labelPosition respectively.

Query 2: Need to add custom content (weather icons) above the chart.

We have implemented a logic to enable users to toggle between hourly and daily data representations on a chart. This functionality is facilitated by a boolean variable, _showHourlyData, which determines the type of data to display. When the user interacts with the provided buttons, this variable is updated accordingly, triggering a re-render of the chart with the selected interval. If hourly data is chosen, the function iterates through each hour within a specified week, while for daily data, it iterates through each day. DateTimeAxis adjusted to display appropriate time intervals based on the user's selection by using the interval and intervalType properties. We have shared a code snippet and a sample for your reference below. You can modify the sample based on your needs.

Code snippet:

`
bool _showHourlyData = true;

List generateChartData(
bool showHourlyData, int week, DateTime currentDate, int hours) {
List data = [];
Random random = Random();

if (showHourlyData) {
// Generate hourly data for a week
for (int i = 0; i <= week * hours; i++) {
double y = random.nextDouble() *
100; // Generate a random y-value between 0 and 100
data.add(ChartData(currentDate.add(Duration(hours: i)), y));
}
} else {
// Generate daily data for a week
for (int i = 0; i < week; i++) {
double y = random.nextDouble() *
100; // Generate a random y-value between 0 and 100
data.add(ChartData(currentDate.add(Duration(days: i)), y));
}
}

return data;
}
@OverRide
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton.icon(
onPressed: () {
setState(() {
_showHourlyData = true;
});
},
icon: const Icon(Icons.wb_sunny),
label: const Text('Show By Hour'),
),
const SizedBox(width: 10),
ElevatedButton.icon(
onPressed: () {
setState(() {
_showHourlyData = false;
});
},
icon: const Icon(Icons.cloud),
label: const Text('Show By Day'),
),
],
),
Expanded(
child: Center(
child: SfCartesianChart(
primaryXAxis: DateTimeAxis(
minimum: DateTime(2022, 1, 1),
maximum: DateTime(2022, 1, 7),
majorGridLines: const MajorGridLines(width: 0),
minorGridLines: const MinorGridLines(width: 0),
interval: _showHourlyData ? 3 : 1,
intervalType: _showHourlyData
? DateTimeIntervalType.hours
: DateTimeIntervalType.days,
),
primaryYAxis: const NumericAxis(
majorGridLines: MajorGridLines(width: 0),
minorGridLines: MinorGridLines(width: 0),
),
series: [
AreaSeries<ChartData, DateTime>(
animationDuration: 0,
dataSource: generateChartData(
_showHourlyData, 7, DateTime(2022, 1, 1), 24),
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y,
)
],
),

`
Please let us know if you need any further assistance.

Regards,
Preethika Selvam.
bd557706.zip

[LavanyaGowtham2021]

Please reopen this ticket, if you need any further assistance on this.