Expand the graph with less data(or no data)

[kksal55]

When the data in the graph is less, the graph width will not be max. This presents a bad outlook. Can we increase the width of the graph when there is little or no data in it? @lukaknezic

[lukaknezic]

Hey @kksal55, hmm okay. Can you please post chart code or some minimal example where this is not working?

My guess is that chart has isScrollable set to true and that's why it's not filling whole width, but cannot be sure until I see the code 😄

[kksal55]

Hey @kksal55, hmm okay. Can you please post chart code or some minimal example where this is not working?

My guess is that chart has isScrollable set to true and that's why it's not filling whole width, but cannot be sure until I see the code 😄

Yes you are right. Chart has isScrollable set to true. Is there a way to fill the full width while "isScrollable=true"?

`final targetArea = TargetAreaDecoration(
      targetMax: targetMax,
      targetMin: targetMax ,
      lineWidth: 0.5,
      colorOverTarget: Theme.of(context)
          .colorScheme
          .error
          .withOpacity(_showBars ? 1.0 : 0.0),
      targetAreaFillColor: Theme.of(context).colorScheme.error.withOpacity(0.2),
      targetLineColor: Theme.of(context).colorScheme.error,
      targetAreaRadius: BorderRadius.circular(12.0),
    );

    final _chartState = ChartState(
      ChartData.fromList(_values.map((e) => BarValue<void>(e)).toList()),
      itemOptions: BarItemOptions(
        padding: EdgeInsets.symmetric(horizontal: _isScrollable ? 12.0 : 2.0),
        minBarWidth: _isScrollable ? 36.0 : 4.0,
        // isTargetInclusive: true,
        color: Theme.of(context)
            .colorScheme
            .primary
            .withOpacity(_showBars ? 1.0 : 0.0),
        radius: const BorderRadius.vertical(
          top: Radius.circular(24.0),
        ),
        colorForValue: targetArea.getTargetItemColor(),
      ),
      behaviour: ChartBehaviour(
        isScrollable: _isScrollable,
        onItemClicked: (item) {
          setState(() {
            _selected = item;
          });
        },
      ),
      backgroundDecorations: [
        HorizontalAxisDecoration(
          endWithChart: false,
          lineWidth: 2.0,
          axisStep: 2,
          lineColor:
              Theme.of(context).colorScheme.primaryVariant.withOpacity(0.2),
        ),
        VerticalAxisDecoration(
          endWithChart: false,
          lineWidth: 2.0,
          axisStep: 7,
          lineColor:
              Theme.of(context).colorScheme.primaryVariant.withOpacity(0.8),
        ),
        GridDecoration(
          horizontalLegendPosition : HorizontalLegendPosition.end,
          horizontalAxisValueFromValue: (value) => value.toString(),
          verticalAxisValueFromIndex: (index) => _values2[index].month.toString(),
          endWithChart: false,
          showVerticalGrid: true,
          showHorizontalValues: true,
          showVerticalValues: true,
          verticalValuesPadding: const EdgeInsets.symmetric(vertical: 12.0),
          verticalAxisStep: 1,
          horizontalAxisStep: 1,
          textStyle: Theme.of(context).textTheme.caption,
          gridColor:
              Theme.of(context).colorScheme.primaryVariant.withOpacity(0.2),
        ),
        targetArea,
        SparkLineDecoration(
          fill: true,
          lineColor: Theme.of(context)
              .primaryColor
              .withOpacity(!_showBars ? 0.2 : 0.0),
          smoothPoints: _smoothPoints,
        ),
      ],
      foregroundDecorations: [
        ValueDecoration(
          alignment: _showBars ? Alignment.bottomCenter : Alignment(0.0, -1.0),
          textStyle: Theme.of(context).textTheme.button.copyWith(
              color: (_showBars
                      ? Theme.of(context).colorScheme.onPrimary
                      : Theme.of(context).colorScheme.primary)
                  .withOpacity(_isScrollable ? 1.0 : 0.0)),
        ),
        SparkLineDecoration(
          lineWidth: 2.0,
          lineColor: Theme.of(context)
              .primaryColor
              .withOpacity(!_showBars ? 1.0 : 0.0),
          smoothPoints: _smoothPoints,
        ),
        SelectedItemDecoration(
          _selected,
          animate: true,
          selectedColor: Theme.of(context).colorScheme.secondary,
          backgroundColor: Theme.of(context)
              .scaffoldBackgroundColor
              .withOpacity(_isScrollable ? 0.5 : 0.8),
        ),
        BorderDecoration(
          endWithChart: true,
          color: Theme.of(context).colorScheme.primaryVariant,
        ),
      ],
    );`

[lukaknezic]

I can see if I can fix that in the library. Bot for now I don't think it's possible, since if isScrollable is set to true it will ignore width and take whatever it wants (itemMaxWidth + itemPadding + decorationsPadding) and then take as much space as it needs.

[lukaknezic]

Hey @kksal55
New update has something like you mentioned here. You can see in PR #78
Let me know if this is okay 😄