Support String labels for xAxis in line charts.

[manujbahl]

Can I have custom text labels on the xAxis.
I am building a flutter app where the client has an option to render bar, line or pie chart with same set of data. Bar and Pie charts take strings as xAxis (domainFn) while line chart expects number and auto sorts. Is there a way to define custom labels.

Also, for line is there a way to specify range of the axis.
e.g. if my xAxis numbers are 50,51 and 52 the axis range is set to 0-53 with a huge blank space for the 0-49 range and the actual line squished in right 10% of the chart area.

[lorrainekan]

You can format the ticks on domain or measure axis by implementing a custom tick formatter and a corresponding tick formatter spec, then setting it on the axis spec.

Tick formatter interface:

charts/charts_common/lib/src/chart/cartesian/axis/tick_formatter.dart

Line 23 in 1d4d885

abstract class TickFormatter<D> {

Tick formatter spec interface:

charts/charts_common/lib/src/chart/cartesian/axis/spec/axis_spec.dart

Line 84 in e4c0d9a

abstract class TickFormatterSpec<D> {

Setting custom tick formatter spec on axis:
https://google.github.io/charts/flutter/example/axes/custom_axis_tick_formatters

You can set a non zero bound measure axis:
https://google.github.io/charts/flutter/example/axes/nonzero_bound_measure_axis

[manujbahl]

@lorrainekan is there a formatter for the bar charts as well. My bar chart has about 20 domains and the labels overlap causing a weird visual.

[huang-weilong]

Is there an example to implement X-axis using string labels?

[luckforyou]

@huang-weilong @manujbahl @lorrainekan
HI,
I used tickFormatterSpec property on the chart, and set tickFormatterSpec with the function you want to generate String from the given num, the code belows

good luck.

domainAxis: new charts.NumericAxisSpec(
          // viewport: new charts.NumericExtents(2017, 2021),
          tickProviderSpec: new charts.BasicNumericTickProviderSpec(
            zeroBound: false,
            dataIsInWholeNumbers: false,
            desiredTickCount: 10,
          ),
          tickFormatterSpec: charts.BasicNumericTickFormatterSpec(
            _formaterYear,
          ),
          renderSpec: charts.GridlineRendererSpec( // 交叉轴刻度水平线
            tickLengthPx: 0,
            labelOffsetFromAxisPx: 12,
          )         
        ),

String _formaterYear(num year) {
    int value = year.toInt();
    return '$value 年';
  }

This page https://juejin.im/post/5c14891ef265da61616e956b maybe like my code.
However , i cannot see the define of function DomainFormatterSpec
it let me very egg pain. so i implement it my self.

[amani27]

@huang-weilong @manujbahl @lorrainekan
HI,
I used tickFormatterSpec property on the chart, and set tickFormatterSpec with the function you want to generate String from the given num, the code belows

good luck.

domainAxis: new charts.NumericAxisSpec(
          // viewport: new charts.NumericExtents(2017, 2021),
          tickProviderSpec: new charts.BasicNumericTickProviderSpec(
            zeroBound: false,
            dataIsInWholeNumbers: false,
            desiredTickCount: 10,
          ),
          tickFormatterSpec: charts.BasicNumericTickFormatterSpec(
            _formaterYear,
          ),
          renderSpec: charts.GridlineRendererSpec( // 交叉轴刻度水平线
            tickLengthPx: 0,
            labelOffsetFromAxisPx: 12,
          )         
        ),

String _formaterYear(num year) {
    int value = year.toInt();
    return '$value 年';
  }

This page https://juejin.im/post/5c14891ef265da61616e956b maybe like my code.
However , i cannot see the define of function DomainFormatterSpec
it let me very egg pain. so i implement it my self.

What is the num year and where does this value come from inside the _formaterYear method?

[osamaasifoak]

@huang-weilong @manujbahl @lorrainekan

You saved my day thanks for helping us 💯