Showing custom range values in both primary Y-axis and secondary Y-axis of a Flutter SfCartesianChart

Question

I am using SfCartesianChart to display custom range values on both the primary and secondary Y-axes. However, I'm encountering an issue where two axes are being displayed on the primary Y-axis. Is it possible to display the same custom range values on both axes?

The below is sample code

Widget budgetGraphNew() {
    List<SalesData> data = [
      SalesData('Jan', 10000, 8000),
      SalesData('Feb', 90000, 60000),
      SalesData('Mar',  30000, 20000),
      SalesData('Apr', 30000, 10000)
    ];

    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: Container(
        width: 400,
        child: SfCartesianChart(
          title: ChartTitle(text: 'Continent Wise GDP'),
          legend: Legend(
            alignment: ChartAlignment.near,
            position: LegendPosition.bottom,
            isVisible: true,
          ),
          axes: <ChartAxis>[
            CategoryAxis(
              name: 'xAxis',
              opposedPosition: true,
            ),
            NumericAxis(
              name: 'yAxis',
              opposedPosition: true,
              minimum: 0,
              maximum: 100000,
              interval: 20000,
              majorGridLines: MajorGridLines(width: 0), // Remove major gridlines
              minorGridLines: MinorGridLines(width: 0), // Remove minor gridlines
            ),
            NumericAxis(
              name: 'secondaryYAxis', // Use a different name for secondary y-axis
              opposedPosition: false,
              minimum: 0,
              maximum: 100000,
              interval: 20000,
              majorGridLines: MajorGridLines(width: 0), // Remove major gridlines
              minorGridLines: MinorGridLines(width: 0), // Remove minor gridlines
            ),
          ],
          primaryXAxis: CategoryAxis(),
          series: <ChartSeries>[
            ColumnSeries<SalesData, String>(
              name: 'Budget',
              xAxisName: 'xAxis',
              yAxisName: 'yAxis',
              dataSource: data,
              xValueMapper: (SalesData sales, _) => sales.year,
              yValueMapper: (SalesData sales, _) => sales.budget,
            ),
            ColumnSeries<SalesData, String>(
              name: 'Expenditure',
              xAxisName: 'xAxis',
              yAxisName: 'secondaryYAxis', // Use the name of the secondary y-axis
              dataSource: data,
              xValueMapper: (SalesData sales, _) => sales.year,
              yValueMapper: (SalesData sales, _) => sales.expenditure,
            ),
          ],
        ),
      ),
    );
  }

Answer 1

Hope This Helps

updated the chart configuration to utilize a single NumericAxis for both the primary and secondary Y-axes.

Widget budgetGraphNew() {
  List<SalesData> data = [
    SalesData('Jan', 10000, 8000),
    SalesData('Feb', 90000, 60000),
    SalesData('Mar',  30000, 20000),
    SalesData('Apr', 30000, 10000)
  ];

  NumericAxis yAxis = NumericAxis(
    name: 'yAxis',
    opposedPosition: true,
    minimum: 0,
    maximum: 100000,
    interval: 20000,
    majorGridLines: MajorGridLines(width: 0),
    minorGridLines: MinorGridLines(width: 0),
  );

  return SingleChildScrollView(
    scrollDirection: Axis.horizontal,
    child: Container(
      width: 400,
      child: SfCartesianChart(
        title: ChartTitle(text: 'Continent Wise GDP'),
        legend: Legend(
          alignment: ChartAlignment.near,
          position: LegendPosition.bottom,
          isVisible: true,
        ),
        axes: <ChartAxis>[
          CategoryAxis(
            name: 'xAxis',
            opposedPosition: true,
          ),
          yAxis,
        ],
        primaryXAxis: CategoryAxis(),
        series: <ChartSeries>[
          ColumnSeries<SalesData, String>(
            name: 'Budget',
            xAxisName: 'xAxis',
            yAxisName: 'yAxis',
            dataSource: data,
            xValueMapper: (SalesData sales, _) => sales.year,
            yValueMapper: (SalesData sales, _) => sales.budget,
          ),
          ColumnSeries<SalesData, String>(
            name: 'Expenditure',
            xAxisName: 'xAxis',
            yAxisName: 'yAxis',
            dataSource: data,
            xValueMapper: (SalesData sales, _) => sales.year,
            yValueMapper: (SalesData sales, _) => sales.expenditure,
          ),
        ],
      ),
    ),
  );
}