Flutter Pyramid Chart | Richly Animated Charts

Overview

The Flutter Pyramid Chart is the form of a triangle with lines dividing it into sections, each section with a different width. Depending on the Y coordinates, this width indicates a level of hierarchy among other categories. You can create beautiful, animated, real-time and high-performance pyramid chart that also supports the interactive features such as explode, tooltip and selection.

Beautiful Flutter Pyramid Chart

Key features

Flutter chart shows the different mode in pyramid chart

Pyramid mode

The Flutter Pyramid Chart supports two types of visualization mode, linear and surface. The Y value is represented by the height of the rectangle in linear mode and area of the rectangle in surface mode.

Flutter chart shows the funnel segment gap

Segment gap

The segments in the pyramid chart can be separated by gaps to highlight the levels in the hierarchy.

Flutter chart shows the exploded pyramid segment

Exploding on touch

Explode a single segment in the Flutter Pyramid Chart to differentiate it from others.

Flutter pyramid chart shows the data labels

Data label

Show the detail about the data points with the help of data label support. Can place the label inside and outside of the chart. Use the connector line to connect the outside label with chart.

Code example

Easily get started with the Flutter Pyramid Chart using a few simple lines of DART code example as demonstrated below,

dart
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';

@override
    Widget build(BuildContext context) {
        final List<ChartData> chartData = [
            ChartData('David', 25),
            ChartData('Steve', 38),
            ChartData('Jack', 34),
            ChartData('Others', 52)
        ];
        return Scaffold(
            body: Center(
                child: Container(
                    child: SfPyramidChart(
                      series:PyramidSeries<ChartData, String>(
                            dataSource: chartData,
                            xValueMapper: (ChartData data, _) => data.x,
                            yValueMapper: (ChartData data, _) => data.y
                        )
                    )
                )
            )
        );
    }

    class ChartData {
      ChartData(this.x, this.y, [this.color]);
        final String x;
        final double y;
        final Color? color;
    }