Value Decoration - Candle Chart

[roly151]

Is it possible to display the top and bottom values on a candle chart?

I can display the bottom value with, but not sure if it's possible to add the top value of the range above each candle as well? ValueDecoration( alignment: Alignment.bottomCenter, textStyle: Theme.of(context) .textTheme .button .copyWith(color: Theme.of(context).colorScheme.onPrimary), ),

[lukaknezic]

Hey @roly151,

I added this now but in new branch where we are preparing bigger update. You can just c/p decoration from that branch: https://github.com/infinum/flutter-charts/blob/feature/render-object/lib/chart/render/decorations/value_decoration.dart or you can try using the updated branch in project as well by updating your yaml file:

  charts_painter:
    git:
      url: https://github.com/infinum/flutter-charts.git
      ref: feature/render-object

With updated decoration you can pass valueGenerator. So in order to show values on bottom and top of candle chart you can add another ValueDecoration (Current one doesn't have to be updated at all) where you can add valueGenerator: (item) => item.min ?? 0. This will generate value decoration for min values and show them at the bottom of the candle chart item.

[roly151]

Great - thankyou!

[roly151]

Sorry - closed a little early. I'm using the new branch, and I was able to get both top and bottom values showing. But the bottom values are on the candles?

If I add an alignment: property, no matter what I add (to either Value Decoration), it results in the top values also being shown on the candle. Is it possible to have the bottom values show below the candles like the top ones?

[lukaknezic]

Hey @roly151 ,

Could you try that but with new branch? You might need to update some stuff for new branch but this will be next major update, everything works except SelectedItemDecoration. So if you are not using SelectedItemDecoration and you can migrate I recommend you to do so, chart should be more performant and this will start working as intended 😃

I tested it in render-object branch and it looks like it works:

I didn't have to change anything, and this are my decorations:

ValueDecoration(
  textStyle: TextStyle(color: Colors.red),
  alignment: Alignment.topCenter,
),
ValueDecoration(
  textStyle: TextStyle(color: Colors.red),
  alignment: Alignment.bottomCenter,
  valueGenerator: (item) => item.min ?? 0,
),

[roly151]

I am using the new branch - this is in my yaml file:

    git:
      url: https://github.com/infinum/flutter-charts.git
      ref: feature/render-object

And I have the same code for the ValueDecorations, but I'm not getting the same outcome. Here is the code I am using:

Chart(
          state: ChartState.bar(
            ChartData.fromList(
              [1, 3, 4, 2, 5, 5, 2]
                  .map((e) =>
                  CandleValue<void>(e.toDouble() + 6, e.toDouble()))
                  .toList(),
              axisMax: 16,
              axisMin: -1
            ),
            itemOptions: BarItemOptions(
              padding: const EdgeInsets.symmetric(horizontal: 25.0),
              radius: BorderRadius.all(Radius.circular(18.0)),
              color: Colors.redAccent,
            ),
            backgroundDecorations: [
              GridDecoration(
                showHorizontalValues: false,
                showVerticalValues: true,
                verticalAxisValueFromIndex: (int value) {
                      return DateFormat.E().format(now.add(new Duration(days: value+1))).toString();
                  },
                verticalAxisStep: 1,
                horizontalAxisStep: 3,
                textStyle: TextStyle(color: Colors.grey),
                gridColor: Theme.of(context).dividerColor,
              ),
            ],
            foregroundDecorations: [
              ValueDecoration(
                alignment: Alignment.topCenter,
                textStyle: TextStyle(color: Colors.red),
              ),
              ValueDecoration(
                textStyle: TextStyle(color: Colors.red),
                alignment: Alignment.bottomCenter,
                valueGenerator: (item) => item.min ?? 0,
              ),
            ],
          ),
        ),

This produces this outcome:

Are you able to share the code you used in your example? Or can you see anything I have missed or messed up?

[lukaknezic]

Thanks for example code, I was able to reproduce your bug with it 🙂

It was a big bug, issue here was with axisMin it looks like it breaks some decorations, even some charts. I fixed that now in render-object branch, in this commit.

You can try to update from pubspec, you might need to delete cached files just to be sure new version is fetched.

One more thing that I'll try to update, CandleValue first value should be min and second one should be max, that will clear up confusion, since now in decorations when you call item.min you will get max value.

Let me know if fix works for you 😃

[roly151]

I had to remove the axisMin line, then add it back for it to work. But it now works - Thankyou! Excellent and quick support. Thankyou very much.