Skip to content
\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"}}}
Discussion options

You must be logged in to vote

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';
i…

Replies: 1 comment 1 reply

Comment options

You must be logged in to vote
1 reply
@balazshevesi
Comment options

Answer selected by balazshevesi
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
Q&A
Labels
None yet
2 participants