Vertical lines don't show

[orestis-z]

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

[msadraka]

X1, X2 added 100px in each line and that looks weird

[vishal41190]

Looks like logic for getting vertical grid here is incorrect. I was able to make my custom grids with this logic.

In render

<LineChart ... >
    <CustomGrid belowChart={true}/>
</LineChart>

Custom Grid

getYGrids = props => {
    const { numberOfTicks } = this.state;
    const values = props.data.map((item) => this.getXAccessor({ item }));
    const ticks = numberOfTicks ? props.x.ticks(numberOfTicks) : values;
    return ticks.map(tick => {
      return <Line key={tick} y1={"0%"} y2={"100%"} x1={props.x(tick)} x2={props.x(tick)} stroke={"#dddddd"} />;
    });
  }

const CustomGrid = values => {
      return (
        <G>
          {// Horizontal grid
          values.ticks
            .map(tick => (
              <Line key={tick} x1={"0%"} x2={"100%"} y1={values.y(tick)} y2={values.y(tick)} stroke={"#dddddd"} />
            ))
            .concat([<Line key={101} x1={"0%"} x2={"100%"} y1={"100%"} y2={"100%"} stroke={"#444444"} />])}
          {this.getYGrids(values)}
        </G>
      );
    };

[C-o-d-e-C-o-w-b-o-y]

Still an issue two years on

[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>
    );
  };

[Marcuspo]

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>
    );
  };

Work for me, only adjusted in stroke added '' in rgba.

Thanks!