Vertical grid 'react-native-svg-charts' in LineChart in react native not showing

Question

    <LineChart
      style={styles.lineChartGraph}
      curve={shape.curveNatural}
      data={props.xAxisData}
      svg={{
        stroke: props.color,
        strokeWidth: 3,
      }}
      contentInset={{top: 20, bottom: 20}}>
      <Grid color={'lightgrey'} direction={Grid.Direction.VERTICAL} />
    </LineChart>

I am trying to show vertical grids under the line

Answer 1

Vertical grid 'react-native-svg-charts' in LineChart in react native showing properly.

import React from 'react'
import { LineChart, XAxis } from 'react-native-svg-charts'
import { View } from 'react-native'
import { G, Line } from 'react-native-svg'
import dateFns from 'date-fns'
import * as scale from 'd3-scale'

class CustomGridExample extends React.PureComponent {

    render() {

        const data = [
            {
                value: 50,
                date: dateFns.setHours(new Date(2018, 0, 0), 1),
            },
            {
               value: 10,
                date: dateFns.setHours(new Date(2018, 0, 0), 9),
            },
            {
                value: 150,
                date: dateFns.setHours(new Date(2018, 0, 0), 10),
            },
            {
                value: 10,
                date: dateFns.setHours(new Date(2018, 0, 0), 13),
            },
            {
                value: 100,
                date: dateFns.setHours(new Date(2018, 0, 0), 21),
            },
            {
                value: 20,
                date: dateFns.setHours(new Date(2018, 0, 0), 24),
            },
            {
                value: 115,
                date: dateFns.setHours(new Date(2018, 0, 0), 32),
            },
            {
                value: 75,
                date: dateFns.setHours(new Date(2018, 0, 0), 34),
            },
            {
                value: 25,
                date: dateFns.setHours(new Date(2018, 0, 0), 40),
            },
            {
                value: 125,
                date: dateFns.setHours(new Date(2018, 0, 0), 41),
            },
            {
                value: 66,
                date: dateFns.setHours(new Date(2018, 0, 0), 42),
            },
            {
                value: 85,
                date: dateFns.setHours(new Date(2018, 0, 0), 50),
            },
        ]

        const CustomGrid = ({ x, y, data, ticks, width }) => {

          const xValues = data.map((item, index) => item.date)
          const xTicks = scale.scaleTime()
                  .domain(xValues)
                  .ticks(10)

          console.log(xTicks)

          return (
            <G>
                {
                    // Horizontal grid
                    ticks.map(tick => (
                        <Line
                            key={ tick }
                           x1={ '0%' }
                            x2={ '100%' }
                            y1={ y(tick) }
                           y2={ y(tick) }
                            stroke={ 'rgba(0,0,0,0.2)' }
                        />
                    ))
                }
                {
                    // Vertical grid
                    xTicks.map((value, index) => {
                        console.log('x', x(value))
                        return (
                          <Line
                              key={ index }
                              y1={ '0%' }
                              y2={ '100%' }
                              x1={ x(value) }
                              x2={ x(value) }
                              stroke={ 'rgba(0,0,0,0.2)' }
                          />
                        )
                    })
                }
            </G>
          )
        }

        return (
           <View style={ { height: 200, padding: 20 } }>
                <LineChart
                   style={ { flex: 1 } }
                    data={ data }
                    yAccessor={({ item }) => item.value}
                    xAccessor={({ item }) => item.date}
                    contentInset={{ left: 10, right: 25 }}
                    xScale={scale.scaleTime}
                    numberOfTicks={10}
                    svg={ {
                        stroke: 'rgb(134, 65, 244)',
                    } }
                    renderGrid={ CustomGrid }
                />
                <XAxis
                  data={data}
                  svg={{
                      fill: 'black',
                      fontSize: 8,
                      fontWeight: 'bold',
                      rotation: 20,
                      originY: 30,
                     y: 5,
                  }}
                  xAccessor={({ item }) => item.date}
                  scale={scale.scaleTime}
                  numberOfTicks={10}
                  style={{ marginHorizontal: -15, height: 20 }}
                  contentInset={{ left: 15, right: 45 }}
                  formatLabel={(value) => dateFns.format(value, 'HH:mm')}
                />
            </View>
        )
    }

}

export default CustomGridExample