wuxudong / react-native-charts-wrapper

a react native charts wrapper (support android & iOS)
2.44k stars 658 forks source link

Spacing between xAxis and label #206

Closed thuctl closed 6 years ago

thuctl commented 6 years ago

I facing a problem when the label is close to xAxis. Have any attribute to resolve this, such as margin...? thanks for the support!

img

wuxudong commented 6 years ago

there are

xEntrySpace: PropTypes.number,
yEntrySpace: PropTypes.number,
formToTextSpace: PropTypes.number,

in chart config.

According to the doc in MpAndroidChart,

/**
 * the space between the legend entries on a horizontal axis, default 6f
 */
private float mXEntrySpace = 6f;

/**
 * the space between the legend entries on a vertical axis, default 5f
 */
private float mYEntrySpace = 0f;

/**
 * the space between the legend entries on a vertical axis, default 2f
 * private float mYEntrySpace = 2f; /** the space between the form and the
 * actual label/text
 */
private float mFormToTextSpace = 5f;
thuctl commented 6 years ago

@wuxudong, I tried to use this, but no effect

data: {
       dataSets: [{
               values: dataTmp,
               label: Constant.title_temperature,
               config: {
                      lineWidth: 1,
                       drawCircles: false,
                      drawFilled: false,
                      drawLabels: false,
                      drawValues: false,
                      color: processColor('blue'),
                      fillColor: processColor('blue'),
                      xEntrySpace: 10,
                      yEntrySpace: 10,
               }
       }],
},

and use: <LineChart data={data} ... />

wuxudong commented 6 years ago

These attributes is not for dataSets, they belongs to legend.

Please check the source code for details.

thuctl commented 6 years ago

yep, I also tried to follow this source but it did not work: https://github.com/mskec/react-native-mp-android-chart-example/blob/master/app/LineChartScreen.js

wuxudong commented 6 years ago
this.state = {
  data: {},
  legend: {
    enabled: true,
    textColor: processColor('blue'),
    textSize: 12,
    position: 'BELOW_CHART_LEFT',
    form: 'SQUARE',
    formSize: 14,
    xEntrySpace: 10,
    yEntrySpace: 5,
    formToTextSpace: 5,
    wordWrapEnabled: true,
    maxSizePercent: 0.5,
    custom: {
      colors: [processColor('red'), processColor('blue'), processColor('green')],
      labels: ['Company X', 'Company Y', 'Company Dashed']
    }
  }
}

simulator screen shot - iphone 6 - 2018-02-07 at 23 41 36

and formSize: 24, notice the square is much bigger.

simulator screen shot - iphone 6 - 2018-02-07 at 23 45 27

and yEntrySpace: 25, the distance between lines is bigger.

simulator screen shot - iphone 6 - 2018-02-07 at 23 47 02

and formToTextSpace: 35, legend text move to right.

simulator screen shot - iphone 6 - 2018-02-07 at 23 48 38

and I will dig a little deeper how to use xEntrySpace

wuxudong commented 6 years ago

I think you can set wordWrapEnabled: false to make them in one line first.

There is some problem about calculatedLabelBreakPoints in iOS. It seems initial frame is always 0,0 - 0,0

wuxudong commented 6 years ago

extraOffsets={{"bottom":100}} can do the work for you.

simulator screen shot - iphone 6 - 2018-07-26 at 15 15 03