Vertical lines don't show

VERTICAL doesn’t show vertical lines. HORIZONTAL works. BOTH shows just horizontal lines.

Vertical line is shown only at x=0. Reproducible example:

import React from 'react'
import { View, StyleSheet } from 'react-native';
import { Path } from 'react-native-svg'
import { AreaChart, Grid, Line, XAxis, YAxis } from 'react-native-svg-charts'
import * as shape from 'd3-shape'

class AreaChartExample extends React.PureComponent {

    render() {

       const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]
        // const data2 = Array(data.length).fill(4);
        const Outline = ({ line }) => (
            <Path
                key={'line'}
                d={line}
                stroke={'rgb(134, 65, 244)'}
                fill={'none'}
            />
        )

        const xAxisHeight = 30
        const verticalContentInset = { top: 10, bottom: 10 }
        const axesSvg = { fontSize: 10, fill: 'grey', fontFamily: "Verdana" };

        return (
          <View
            style={ {
              height: 200,
              padding: 20,
              margin: 20,
              flexDirection: 'row',
              borderRadius: 5,
              shadowOffset: {width: 0, height: 2},
              shadowRadius: 5,
              shadowOpacity: 0.3,
            } }
          >
            <YAxis
                data={data}
                style={ { marginBottom: xAxisHeight } }
                contentInset={ verticalContentInset }
                svg={axesSvg}
            />
            <View style={{ flex: 1, marginLeft: 10 }}>
              <AreaChart
                  style={{ flex: 1 }}
                  // style={ StyleSheet.absoluteFill }

                  data={data}
                  contentInset={ verticalContentInset }
                  curve={shape.curveNatural}
                  svg={{ fill: 'rgba(134, 65, 244, 0.2)' }}
              >
                   <Grid
                    svg={{strokeDasharray: [6, 8]}}
                  />
                  <Grid
                    svg={{strokeDasharray: [6, 8]}}
                    direction={ Grid.Direction.VERTICAL }
                    belowChart={ false }
                  />
                  <Outline/>
              </AreaChart>
              <XAxis
                style={{ marginHorizontal: -10, height: xAxisHeight }}
                data={data}
                formatLabel={(value, index) => index}
                contentInset={{ left: 10, right: 10 }}
                svg={axesSvg}
              />
            </View>
          </View>
        )
    }
}

export default AreaChartExample

Same issue as here: https://github.com/JesperLekland/react-native-svg-charts/issues/249

[mikeislearning]

Struggled with this issue for a while, here’s my solution. I used xPositionModifier to place the grid line in the centre of each bar instead of bordering it.

  const VerticalGrid = ({ x, bandwidth, data }) => {
    const xPositionModifier = bandwidth / 2 - bandwidth;
    return (
      <G>
        {data.map((_, index) => {   
          return (
            <Line
              key={index}
              strokeDasharray="3, 4"
              y1={'0.5%'}
              y2={'96%'}
              x1={x(index)r}
              x2={x(index)}
              stroke={rgba(0,0,0,0.2)}
            />
          );
        })}
      </G>
    );
  };

[M4FFS]

Still an issue two years on