charts_flutter: how to do a line chart overlapping y-axis label using Flutter Chart?

user_5509247 0
Viewed 806

can anyone help me out with this issue? I am using charts_flutter library, wanted the chart to be overlapping the y-axis label.

library: https://pub.dev/packages/charts_flutter

enter image description here

I wanted result like this: enter image description here

This is my code:

TimeSeriesChart(
      seriesList,

      dateTimeFactory: const LocalDateTimeFactory(),
      animate: animate,
      domainAxis: DateTimeAxisSpec(
        renderSpec: GridlineRendererSpec(
            labelStyle: new TextStyleSpec(
                fontSize: MyDimens.chart_text_size, //
                color: labelColor),
            lineStyle: LineStyleSpec(
                thickness: 0, color: MaterialPalette.transparent)),
      ),
      primaryMeasureAxis: new NumericAxisSpec(
          tickFormatterSpec: simpleCurrencyFormatter,
          tickProviderSpec: new BasicNumericTickProviderSpec(
            zeroBound: false,
            dataIsInWholeNumbers: false,
            desiredTickCount: MyDimens.chart_desired_tick_count,
          ),
          renderSpec: new GridlineRendererSpec(
            // Tick and Label styling here.
            labelStyle: new TextStyleSpec(
                fontSize: MyDimens.chart_text_size, //
                color: labelColor),

            // Change the line colors to match text color.
            lineStyle: new LineStyleSpec(color: lineColor),
            labelAnchor: TickLabelAnchor.after,
            labelJustification: TickLabelJustification.inside,
          )),
    )
flutter-dependencies flutter charts
2 Answers

Set zeroBound parameter to true

user_116494970

Just set a negative number to labelOffsetFromAxisPx in renderSpec like this:

labelOffsetFromAxisPx = -15

to get a better result, change labelJustification to TickLabelJustification.outside

finally change your code to:

primaryMeasureAxis: new NumericAxisSpec(
      tickFormatterSpec: simpleCurrencyFormatter,
      tickProviderSpec: new BasicNumericTickProviderSpec(
        zeroBound: false,
        dataIsInWholeNumbers: false,
        desiredTickCount: MyDimens.chart_desired_tick_count,
      ),
      renderSpec: new GridlineRendererSpec(
        // Tick and Label styling here.
        labelStyle: new TextStyleSpec(
            fontSize: MyDimens.chart_text_size, //
            color: labelColor),

        // Change the line colors to match text color.
        lineStyle: new LineStyleSpec(color: lineColor),
        labelAnchor: TickLabelAnchor.after,
        labelJustification: TickLabelJustification.outside,

        // Add offset herer
        labelOffsetFromAxisPx: -15,
      )),
user_100646830
Related