Radar plot center point is zero

[Athony1225]

I want the points with the value of zero to be concentrated on the center point as shown in the figure, but I don't know how to set it

[collamaf]

Hello, I am also having the same question. Are we missing something here?

[Athony1225]

Hello, I am also having the same question. Are we missing something here?
I do not know, I searched, but could not find which property can be controlled.
The screenshot below is the result of version 0.41.0, but this problem occurred after I updated to 0.62.0

[imaNNeo]

I didn't understand your issue

[Athony1225]

I didn't understand your issue

The 1 and 2 in the picture are the differences between the 0.62.0 and 0.41.0 versions, the 2 is the one I want. I don't know if there is a way to control this in version 0.62.0

[mfatihz]

I got the same problem too. I ran the sample file and modified the data like this

And the result is as follows:

I think the value 0 should be in the center of the radar, like the image below

And an additional problem: when using other value combinations, the radar axis scales incorrectly. For example below:

[janosdupai]

Same here... If you have any solution, just let me know please!

[collamaf]

Guys I "solved" the problem by superimposing my desired data with another dataset (made transparent so not actually shown) having both 0 and 100 as values
Did I made it clean what I mean?

[hardgit]

I've encountered this problem too. May I ask when will the author fix it?

[imaNNeo]

Can someone please give me a reproducible code (a main.dart file) to let me fix the issue?

[ColinSchmale]

You can use the example and replace rawDataSets in example/lib/presentation/samples/radar/radar_chart_sample1.dart
as mentioned in my ticket with this simplified code:

List<RawDataSet> rawDataSets() {
    return [
      RawDataSet(
        title: 'Fashion',
        color: widget.fashionColor,
        values: [
          100,
          90,
          90,
        ],
      ),
    ];
}

[git-boya]

May I ask if there is any progress on this issue

[eldrig0]

#1078 broke the behaviour after version 0.6.2, i reverted to 0.6.1, and it works and to have the correct scale have a transparent dataset that contains max value and min value along with my actual dataset

 RadarDataSet(
       entryRadius: 8,
       fillColor: Colors.transparent,
       borderColor: Colors.transparent,
       borderWidth: 2,
      dataEntries:  [
         // Make sure the length of this dataset match the length of your original dataset.
         RadarEntry(value: 0), //minValue
         RadarEntry(value: 5) //maxValue
      ],
),

[xiaao3]

in radar_chart_painter.dart. if the dataSet has some data is zero, return default chart center.

  double getChartCenterValue(RadarChartData data) {
    final dataSetMaxValue = data.maxEntry.value;
    final dataSetMinValue = data.minEntry.value;

    // add this 
    if(dataSetMinValue == 0) return getDefaultChartCenterValue();

    final tickSpace = getSpaceBetweenTicks(data);
    final centerValue = dataSetMinValue - tickSpace;

    return dataSetMaxValue == dataSetMinValue
        ? getDefaultChartCenterValue()
        : centerValue;
  }

[soraef]

@imaNNeo
This is the reproduction code.

Versions
Flutter 3.19.6
Dart 3.3.4

import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: RadarChart(
          RadarChartData(
            radarShape: RadarShape.polygon,
            tickCount: 3,
            dataSets: [
              RadarDataSet(
                dataEntries: [
                  RadarEntry(value: 0),
                  RadarEntry(value: 20),
                  RadarEntry(value: 100),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

[tim-kodirov]

I was able to find a temporary workaround to fix this issue by extending the RadarChartData class and overriding the minEntry getter to be equal to maxEntry (this forces the radar chart to set the center point to 0):

class RadarChartDataExtended extends RadarChartData {
  RadarChartDataExtended({
    List<RadarDataSet>? dataSets,
    RadarShape? radarShape,
    BorderSide? radarBorderData,
    double? titlePositionPercentageOffset,
    TextStyle? titleTextStyle,
    GetTitleByIndexFunction? getTitle,
    int? tickCount,
    BorderSide? tickBorderData,
    BorderSide? gridBorderData,
    TextStyle? ticksTextStyle,
  }) : super(
          dataSets: dataSets,
          radarShape: radarShape,
          radarBorderData: radarBorderData,
          titlePositionPercentageOffset: titlePositionPercentageOffset,
          titleTextStyle: titleTextStyle,
          getTitle: getTitle,
          tickCount: tickCount,
          tickBorderData: tickBorderData,
          gridBorderData: gridBorderData,
          ticksTextStyle: ticksTextStyle,
        );

  @override
  RadarEntry get minEntry => super.maxEntry;
}

And then using this class:

RadarChart(
    RadarChartDataExtended(
      dataSets: dataSets,
      radarShape: RadarShape.circle
      ...
    )
  );

[mafreud]

@tim-kodirov Thank you. It worked perfectly.

[mrr358]

• 1 for @tim-kodirov solution. I had to stop animation as it showed the non-zero at centre state then snapped to the zero at centre state. Thanks.

[devinyonas]

Guys I "solved" the problem by superimposing my desired data with another dataset (made transparent so not actually shown) having both 0 and 100 as values Did I made it clean what I mean?

For the scaling issue this solution by @collamaf works. it scales the radar correctly

add min and max value transparent radar to the dataSets:

  dataSets: [
            /// Data for max value
            RadarDataSet(
              fillColor: Colors.transparent,
              borderColor: Colors.transparent,
              borderWidth: 0,
              entryRadius: 0,
              dataEntries: [
                const RadarEntry(value: 1),
                const RadarEntry(value: 1),
                const RadarEntry(value: 1),
              ],
            ),

            /// Data for min value
            RadarDataSet(
              fillColor: Colors.transparent,
              borderColor: Colors.transparent,
              borderWidth: 0,
              entryRadius: 0,
              dataEntries: [
                const RadarEntry(value: 0),
                const RadarEntry(value: 0),
                const RadarEntry(value: 0),
              ],
            ),
       ],