TypeError: undefined is not an object (evaluating 'userStyles.width')

[stal1989]

While importing "@highcharts/highcharts-react-native" we are facing issue. Please give some suggestion.

[sebastianbochan]

Do you use our master or beta branch?

[stal1989]

@sebastianbochan It is master branch.
"@highcharts/highcharts-react-native": "^1.0.0",

[sebastianbochan]

Could you post your directive declaration (and chart if possible)?

[jeniasaigak]

There is one more issue here. The error Can't find variable: userStyles will appear if the device is rotated as userStyles was created at constructor while we are trying to access it at onRotate function.

Here is this error:

It present only at master branch as the issue is already fixed at beta branch.

[sebastianbochan]

Thank you for the reporting.

Will fix this when fix for the #33 be ready, (as a result we avoid minor releases).

[okanisildar]

Hi, I upgraded to 2.0.3 but still having this issue.

Here my versions;

• "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.1.tar.gz"

• "expo": "^36.0.0"

• "@highcharts/highcharts-react-native": "2.0.3"

[sebastianbochan]

Hi @okanisildur,
Let me know if issue happend on rotation or on init?

Could you send me your config?

[okanisildar]

This happened on init, I could not see charts even once.

const pieConfig = { chart: { animation: false, type: this.props.type }, title: { text: this.props.percentage, floating: true, verticalAlign: "middle", style: { fontSize: FontSizes.h2, fontWeight: "700" } }, tooltip: { enabled: true }, plotOptions: { pie: { showInLegend: true, animation: { duration: 750, easing: "easeOutQuad" }, shadow: true, center: ["50%", "50%"], cursor: "pointer", dataLabels: { enabled: false }, point: { events: { click: function() { moveToPoint(this); } } } }, series: { animation: { duration: 750, easing: "easeOutQuad" } } }, series: [ { animation: { duration: 750, easing: "easeOutQuad" }, name: Translation.Count, data: this.props.data, size: "90%", innerSize: "80%", dataLabels: { formatter: function() { return this.y > 5 ? this.point.name : null; }, color: "#ffffff", distance: -30 } } ], exporting: { enabled: false }, credits: { enabled: false } };

const lineConfig = {
  chart: {
    type: "line"
  },
  xAxis: [
    {
      type: "datetime",
      labels: { format: "{value:%e. %b %H:%M}" }
    }
  ],
  yAxis: {
    title: {
      text: ""
    },
    plotLines: [
      {
        value: this.props.upper_limit,
        color: '#546cff',
        dashStyle: 'shortdash',
        width: 2,
        label: {
          text: i18n.t("SensorDetailsScreen.upperLimit")
        }
    }]
  },

  legend: {
    enabled: false
  },
  exporting: {
    enabled: false
  },
  credits: {
    enabled: false
  },
  rangeSelector: {
    enabled: false
  },
  plotOptions: {
    series: {
      animation: {
        duration: 2000
      }
    }
  },
  series: [
    {
      animation: {
        duration: 2000
      },
      name: Translation[this.props.dataType],
      data: this.props.data,
      color: ColorList[this.props.dataType],
      tooltip: {
        valueDecimals: 2
      }
    }
  ],
  scrollbar: {
    enabled: false
  },
  navigator: {
    height: Layout.isSmallDevice ? 40 : 50,
    handles: {
      width: Layout.isSmallDevice ? 20 : 20,
      height: Layout.isSmallDevice ? 30 : 30
    }
  },
  lang: {
    noData: Translation.NoData
  },
  noData: {
    style: {
      fontWeight: "bold",
      fontSize: FontSizes.h4,
      color: "#303030"
    }
  }
};`

Sorry for messy looking, insert code did not work as expected.

[sebastianbochan]

Thank you for details!
At this moment its enough, will test and get back to you.

Please be aware of our christmas time so the feedback can be a little bit later.

[okanisildar]

@sebastianbochan Hello again,

I found my mistake I don't think the mistake was because of the highcharts-react-native.

I have legacy code and ChartView style prop was given as "style" and was working. When I update to version 2.0.3 (because of the webview changes) I did not change my prop to "styles" because I did not know this was changed. I could not see a changelog and since I am not making changes on charts I did not take a look at your example :)
When I took a look again with a fresh mind to source code of the highcharts-react-native I have realized this is changed. So I have changed my props and working well.

Thanks a lot for your attention.
Merry Christmas!

[sebastianbochan]

Thank you for the feedback, so now, all works properly, correct?

[okanisildar]

That is correct.