Line width issue

[salujaharkirat]

Post version 0.1.1 I am seeing a strange issue with line width.

I have following configuration for my chart

const DEFAULT_CHARTS_CONFIG = {
  "legend": {
    "enabled": false
  },
   "series": [
          {
            "data": slicedData,
            "enableMouseTracking": false,
            "lineWidth": 4
          }
  "plotOptions": {
    "series": {
      "marker": {
        "enabled": false
      }
    }
  },
  "xAxis": {
    "visible": false
  },
  "yAxis": {
    "visible": false
  },
  "title": {
    "text": null
  },
  "credits": {
    "enabled": false
  },
  "navigation": {
    "buttonOptions": {
      "enabled": false
    }
  }
};

In my application I have 4 tabs and I show graphs on my first tab which is my dashboard.

After signing in I land on dashboard. Here is a view of chart from dashboard:-

As you can see the lineWidth parameter is not getting applied as the chart looks really thin. Now, after sign in it takes few seconds to load dashboard, in between that time if i press another tab from tabview and then come back to dashboard, I see that line width is applied(surprising) and my graph looks something like this:-

This works fine in 0.1.1. in 0.1.1 the only issue I was facing was with backgroundColor: transparent. So for now I just added that to css and create my own common module to make it work.

I will try looking into this issue and if i find something I would create a PR but in the meantime if someone else has any insights on this, it would really help :)

[salujaharkirat]

This might have something to do with relay. I was facing this issue while using relay but I recently moved to apollo client and it works fine with that. This looks strange.

[Sexual]

I have the same issue. Not using relay or apollo client.

[NachoJusticia]

Hi @jinxac and @Sexual
I had the same problem and I solved it passing the following properties to the chart:

• scalesPageToFit to false
• automaticallyAdjustContentInsets to false

import ChartView from 'react-native-highcharts';
...
// declare conf variable
<ChartView style={{ flex: 1, backgroundColor: 'transparent'  }} config={conf} scalesPageToFit={false} automaticallyAdjustContentInsets={false}></ChartView>

I'm adding a Pull Request to this project in order to update the README adding these two properties. I hope this is useful for you 👍