Nativescript 6.5.2 iOS Chart Breaking Bug

[keithgulbro]

Please, provide the details below:

Hi there,

I have a Nativescript project leveraging the nativescript-ui-chart plugin however, while on Nativescript 6.5.2 for iOS I am getting the following error even when implementing the demo code.

CONSOLE ERROR file: node_modules/nativescript-vue/dist/index.js:628:21: [Vue warn]: Error in directive tkCartesianSeries inserted hook: "TypeError: undefined is not an object (evaluating 'series.label.style.fontInternal.fontSize')"

  <RadCartesianChart>
    <CategoricalAxis v-tkCartesianHorizontalAxis />
    <LinearAxis v-tkCartesianVerticalAxis />
    <LineSeries
      v-tkCartesianSeries
      :items="items"
      categoryProperty="Country"
      valueProperty="Amount"
    />
  </RadCartesianChart>

I am using the sample data provided inside the demo as well.

Here's my package.json file:

{
  "name": "test-nativescript",
  "version": "1.0.0",
  "description": "Sample Description",
  "author": "Keith Gulbro <xxxxxxx@keithgulbro.com>",
  "license": "MIT",
  "nativescript": {
    "id": "org.sample.applicationname",
    "tns-android": {
      "version": "6.5.0"
    },
    "tns-ios": {
      "version": "6.5.2"
    }
  },
  "dependencies": {
    "@nativescript-community/ui-chart": "0.0.32",
    "@vue/devtools": "^5.1.0",
    "axios": "^0.18.0",
    "nativescript-app-sync": "^2.0.0",
    "nativescript-fonticon": "^2.0.0",
    "nativescript-localstorage": "^2.0.0",
    "nativescript-ratings": "^1.0.1",
    "nativescript-socketio": "^3.2.1",
    "nativescript-statusbar": "^5.0.0",
    "nativescript-store-update": "^1.0.2",
    "nativescript-toasty": "^1.3.1",
    "nativescript-ui-autocomplete": "^6.0.0",
    "nativescript-ui-chart": "^7.0.0",
    "nativescript-ui-listview": "^8.2.0",
    "nativescript-ui-sidedrawer": "^8.0.0",
    "nativescript-vue": "2.7.1",
    "nativescript-vue-devtools": "^1.2.0",
    "numeral": "^2.0.6",
    "tns-core-modules": "~6.5.0",
    "vue-fuse": "^2.1.0",
    "vue-moment": "^4.0.0",
    "vuex": "^3.1.1"
  },
  "devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/preset-env": "^7.8.4",
    "babel-loader": "^8.0.6",
    "babel-traverse": "6.26.0",
    "babel-types": "6.26.0",
    "babylon": "6.18.0",
    "clean-webpack-plugin": "^0.1.19",
    "copy-webpack-plugin": "^4.5.2",
    "css-loader": "^1.0.0",
    "lazy": "1.0.11",
    "nativescript-dev-webpack": "^1.4.1",
    "nativescript-vue-template-compiler": "^2.0.0",
    "nativescript-worker-loader": "~0.9.0",
    "node-sass": "^4.13.1",
    "sass-loader": "^7.1.0",
    "terser-webpack-plugin": "^1.2.4",
    "vue-loader": "^15.2.6",
    "webpack": "^4.31.0",
    "webpack-bundle-analyzer": "~2.13.1",
    "webpack-cli": "^3.3.2"
  }
}

[chrum]

hey, If i am correct i had the same problem and fixed it by changing the function at file node_modules/nativescript-ui-chart/initializers/chart-initializers.ios.js at line 391

ChartSeriesValueMapper.prototype.applyLabelFontFromStyle = function (series) {
        if (series.ios && series.label && series.label.style.fontInternal !== font_1.Font.default) {
            var defaultLabelSize = 10;
            var labelFontSize = series.label.style.fontInternal ? series.label.style.fontInternal.fontSize : defaultLabelSize;
            var uiFont = UIFont.systemFontOfSize(labelFontSize);
            var iosFont = series.label.style.fontInternal ? series.label.style.fontInternal.getUIFont(uiFont) : uiFont;
            series.ios.style.pointLabelStyle.font = iosFont;
            if (series.owner) {
                series.updateOwnerChart();
            }
        }
};`

[mvarelam]

I stumbled upon this same error and fixed in a different way.

I added a generic CSS style to my chart labels (this can be overriden accordingly):

ChartSeriesLabel {
  margin: 10;
  font-weight: bold;
  font-size: 1;
  color: white;
}

and also specified the label style for the specific series where the error is happening

<PointLabelStyle tkLineLabelStyle margin="10"
     fontStyle="Normal"
     fillColor="#000000"
     textSize="1"
     textColor="White">
</PointLabelStyle>

I had to add both pieces of code to get rid of the error.