简体   繁体   中英

how to change text in bar chart

how to change text in bar chart

在此处输入图像描述

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

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()}'
          )
       );

在此处输入图像描述

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM