How to full fill parent view

What is the problem?

First of all, thank you very much for this incredible library. Great work.

I feel that lost obvious thing, sorry for that, but I’m a little bit confused.

I use AreaChart with Path and LinearGradient and see that chart has dynamically width.

Please, check the screenshots.

Is it possible to do, that chart always has 100% width and height without left, right and top white padding?

I tried use flex style and change view size, but it didn’t give results. Maybe I must use non default scale?

Look forward for help.

When does it happen?

What platform?

• iOS
• Android

React Native version: 0.xx

Code to reproduce

Hope everything is clear. I don’t use something special.

import React from 'react';
import {StyleSheet, View} from 'react-native'
import { AreaChart } from 'react-native-svg-charts'
import { Defs, LinearGradient, Stop, Path } from 'react-native-svg'
import * as shape from 'd3-shape'

const Gradient = ({ index }) => (
    <Defs key={index}>
        <LinearGradient id={'gradient'} x1={'0%'} y={'0%'} x2={'0%'} y2={'100%'}>
            <Stop offset={'0%'} stopColor={'rgb(123, 256, 123)'} stopOpacity={1}/>
            <Stop offset={'100%'} stopColor={'rgb(56, 265, 235)'} stopOpacity={1}/>
        </LinearGradient>
    </Defs>
)

const Line = ({ line }) => (
    <Path
        y={ -1 }
        key={'line'}
        d={line}
        stroke={'rgba(123, 245, 12, 1)'}
        strokeWidth={ 2 }
        fill={'none'}
    />
)

const ChartWidget = ({ data }) => (
  <View style={styles.chartWidget} >
    <AreaChart
      style={ styles.chart }
      data={data}
      curve={ shape.curveBasisOpen }
      svg={{ fill: 'url(#gradient)' }}
    >
      <Line />
      <Gradient />
    </AreaChart>
  </View>
)

export default class App extends React.Component {
  constructor() {
    super()
  }

  render() {
    return (
      <View style={styles.mainWrapper} >
        <ChartWidget data={[12, 150, 360, 40]}/>
        <ChartWidget data={[12, 150, 360, 40, 1000, 40, 60]}/>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  mainWrapper: {
    width: '100%',
    height: '100%',
    backgroundColor: "#EEF1FD",
    padding: 8,
  },
  chartWidget: {
    marginTop: 20,
    backgroundColor: "#FFFFFF",
  },
  chart: {
    width: '100%',
    height: 124,
  },
})

[binkerCxb]

@flalex If you need to specify yMax YAxis setting: data={[yMin,yMax]} min={yMin} max={yMax} numberOfTicks={ticksNumber} AreaChart yMin={yMin} yMax={yMax} numberOfTicks={ticksNumber}

eg: yMin 0, yMax 1000 ticksNumber: 5 result: 0 200, 400, 600, 800, 1000
default is linear can be set yScale
obout yScale https://www.npmjs.com/package/d3-scale English is not good, please forgive me!

[binkerCxb]

AreaChart parameter： xMin ， xMax 。Maybe you can try it, it solves my same problem.