Search code examples
flutterbar-chartsyncfusion

how to change text in bar chart


how to change text in bar chart

enter image description here

 List<_SalesData> data = [
    _SalesData(' 1', 3.1),
    _SalesData(' 2', 3.23),
    _SalesData(' 3', 3.39),
    _SalesData(' 4', 2.90),
    _SalesData(' 5', 3.80),
    _SalesData(' 6', 3.11),
    _SalesData(' 7', 3.81),
    _SalesData(' 8', 0)
  ];

how do I change the text in the barchart because the widget doesn't have text to change. I don't know where to change this because I'm new to using charts, maybe someone here knows how to change it. Thank you.

Center(
            child: SfCartesianChart(
              primaryXAxis: CategoryAxis(),
              // Chart title
              title: ChartTitle(
                text: 'IPK Mahasiswa',
                textStyle: bold6,
              ),
              tooltipBehavior: TooltipBehavior(enable: true),
              series: <ChartSeries<_SalesData, String>>[
                ColumnSeries(
                  color: primaryColor,
                  dataSource: data,
                  xValueMapper: (_SalesData sales, _) => sales.year,
                  yValueMapper: (_SalesData sales, _) => sales.sales,
                  dataLabelSettings: const DataLabelSettings(isVisible: true),
                ),
              ],
            ),
          ),

Solution

  • based on documentation: https://help.syncfusion.com/flutter/cartesian-charts/tooltip

    you can customize the tooltip

     _tooltipBehavior = TooltipBehavior(
                      enable: true, 
                      // Formatting the tooltip text
                      // customize here as you need
                      format: 'point.y%'
                    );
    

    there is some label format property:

    • X value - point.x
    • Y value - point.y
    • Bubble size - point.size
    • Name of the series - series.name <- maybe this is what you need

    you can expolore more about it.

    also you can use builder for custom widget : https://help.syncfusion.com/flutter/cartesian-charts/tooltip#tooltip-template

    builder: (dynamic data, dynamic point, dynamic series,
          int pointIndex, int seriesIndex) {
            return Container(
               child: Text(
                 'PointIndex : ${pointIndex.toString()}'
              )
           );
    

    enter image description here