Hollow Semi Circle/MeterChart

The Hollow Semi-Circle or Meter Chart in the Material Charts Flutter package is a striking visualization tool designed for developers who want to display progress or performance metrics in a visually engaging manner within their Flutter applications. This unique chart type effectively represents percentage values in a semi-circular format, making it easy for users to quickly assess progress towards a goal or target. With customizable colors, styles, and animation options, the Hollow Semi-Circle Chart enhances user interaction and provides a clear, intuitive understanding of data. Perfect for dashboards, fitness apps, or any application that requires effective data representation, this chart empowers developers to create a compelling user experience while effectively communicating key performance indicators.

Bar Chart Example

Usage

import 'package:flutter/material.dart';
    import 'material_charts/hollow_semi_circle.dart';
    
    MaterialChartHollowSemiCircle(
      percentage: 75,
      size: 200,
      style: ChartStyle(
        activeColor: Colors.green,
        inactiveColor: Colors.grey.shade300,
        percentageStyle: TextStyle(fontSize: 24, color: Colors.black),
        animationDuration: Duration(milliseconds: 1000),
        animationCurve: Curves.fastOutSlowIn,
      ),
      onAnimationComplete: () {
        print('Animation Completed');
        },
    );

Properties

Hollow Semi-Circle

Property Type Description Default
percentage double The percentage value to display Required
size double Diameter of the chart Required
style ChartStyle Configuration for styling the chart ChartStyle()
onAnimationComplete VoidCallback? Callback invoked after animation completes null

ChartStyle

Property Type Description Default
activeColor Color Color for the active segment of the chart Colors.blue
inactiveColor Color Color for the inactive portion Color(0xFFE0E0E0)
textColor Color? Optional color for percentage text null
percentageStyle TextStyle? Style for percentage text null
legendStyle TextStyle? Style for the legend text null
animationDuration Duration Duration of the animation Duration(milliseconds: 1500)
animationCurve Curve Curve used for animation Curves.easeInOut
showPercentageText bool Whether to show the percentage text true
showLegend bool Whether to display a legend true
percentageFormatter String Function(double)? Formatter for percentage text null
legendFormatter String Function(String, double)? Formatter for legend entries null

Features