wuxudong / react-native-charts-wrapper

a react native charts wrapper (support android & iOS)
2.43k stars 657 forks source link

Radar Chart Is Too Small #964

Open zaabdn opened 11 months ago

zaabdn commented 11 months ago

Expected Behavior

Expected Behavior: size of radar chart is same

Actual Behavior

Actual Behavior: size of radar chart when first value formatter xAxis too long, the radar chart is too small

Screenshots

First value xAxis not too long image

First value xAxis is too long image

Data and config

                <RadarChart
                  style={{ width: Dimensions.get('window').width, height: Dimensions.get('window').height * 0.75 }}
                  data={{
                    values: [{value: 2}, {value: 4}, {value: 3}],
                    config: {
                      color: processColor('#0000cd'),
                      drawFilled: true,
                      fillColor: processColor( '#0000cd'),
                      fillAlpha: 150,
                      lineWidth: 3,
                      valueTextSize: 0,
                      drawValues: false,
                      // valueTextColor: '#0000',
                      drawHighlightCircleEnabled: true,
                      highlightCircleFillColor: 'blue',
                      highlightCircleStrokeColor: 'blue',
                      highlightCircleStrokeWidth: 2,
                      highlightCircleInnerRadius: 3,
                      highlightCircleOuterRadius: 6,
                      drawHighlightIndicators: true,
                      highlightIndicatorColor: 'red',
                    },
                  }}
                  xAxis={{
                    webLineWidth: 3,
                    valueFormatter: ['Competency All 1theK competency', 'Competency Part 2', 'Third Competency'],
                    drawLabels: true,
                    drawGridLines: true,
                    drawAxisLine: true,
                    axisLineWidth: 1,
                    axisMaximum: 0,
                    yOffset: 0,
                  }}
                  yAxis={{
                    axisMinimum: 0,
                    drawLabels: true,
                    drawGridLines: false,
                    drawAxisLine: false,
                  }}
                  chartDescription={{ text: '' }}
                  legend={{
                    enabled: true,
                    verticalAlignment: 'BOTTOM',
                    horizontalAlignment: 'CENTER',
                    orientation: 'HORIZONTAL',
                    wordWrapEnabled: true,
                    textSize: 14,
                    form: 'CIRCLE',
                    formSize: 8,
                    xEntrySpace: 10,
                    yEntrySpace: 0,
                    drawInside: true,
                    formToTextSpace: 5,
                  }}
                  rotationEnabled={false}
                  scaleXEnabled={true}
                  scaleYEnabled={true}
                  pinchZoom={true}
                  scaleEnabled={true}
                  doubleTapToZoomEnabled={true}
                  drawWeb={true}
                  webLineWidth={1}
                  webLineWidthInner={1}
                  webAlpha={255}
                  webColor={processColor('black')}
                  webColorInner={processColor('black')}
                  skipWebLineCount={1}
                  highlightPerTapEnabled={true}
                  onSelect={value => this.handleSelect(value)}
                  marker={{
                    enabled: true,
                    digits: 100,
                    markerColor: 100,
                    textSize: 10,
                    textColor: 100,
                  }}
                  minOffset={0}
                  onChange={event => this.setState({ valueCompetencyOverview: null })}
                  touchEnabled={true}
                  animation={{ durationX: 100, durationY: 100, easingX: 'easeIn' }}
                />

Specifications

LaGregance commented 8 months ago

I have the same issue, any solution ?