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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback


The Flutter Histogram Chart is a bar (column) chart used for frequency distribution in which the widths of the bars are proportional to classes into which variables have been divided and the heights of the bars are proportional to class frequencies. You can create beautiful, animated, real-time and high-performance histogram chart that also supports the interactive features such as zooming and panning, trackball, crosshair, tooltip and selection.

Beautiful Flutter Histogram Chart

Key features

Flutter chart shows the histogram chart distribution curve

Distribution curve

Provides a graphical representation of the normal distribution of data.

Flutter chart shows the data labels

Data labels

Data points can easily be annotated with data labels to improve readability.

Flutter chart shows the color and border customization

UI customization

Customizes the color and border of the Flutter Histogram Chart using built-in APIs to make it visually unique.

Code example

Easily get started with the Flutter Histogram 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';

    Widget build(BuildContext context) {
        return Scaffold(
            body: Center(
                child: Container(
                    child: SfCartesianChart(
                        series: <CartesianSeries>[
                            HistogramSeries<SalesData, num>(
                                dataSource: chartData,
                                yValueMapper: (SalesData sales, _) => sales.yValue,
                                binInterval: 20,
                                showNormalDistributionCurve: true,
                                curveColor: const Color.fromRGBO(192, 108, 132, 1),
                                borderWidth: 3

Learning resources

Navigate to GitHub code used to configure the Flutter histogram chart

GitHub Code

The Flutter Histogram Chart configuration code is available in GitHub.

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

Flutter Histogram Chart User Guide

Learn available options to customize the Flutter Histogram Chart.

Navigate to the API references documentation of Flutter Histogram chart

Flutter Histogram API Reference

Explore the Flutter Histogram Chart APIs.

Scroll up icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon