Charts?

[balazshevesi]

Hello!

I want to build an app over the summer, and i am doing some research about what the right technologies for it would be, and i stumbled across nativescript, it seems very interesting

I am curios what the go-to library is when adding charts in a nativescript application. I found "nativescript-ui-chart", but it seems as if its no longer maintained.

What do you guys use?

[NathanWalker]

My team at the moment uses @nativescript-community/ui-chart.
You can register any from it for use in any flavor (refer to each flavor registration methods: https://docs.nativescript.org/guide/create-custom-native-elements#registering-new-elements), eg:

import { LineChart } from '@nativescript-community/ui-chart/charts';
import { PieChart } from '@nativescript-community/ui-chart/charts';

registerElement('LineChart', () => LineChart);
registerElement('PieChart', () => PieChart);

then use it however needed:

<PieChart (loaded)="loadedChart($event)"></PieChart>

import { PieChart } from '@nativescript-community/ui-chart';
import { PieData } from '@nativescript-community/ui-chart/data/PieData';
import { PieDataSet } from '@nativescript-community/ui-chart/data/PieDataSet';
import { PieEntry } from '@nativescript-community/ui-chart/data/PieEntry';
import {
  LegendHorizontalAlignment,
  LegendOrientation,
  LegendVerticalAlignment
} from '@nativescript-community/ui-chart/components/Legend';

loadedChart(args) {
    this.chart = args.object as PieChart;
    this.chart.usePercentValues = false;
    this.chart.extraOffsets = [10, 10, 10, 10];
    this.chart.drawHoleEnabled = true;
    this.chart.holeColor = 'transparent';
    this.chart.transparentCircleColor = 'white';
    this.chart.transparentCircleAlpha = 0;
    this.chart.holeRadius = 45;
    this.chart.transparentCircleRadiusPercent = 0;
    this.chart.rotationAngle = 0;
    // enable rotation of the chart by touch
    this.chart.rotationEnabled = true;
    this.chart.highlightPerTapEnabled = false;

    const l = this.chart.legend;
    l.verticalAlignment = LegendVerticalAlignment.CENTER;
    l.horizontalAlignment = LegendHorizontalAlignment.RIGHT;
    l.orientation = LegendOrientation.VERTICAL;
    l.drawInside = false;
    l.xEntrySpace = 0;
    l.yEntrySpace = 0;
    l.yOffset = 0;

    // entry label styling
    this.chart.entryLabelColor = 'black';
    this.chart.entryLabelTypeface = Font.default.withFontFamily('OpenSans');
    this.chart.entryLabelTextSize = 0.1;

    this.updateData();
    setTimeout(() => {
      this.chart.animateX(600);
    });
  }

updateData() {
  const dataSet = new PieDataSet([
     {
        y: 10,
        label: 'hello'
     },
     // any entries you want
   ], 'Election Results');

    dataSet.drawValuesEnabled = true;
    dataSet.sliceSpace = 5;
    dataSet.selectionShift = 10;

    const data = new PieData([dataSet]);
    data.valueTextSize = 11;
    data.valueTextColor = 'black';
    data.valueTypeface = Font.default.withFontFamily('OpenSans-Light');
    this.chart.data = data;
    this.chart.invalidate();
}

[balazshevesi]

Looks interesting