react-native-charts-wrapper icon indicating copy to clipboard operation
react-native-charts-wrapper copied to clipboard

LineChart no props for adjustment of spacing of y-axis and line chart data

Open renso3x opened this issue 5 years ago • 2 comments

Expected Behavior

Screen Shot 2019-06-19 at 11 20 35 AM

Actual Behavior

Screen Shot 2019-06-19 at 11 00 47 AM

Data and config

<LineChart
  style={{ flex: 1, marginLeft: 30, width: '97%' }}
  data={{
    dataSets: [
      {
        values: this.state.data,
        label: '',
        config: {
          mode: 'CUBIC_BEZIER',
          drawValues: false,
          lineWidth: 0,
          drawCircles: true,
          circleColor: processColor('#fff'),
          drawCircleHole: false,
          circleRadius: 10,
          highlightColor: processColor('transparent'),
          color: processColor(petrel),
          drawFilled: true,
          fillGradient: {
            colors: [
              processColor('#4CD5F8'),
              processColor('#4CD5F8'),
            ],
            positions: [0, 1],
            angle: 90,
            orientation: 'TOP_BOTTOM',
          },
          fillAlpha: 1000,
          valueTextSize: 15,
        },
      },
    ],
  }}
  chartDescription={{ text: '' }}
  legend={{
    enabled: false,
  }}
  marker={{
    enabled: true,
    markerColor: processColor('white'),
    textColor: processColor('black'),
  }}
  xAxis={{
    enabled: true,
    granularity: 1,
    drawLabels: true,
    position: 'BOTTOM',
    drawAxisLine: true,
    drawGridLines: false,
    fontFamily: 'SFProText-Medium',
    fontWeight: 'bold',
    textSize: 12,
    textColor: processColor('gray'),
    valueFormatter: dates,
  }}
  yAxis={{
    left: {
      drawGridLines: false,
      textColor: processColor('gray'),
      drawAxisLine: false,
    },
    right: {
      enabled: false,
      position: 'OUTSIDE_CHART',
      maxWidth: 50,
      minWidth: 20,
    },
  }}
  autoScaleMinMaxEnabled={true}
  animation={{
    durationX: 0,
    durationY: 1500,
    easingY: 'EaseInOutQuart',
  }}
  drawGridBackground={true}
  gridBackgroundColor={processColor('#C8EEF8')}
  gridBackgroundRadius={300}
  touchEnabled={false}
  dragEnabled={false}
  scaleEnabled={false}
  scaleXEnabled={false}
  scaleYEnabled={false}
  pinchZoom={false}
  doubleTapToZoomEnabled={false}
  dragDecelerationEnabled={true}
  dragDecelerationFrictionCoef={0.99}
  keepPositionOnRotation={false}
/>

Specifications

  • Version:
    • react-native-charts-wrapper: "^0.5.1"
    • react-native: "0.57.4",

renso3x avatar Jun 19 '19 03:06 renso3x

According to https://github.com/PhilJay/MPAndroidChart/issues/3486

LabelCount
AxisMaximum
AxisMinimum

may help, or you can try adding following code to corresponding y axis.

granularityEnabled: true
granularity: [interval you want]

wuxudong avatar Jun 20 '19 15:06 wuxudong

How I ended up solving the space issue is by doing this: valueFormatter: '# ;-# ', Which I don't really understand... The value itself is the # while the extra space characters give the label space between the edge of the chart. The minus sign shows if the number is negative.

tayloraleach avatar Feb 02 '21 23:02 tayloraleach