need this kind of stacked bar graph in flutter

Question

I tried the Stacked column graph of the Syncfusion plugin but not worked this way. Resulted Stacked bar graph is:-

Please help me to fix this. Thank You.

Answer 1

You can use the popular flutter_echarts package to draw a stacked chart, simply by passing the option to the Echarts widget (Read how to modify the properties of the chart here). Sample code below:

import 'package:flutter/material.dart';
import 'package:flutter_echarts/flutter_echarts.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      home: SomeScreen(),
    );
  }
}

class SomeScreen extends StatefulWidget {
  @override
  _SomeScreenState createState() => _SomeScreenState();
}

class _SomeScreenState extends State<SomeScreen> {
  getOption(data) {
    var option = '''{
    legend: {
      data: // Use your data here
    },
    grid: {left: '3%', right: '4%', bottom: '3%', containLabel: true},
    xAxis: [
      {
        type: 'category',
        data: // Use your data here,
      }
    ],
    yAxis: [
      {type: 'value'}
    ],
    series: [
      {
        name: // Use your data here,
        type: 'bar',
        stack: 'test',
        emphasis: {focus: 'series'},
        data: // Use your data here
      },
      {
        name: // Use your data here,
        type: 'bar',
        stack: 'test',
        emphasis: {focus: 'series'},
        data: // Use your data here
      },
      {
        name: // Use your data here,
        type: 'bar',
        stack: 'test',
        emphasis: {focus: 'series'},
        data: // Use your data here
      },
      {
        name: // Use your data here,
        type: 'bar',
        stack: 'test',
        emphasis: {focus: 'series'},
        data: // Use your data here
      },
      {
        name: // Use your data here,
        type: 'bar',
        stack: 'test',
        emphasis: {focus: 'series'},
        data: // Use your data here
      },
    ]
  }''';
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          color: Colors.white,
          width: 400,
          height: 500,
          child: FutureBuilder(
              future: _callAPI(), // Make a call to your API
              builder: (context, snapshot) {
                if (!snapshot.hasData) return Container();
                var data = snapshot.data;
                return Echarts(
                  option: getOption(data),
                );
              }
          ),
        ),
      ),
    );
  }
}

Result: