Support String labels for xAxis in line charts. about charts HOT 6 CLOSED

@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.

from charts.

@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.

from charts.

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:

Tick formatter spec interface:

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

from charts.

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

from charts.

@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?

from charts.

@huang-weilong @manujbahl @lorrainekan

You saved my day thanks for helping us 💯

from charts.