We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Syncfusion Feedback


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,

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;
    }

Learning resources

Navigate to GitHub code used to configure the Flutter pyramid chart

GitHub Code

The Flutter Pyramid Chart configuration code is available in GitHub.

Navigate to the options available in User Guide to customize the Flutter pyramid chart

Flutter Pyramid Chart User Guide

Learn available options to customize the Flutter Pyramid Chart.

Navigate to the API references documentation of Flutter pyramid chart

Flutter Pyramid Chart API Reference

Explore the Flutter Pyramid Chart APIs.


Scroll up icon