infinum/flutter-charts

How to customize x-axis/vertical legend values?

jaskiratAtNexG opened this issue ยท 2 comments

Screenshot 2023-05-02 at 12 41 26 PM

how can we add emojis below the text values in the bar chart??

Hey @jaskiratAtNexG

You can use WidgetDecoration to accomplish this.

Example:

WidgetDecoration(
  margin: const EdgeInsets.only(bottom: 24.0),
  widgetDecorationBuilder: (context, chartState, itemWidth, verticalMultiplier) {
    return Container(
      alignment: Alignment.bottomCenter,
      child: Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          '๐Ÿ˜ƒ',
          '๐Ÿ˜Š',
          '๐Ÿ˜ˆ',
          '๐Ÿ˜ƒ',
          '๐Ÿ˜Š',
          '๐Ÿ˜ˆ',
          '๐Ÿ˜ƒ',
          '๐Ÿ˜Š',
          '๐Ÿ˜ˆ',
        ].map((value) {
          return Container(
            width: itemWidth,
            child: Container(
              alignment: Alignment.bottomCenter,
              child: Text(value,
                  style: Theme.of(context)
                      .textTheme
                      .subtitle2!
                      .copyWith(fontSize: 12, fontWeight: FontWeight.bold)),
            ),
          );
        }).toList(),
      ),
    );
  },
)

By adding this decoration you can insert any widget you want. Just make sure you set width to same width that is passed in builder function. This will make sure that your widgets are shown appropriatelly.

Use this decoration with GridDecoration to add it below actual values.

Hi thanks for the solution.