wuxudong / react-native-charts-wrapper

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

LineChart yAxis does not respond to options #923

Closed Hasan-aga closed 1 year ago

Hasan-aga commented 1 year ago

Expected Behavior

I want to disable the yAxis by using yAxis={{enabled: false}}

Actual Behavior

yAxis remains visible.

Screenshots

You can see below that the chart has yAxis despite having disabled it:

screenshot

Data and config

const data = {
    dataSets: [
      {
        label: 'Elevation (meters)',
        values: classicElevation,
        config: {
          colors: [processColor(styles.highLightColor)],
          highlightEnabled: true,
          drawCircles: false,
          circleRadius: 1,
          lineWidth: 3,
          circleColor: processColor('teal'),
          drawFilled: true,
          fillGradient: {
            colors: [
              processColor(styles.highLightColor),
              processColor(styles.primaryColor),
            ],
            positions: [0, 0.5],
            angle: 90,
            orientation: 'TOP_BOTTOM',
          },
          fillAlpha: 1000,
        },
      },
    ],
  };

Steps to Reproduce the Problem

Create a line chart as follows:

<LineChart
    style={updatedStyle}
    textColor={processColor(styles.highLightColor)}
    data={data}
    drawGridBackground={false}
    drawBorders={false}
    onSelect={onSelect}
    legend={{enable: false}}
    chartDescription={{text: 'Distance (meters)'}}
    xAxis={{
      drawGridLines: false,
      textColor: processColor(styles.highLightColor),
    }}
    yAxis={{
       enabled: false,
      drawGridLines: false,
    }}
    scaleXEnabled={false}
    scaleYEnabled={false}
    pinchZoom={false}
    marker={{
      enabled: true,
      markerColor: processColor('#444'),
      textColor: processColor('#f7f7f7'),
    }}
 />

Specifications

Hasan-aga commented 1 year ago

I found the solution thanks to this reply on a previous issue. I simply needed to pass the yAxis config using left and right props for each side of the axis:

  yAxis={{
    left: {
      drawGridLines: false,
      drawAxisLine: false,
      drawLabels: false,
    },
    right: {
      drawGridLines: false,
      drawAxisLine: false,
      drawLabels: false,
    },
  }}