capitalone / react-native-pathjs-charts

Android and iOS charts based on react-native-svg and paths-js
Apache License 2.0
879 stars 261 forks source link

Radar chart rings not centered #200

Open gilsonmandalogo opened 6 years ago

gilsonmandalogo commented 6 years ago

Before filing an issue please ensure the following boxes are checked, if applicable:

I can't do a centered radar chart rings: image

Code to reproduce:

I have compiled the example app too, and the result is same on radar screen. Anyway, below is my code to reproduce:

let data = [{
  "speed": 74,
  "balance": 29,
  "explosives": 40,
  "energy": 40,
  "flexibility": 30,
  "agility": 25,
  "endurance": 44
}];

const options = {
  width: 300,
  height: 300,
  margin: {
    top: 20,
    left: 20,
    right: 20,
    bottom: 20
  },
  fill: "#C21D1D",
  stroke: "#C21D1D",
  label: {
    fontFamily: 'Arial',
    fontSize: 14,
    fontWeight: true,
    fill: '#ECF0F1'
  }
};
return(
  <View>
    <Radar
      data={data}
      options={options}              
    />
  </View>
);
flochaz commented 6 years ago

removing the margin section should solve your issue