UI for NativeScript RadCharts use labels with decimals by default

Question

I’ve been doing some experimenting with UI for NativeScript’s charts—which are awesome, by the way—but I’m running into an odd problem I can’t seem to figure out.

On Android, the control suite loves to render all of my numeric labels with a decimal point—aka “15.0” rather than “15”. In my case (and probably in most cases) this behavior is undesirable, and I’m trying to come up with a way around this, but I’m not seeing anything in the API documentation.

To give a concrete example of what I mean, here’s the world’s simplest example that shows this behavior in action.

<!-- main-page.xml -->
<Page 
  xmlns:chart="nativescript-telerik-ui-pro/chart"
  loaded="pageLoaded">
  <StackLayout>
    <chart:RadCartesianChart height="500">
      <chart:RadCartesianChart.series>
        <chart:LineSeries
          items="{{ data }}"
          categoryProperty="key"
          valueProperty="value">
          <chart:LineSeries.horizontalAxis>
            <chart:CategoricalAxis />
          </chart:LineSeries.horizontalAxis>
          <chart:LineSeries.verticalAxis>
            <chart:LinearAxis />
          </chart:LineSeries.verticalAxis>
        </chart:LineSeries>
      </chart:RadCartesianChart.series>
    </chart:RadCartesianChart>
  </StackLayout>
</Page>

---

// main-page.js
var frameModule = require("ui/frame");
var Observable = require("data/observable").Observable;

var pageData = new Observable();
pageData.data = [
  { key: "One", value: 10 },
  { key: "Two", value: 20 }
];

exports.pageLoaded = function(args) {
  var page = args.object;
  page.bindingContext = pageData;
};

With this code, on iOS you end up with a vertical axis with keys like “0, 4, 8, 12”, and on Android that same axis has keys like “0.00, “5.00” & “10.00”.

How can I get the decimal points to go away on Android?

Answer 1

You could use the labelFormat property of the LinearAxis and set it to the desired format. For example to make it display the float values without any trailing zeros you can use the "%.0f" format:

<chart:LineSeries.verticalAxis>
     <chart:LinearAxis android:labelFormat="%.0f"/>
</chart:LineSeries.verticalAxis>

It is worth mentioning that you can use the dedicated NativeScript UI forums where you can find answers to many questions regarding all of the components of the nativescript-telerik-ui-pro plugin. You can also take advantage of the dedicated paid support ticketing system which provides answers no longer than 24 hours, more information can be found here.