how could you make space between two bar graphs ?

[luishiguera]

Hello, I wanted to know if it is possible to create a graph like the one in the image with this package.

GT

[lukaknezic]

Hi @luishiguera. Yes, you can do that, I would recommend making custom item painters for those, and you will probably need some new decorations. Here is something I managed to create to replicate your image:

For this, I didn't make a custom item painters but it works this way as well 😄

This is chart state:

Chart(
  state: ChartState<void>(
      ChartData(
        [
          // Positive values
          [15, 30, 45, 45, 40, 8, 4, 8, 10, 13, 11].map((e) => BarValue<void>(e.toDouble())).toList(),
          // Negative values
          [-3, -3, -8, -10, -9, -10, -19, -36, -26, -26, -20].map((e) => BarValue<void>(e.toDouble())).toList()
        ],
        axisMin: -40,
        axisMax: 50,
      ),
      itemOptions: BarItemOptions(
        colorForKey: (item, key) => [Colors.red, Colors.blue][key],
        padding: const EdgeInsets.symmetric(horizontal: 2.0),
        radius: BorderRadius.vertical(top: Radius.circular(24.0)),
        color: Theme.of(context).accentColor.withOpacity(0.4),
      ),
      backgroundDecorations: [
        HorizontalAxisDecoration(
          axisStep: 10,
          showValues: true,
          legendFontStyle: Theme.of(context).textTheme.caption,
          legendPosition: HorizontalLegendPosition.start,
          valuesPadding: const EdgeInsets.only(right: 24.0, bottom: -7.0),
          lineColor: Theme.of(context).dividerColor,
        ),
      ],
      foregroundDecorations: [
        SpacerDecoration(
          lineWidth: 1.0,
          showValues: true,
          endWithChart: true,
          legendFontStyle: Theme.of(context).textTheme.caption,
          lineColor: Theme.of(context).dividerColor,
        )
      ]),
)

I did have to create a new decoration to try to replicate the spacer, code is mostly C/P from horizontal and vertical decorations with modifications done, so code is not optimized, but should give you an idea on how to do it: Spacer Decoration

[luishiguera]

Hi @lukaknezic thank you very much for your help with the SpacerDecoration it has helped me a lot, excellent work with the library.

GT

[lukaknezic]

No problem.

Btw. I see that spacer becomes dark when animating you could try to solve that by changing

..blendMode = BlendMode.clear

to

..color = Colors.white

Or if you added your own color just add it to animateTo function as well 😃 then color should stay consistent thought the animation