sharon
sharon

Reputation: 403

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),
                ),
              ],
            ),
          ),

Upvotes: 0

Views: 658

Answers (1)

pmatatias
pmatatias

Reputation: 4434

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

Upvotes: 1

Related Questions