René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"QAPage","mainEntity":{"@type":"Question","name":"Charts?","text":"
Hello!
\n
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
\n
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.
\n
What do you guys use?
","upvoteCount":1,"answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"
My team at the moment uses @nativescript-community/ui-chart.
\nYou 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:
\n
import { LineChart } from '@nativescript-community/ui-chart/charts';\nimport { PieChart } from '@nativescript-community/ui-chart/charts';\n\nregisterElement('LineChart', () => LineChart);\nregisterElement('PieChart', () => PieChart);
\n
then use it however needed:
\n
<PieChart (loaded)=\"loadedChart($event)\"></PieChart>
\n
import { PieChart } from '@nativescript-community/ui-chart';\nimport { PieData } from '@nativescript-community/ui-chart/data/PieData';\nimport { PieDataSet } from '@nativescript-community/ui-chart/data/PieDataSet';\nimport { PieEntry } from '@nativescript-community/ui-chart/data/PieEntry';\nimport {\n  LegendHorizontalAlignment,\n  LegendOrientation,\n  LegendVerticalAlignment\n} from '@nativescript-community/ui-chart/components/Legend';\n\nloadedChart(args) {\n    this.chart = args.object as PieChart;\n    this.chart.usePercentValues = false;\n    this.chart.extraOffsets = [10, 10, 10, 10];\n    this.chart.drawHoleEnabled = true;\n    this.chart.holeColor = 'transparent';\n    this.chart.transparentCircleColor = 'white';\n    this.chart.transparentCircleAlpha = 0;\n    this.chart.holeRadius = 45;\n    this.chart.transparentCircleRadiusPercent = 0;\n    this.chart.rotationAngle = 0;\n    // enable rotation of the chart by touch\n    this.chart.rotationEnabled = true;\n    this.chart.highlightPerTapEnabled = false;\n\n    const l = this.chart.legend;\n    l.verticalAlignment = LegendVerticalAlignment.CENTER;\n    l.horizontalAlignment = LegendHorizontalAlignment.RIGHT;\n    l.orientation = LegendOrientation.VERTICAL;\n    l.drawInside = false;\n    l.xEntrySpace = 0;\n    l.yEntrySpace = 0;\n    l.yOffset = 0;\n\n    // entry label styling\n    this.chart.entryLabelColor = 'black';\n    this.chart.entryLabelTypeface = Font.default.withFontFamily('OpenSans');\n    this.chart.entryLabelTextSize = 0.1;\n\n    this.updateData();\n    setTimeout(() => {\n      this.chart.animateX(600);\n    });\n  }\n\nupdateData() {\n  const dataSet = new PieDataSet([\n     {\n        y: 10,\n        label: 'hello'\n     },\n     // any entries you want\n   ], 'Election Results');\n\n    dataSet.drawValuesEnabled = true;\n    dataSet.sliceSpace = 5;\n    dataSet.selectionShift = 10;\n\n    const data = new PieData([dataSet]);\n    data.valueTextSize = 11;\n    data.valueTextColor = 'black';\n    data.valueTypeface = Font.default.withFontFamily('OpenSans-Light');\n    this.chart.data = data;\n    this.chart.invalidate();\n}
","upvoteCount":1,"url":"https://github.com/orgs/NativeScript/discussions/10741#discussioncomment-13222872"}}}