模板版本：v0.2.2
[!TIP] Github 地址
请到三方库的 Releases 发布地址查看配套的版本信息：@react-native-oh-tpl/react-native-gifted-charts Releases 。对于未发布到npm的旧版本，请参考安装指南安装tgz包。
进入到工程目录并输入以下命令：
npm install @react-native-oh-tpl/react-native-gifted-chartsyarn add @react-native-oh-tpl/react-native-gifted-charts下面的代码展示了这个库的基本使用场景：
[!WARNING] 使用时 import 的库名不变。
import {
BarChart,
LineChart,
PieChart,
PopulationPyramid,
} from "react-native-gifted-charts";
export default function () {
const data = [{ value: 50 }, { value: 80 }, { value: 90 }, { value: 70 }];
return (
<>
<BarChart data={data} />
<LineChart data={data} />
<PieChart data={data} />
<PopulationPyramid
data={[
{ left: 10, right: 12 },
{ left: 9, right: 8 },
]}
/>
<BarChart data={data} horizontal />
<LineChart data={data} areaChart />
<PieChart data={data} donut />
</>
);
}本库鸿蒙侧实现依赖@react-native-oh-tpl/react-native-svg、@react-native-oh-tpl/react-native-linear-gradient 的原生端代码，如已在鸿蒙工程中引入过这两个库，则无需再次引入，可跳过本章节步骤，直接使用。
如未引入请参照@react-native-oh-tpl/react-native-svg 文档、@react-native-oh-tpl/react-native-linear-gradient 文档进行引入
要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。
请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：@react-native-oh-tpl/react-native-gifted-charts Releases
详情见 react-native-gifted-charts Props tables
[!TIP] "Platform"列表示该属性在原三方库上支持的平台。
[!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
Basic props
| Name | Description | Type | Required | Platform | HarmonyOS Support |
|---|---|---|---|---|---|
| data | An item object represents a bar in the bar chart. It is described in the next table. | barDataItem[] | no | all | yes |
| width | Width of the Bar chart | number | no | all | yes |
| height | Height of the Bar chart (excluding the bottom label) | number | no | all | yes |
| onPress | Callback function called on press of a Bar (takes item and index as parameter) | Function | no | all | yes |
| onLongPress | Callback function called on long press of a Bar (takes item and index as parameter) | Function | no | all | yes |
| onPressOut | Callback function called on press out of a Bar (takes item and index as parameter) | Function | no | all | yes |
| focusBarOnPress | used to focus a bar on press by applying styles defined in focusedBarConfig | boolean | no | all | yes |
| focusedBarConfig | styles for the focused bar including color, width, opacity, borderRadius etc | FocusedBarConfig | no | all | yes |
| focusedBarIndex | index of the initially focused bar, works only when focusBarOnPress is | number | no | all | yes |
| maxValue | Maximum value shown in the Y axis | number | no | all | yes |
| yAxisOffset | Starting (minimum) value in the Y axis (value at the origin) | number | no | all | yes |
| mostNegativeValue | The most negative value shown in the Y axis (to be used only if the data set has negative values too) | number | no | all | yes |
| noOfSections | Number of sections in the Y axis | number | no | all | yes |
| noOfSectionsBelowXAxis | Number of sections in the Y axis below X axis (in case the data set has negative values too) | number | no | all | yes |
| stepValue | Value of 1 step/section in the Y axis | number | no | all | yes |
| stepHeight | Height of 1 step/section in the Yaxis | number | no | all | yes |
| negativeStepValue | Value of 1 step/section in the Y axis for negative values (in the 4th quadrant) | number | no | all | yes |
| negativeStepHeight | Height of 1 step/section in the Y axis for negative values (in the 4th quadrant) | number | no | all | yes |
| spacing | Distance between 2 consecutive bars in the Bar chart | number | no | all | yes |
| backgroundColor | Background color of the Bar chart | ColorValue | no | all | yes |
| sectionColors | Background color of the horizontal sections of the chart | Array | no | all | yes |
| scrollref | ref object that can be used to control the horizontal ScrollView inside which the chart is rendered | any | no | all | yes |
| scrollToIndex | scroll to a particular index on chart load | number | no | all | yes |
| disableScroll | To disable horizontal scroll | boolean | no | all | yes |
| showScrollIndicator | To show horizontal scroll indicator | boolean | no | all | yes |
| indicatorColor | (iOS only) The color of the scroll indicators - ('black', 'white' or 'default') | String | no | iOS | yes |
| showLine | To show a Line chart over the Bar chart with the same data | boolean | no | all | yes |
| lineData | The data object for the line chart (use only when showLine is true). To hide any datapoint pass hideDataPoint prop as true in specific data item. | Array of items | no | all | yes |
| lineConfig | Properties of the Line chart shown over the Bar chart (lineConfigType) is described below | lineConfigType | no | all | yes |
| lineData2 | The data object for the second line chart (use only when showLine is true) | Array of items | no | all | yes |
| lineConfig2 | Properties of the second Line chart shown over the Bar chart (lineConfigType) is described below | lineConfigType | no | all | yes |
| lineBehindBars | When set to true, the line chart will appear behind the Bars in case of overlap | boolean | no | all | yes |
| autoShiftLabels | When set to true, automatically shifts the X axis labels for negative values | boolean | no | all | yes |
| scrollToEnd | When set to true, the chart automatically scrolls to the rightmost bar | boolean | no | all | yes |
| scrollAnimation | When set to true, scroll animation is visible when the chart automatically scrolls to the rightmost bar | boolean | no | all | yes |
| scrollEventThrottle | (only for iOS) see https://reactnative.dev/docs/scrollview#scrolleventthrottle-ios | number | no | iOS | yes |
| onScroll | callback function called when the chart is scrolled horizontally | Function | no | all | yes |
| onMomentumScrollEnd | callback function called when scroll is completed | Function | no | all | yes |
| initialSpacing | distance of the first bar from the Y axis | number | no | all | yes |
| renderTooltip | tooltip component appearing above the bar when it is pressed, takes item and index as parameters | Function | no | all | yes |
| leftShiftForTooltip | The distance by which the tooltip component should shift towards left | number | no | all | yes |
| leftShiftForLastIndexTooltip | The distance by which the tooltip component of the last bar should shift towards left | number | no | all | yes |
| adjustToWidth | When set to true, it auto-computes the barWidth and spacing to fit the chart in the available width / parentWidth | boolean | no | all | yes |
| parentWidth | The width of the parent View or the width that the chart should auto-fit into when adjustToWidth is true |
number | no | all | yes |
| showValuesAsTopLabel | When set to true, shows the value as a label at the top of the bar | boolean | no | all | yes |
Combine Line Chart using showLine
| Name | Description | Type | Required | Platform | HarmonyOS Support |
|---|---|---|---|---|---|
| initialSpacing | distance of the first data point from the Y axis | number | no | all | yes |
| curved | To show curved line joining the data points | boolean | no | all | yes |
| isAnimated | To show animates Line Chart | boolean | no | all | yes |
| delay | Delay (in milliseconds) before starting the animation of the line | number | no | all | yes |
| thickness | Thickness of the Line | number | no | all | yes |
| color | Color of the Line | ColorValue | no | all | yes |
| hideDataPoints | To hide data points along the Line chart | boolean | no | all | yes |
| dataPointsShape | Shape of the data points ('rectangular' or 'circular') | String | no | all | yes |
| dataPointsWidth | Width of data points (when data points' shape is rectangular) | number | no | all | yes |
| dataPointsHeight | Height of data points (when data points' shape is rectangular) | number | no | all | yes |
| dataPointsColor | Color of the data points | ColorValue | no | all | yes |
| dataPointsRadius | Radius of data points (when data points' shape is circular) | number | no | all | yes |
| textColor | Color of the dataPointText | ColorValue | no | all | yes |
| textFontSize | Font size of the dataPointText | number | no | all | yes |
| textShiftX | To shift the dataPointText text horizontally | number | no | all | yes |
| textShiftY | To shift the dataPointText text vertically | number | no | all | yes |
| shiftY | To shift the Line chart up or down by the given quantity m | number | no | all | yes |
| startIndex | Start index for data line (used to display data lines having breaks) | number | no | all | yes |
| endIndex | End index for data line (used to display data lines having breaks) | number | no | all | yes |
Item description (barDataItem)
| Name | Description | Type | Required | Platform | HarmonyOS Support |
|---|---|---|---|---|---|
| value | Value of the item representing height of the bar | number | no | all | yes |
| barWidth | Width of the bar | number | no | all | yes |
| onPress | Function called on pressing the bar | function | no | all | yes |
| onLongPress | Function called on long pressing the bar | function | no | all | yes |
| onPressOut | Callback function called on press out of a bar | Function | no | all | yes |
| disablePress | Prop to disable the press action, defaults to false | boolean | no | all | yes |
| frontColor | Color of the bar | ColorValue | no | all | yes |
| sideColor | Color of the side view of the bar, only for 3 D | ColorValue | no | all | yes |
| sideWidth | Width of the side view of the bar, only for 3 D | number | no | all | yes |
| topColor | Color of the top view of the bar, only for 3 D | ColorValue | no | all | yes |
| barStyle | style object for the Bars | object | no | all | yes |
| showGradient | Prop to enable linear gradient for the bar color, defaults to false | boolean | no | all | yes |
| gradientColor | Along with frontColor, this prop constitutes the 2 colors for gradient | ColorValue | no | all | yes |
| label | Label text appearing below the bar (under the X axis) | string | no | all | yes |
| labelWidth | Width of the Label text appearing below the bar (under the X axis) | number | no | all | yes |
| labelTextStyle | Style object for the label text appearing below the bar | object | no | all | yes |
| labelComponent | Custom label component appearing below the bar | Component | no | all | yes |
| labelsDistanceFromXaxis | Distance of the X Axis label from the X axis | number | no | all | yes |
| topLabelComponent | Custom component appearing above the bar | Component | no | all | yes |
| topLabelContainerStyle | Style object for the container of the custom component appearing above the bar | object | no | all | yes |
| cappedBars | To show caps on the top of bar | boolean | no | all | yes |
| capThickness | Thickness of the bar cap | number | no | all | yes |
| capColor | Color of the bar cap | ColorValue | no | all | yes |
| capRadius | Border radius of the bar cap | number | no | all | yes |
| barBorderRadius | Border radius of the bar | number | no | all | yes |
| barBorderTopLeftRadius | Top left border radius of the bar | number | no | all | yes |
| barBorderTopRightRadius | Top right border radius of the bar | number | no | all | yes |
| barBorderBottomLeftRadius | Bottom left border radius of the bar | number | no | all | yes |
| barBorderBottomRightRadius | Bottom right border radius of the bar | number | no | all | yes |
| barMarginBottom | margin at the bottom of the bar (above X axis) | number | no | all | yes |
| spacing | Distance of the next Bar from the currennt Bar | number | no | all | yes |
| barBackgroundPattern | A svg component containing the background pattern for bars | Component | no | all | yes |
| patternId | ID of the pattern component | String | no | all | yes |
| leftShiftForTooltip | The distance by which the tooltip component should shift towards left | number | no | all | yes |
| showXAxisIndex | show small graduation at the X axis for the corresponding bar | boolean | no | all | yes |
Axes and rules related props
| Name | Description | Type | Required | Platform | HarmonyOS Support |
|---|---|---|---|---|---|
| xAxisLength | X axis length | number | no | all | yes |
| xAxisColor | X axis color | ColorValue | no | all | yes |
| xAxisThickness | X axis thickness | number | no | all | yes |
| yAxisColor | Y axis color | ColorValue | no | all | yes |
| yAxisThickness | Y axis thickness | number | no | all | yes |
| yAxisExtraHeight | Extra length of Y axis at the top | number | no | all | yes |
| xAxisType | solid or dotted/dashed | RuleType | no | all | yes |
| yAxisLabelWidth | Width of the Y axis Label container | number | no | all | yes |
| yAxisTextStyle | Style object for the Y axis text style | object | no | all | yes |
| yAxisTextNumberOfLines | Number of lines for y axis label text | number | no | all | yes |
| yAxisLabelContainerStyle | Style object for the Y axis label container | object | no | all | yes |
| trimYAxisAtTop | Removes the extra length of the Y axis from the top | boolean | no | all | yes |
| horizontalRulesStyle | Style object for the horizontal rules container | object | no | all | yes |
| showFractionalValues | Allow fractional values for the Y axis label | boolean | no | all | yes |
| roundToDigits | Rounds the y axis values to given number of digits after decimal point | number | no | all | yes |
| yAxisLabelPrefix | The String prepended to the y axis label text (for example- '$') | String | no | all | yes |
| yAxisLabelSuffix | The String appended to the y axis label text | String | no | all | yes |
| hideYAxisText | To hide Y axis label text | boolean | no | all | yes |
| formatYLabel | a callback function that takes the label generated by the library and modifies it. | (label: string) => string | no | all | yes |
| yAxisSide | Tells which side of the chart, should the y axis be present, defaults to 'left' | String | no | all | yes |
| rulesLength | Length of the horizontal rules | number | no | all | yes |
| rulesColor | Color of the horizontal rules | ColorValue | no | all | yes |
| rulesThickness | Thickness of the horizontal rules | number | no | all | yes |
| hideRules | To hide the horizontal rules | boolean | no | all | yes |
| rulesType | solid or dotted/dashed | RuleType | no | all | yes |
| dashWidth | width of each dash | number | no | all | yes |
| dashGap | gap between 2 dashes | number | no | all | yes |
| rulesConfigArray | Array of rulesConfig objects, used to customise the properties (like color, type etc) of specific rules | Array | no | no | no |
| referenceLine1Config | properties of reference line like thickness, color etc (described below the table) | referenceConfigType | no | all | yes |
| referenceLine1Position | position of reference line | number | no | all | yes |
| showReferenceLine2 | show second reference line | boolean | no | all | yes |
| referenceLine2Config | properties of reference line like thickness, color etc (described below the table) | referenceConfigType | no | all | yes |
| referenceLine2Position | position of second reference line | number | no | all | yes |
| showReferenceLine3 | show third reference line | boolean | no | all | yes |
| referenceLine3Config | properties of reference line like thickness, color etc (described below the table) | referenceConfigType | no | all | yes |
| referenceLine3Position | position of third reference line | number | no | all | yes |
| referenceLinesOverChartContent | used to render the reference lines over the rest of the chart content. | boolean | no | all | yes |
| showVerticalLines | To show vertical lines | boolean | no | all | yes |
| verticalLinesColor | Color of the vertical lines | ColorValue | no | all | yes |
| verticallinesThickness | Thickness of the vertical lines | number | no | all | yes |
| verticalLinesHeight | Height of the vertical lines | number | no | all | yes |
| verticalLinesStrokeDashArray | Array of 2 numbers denoting the dashWidth and dashGap of the lines. Used to render dashed/dotted vertical line | Array | no | all | yes |
| verticalLinesShift | vertical lines are aligned with bars. Shift them left or right using +ve or -ve value of verticalLinesShift | number | no | all | yes |
| verticalLinesZIndex | Z index of the vertical lines | number | no | all | yes |
| noOfVerticalLines | Number of vertical lines displayed | number | no | all | yes |
| verticalLinesSpacing | Distance between consecutive vertical lines | number | no | all | yes |
| showXAxisIndices | To show the pointers on the X axis | boolean | no | all | yes |
| xAxisIndicesHeight | Height of the pointers on the X axis | number | no | all | yes |
| xAxisIndicesWidth | Width of the pointers on the X axis | number | no | all | yes |
| xAxisIndicesColor | Color of the pointers on the X axis | ColorValue | no | all | yes |
| showYAxisIndices | To show the pointers on the Y axis | boolean | no | all | yes |
| yAxisIndicesHeight | Height of the pointers on the Y axis | number | no | all | yes |
| yAxisIndicesWidth | Width of the pointers on the Y axis | number | no | all | yes |
| yAxisIndicesColor | Color of the pointers on the X axis | ColorValue | no | all | yes |
| yAxisLabelTexts | Array of label texts to be displayed along y axis | Array | no | all | yes |
| xAxisLabelTexts | Array of label texts to be displayed below x axis | Array | no | all | yes |
| xAxisLabelTextStyle | Style of label texts to be displayed below x axis | object | no | all | yes |
| rotateLabel | To rotate the X axis labels (by 60deg) | boolean | no | all | yes |
| hideAxesAndRules | To hide axes, rules, labels altogether | boolean | no | all | yes |
| hideOrigin | To hide the y Axis label at origin (i.e. 0) | boolean | no | all | yes |
| labelWidth | Width of the Label text appearing below the bar (under the X axis) | number | no | all | yes |
| labelsDistanceFromXaxis | Distance of the X Axis label from the X axis | number | no | all | yes |
| xAxisTextNumberOfLines | Number of lines for x axis label text | number | no | all | yes |
| xAxisLabelsHeight | Height of X axis labels container | number | no | all | yes |
| xAxisLabelsVerticalShift | prop to adjust the vertical position of X axis labels (move X axis labels up or down) | number | no | all | yes |
| labelsExtraHeight | used to display large rotated labels on X-axis (use this only when using the rotateLabel prop) | number | no | all | yes |
| secondaryYAxis | displays and controls the properties of the secondary Y axis on the right side | secondaryYAxisType | no | all | yes |
| secondaryData | the secondary data that will be rendered along the secondary Y axis | Array of items | no | all | yes |
Bar related props
| Name | Description | Type | Required | Platform | HarmonyOS Support |
|---|---|---|---|---|---|
| barWidth | Width of the bar | number | no | all | yes |
| barStyle | style object for the Bars | object | no | all | yes |
| isThreeD | Prop to render 3 dimensional bars | boolean | no | all | yes |
| frontColor | Color of the bar | ColorValue | no | all | yes |
| sideColor | Color of the side view of the bar, only for 3 D | ColorValue | no | all | yes |
| topColor | Color of the top view of the bar, only for 3 D | ColorValue | no | all | yes |
| sideWidth | Width of the side view of the bar, only for 3 D | number | no | all | yes |
| showGradient | Prop to enable linear gradient for the bar color | boolean | no | all | yes |
| gradientColor | Along with frontColor, gradientColor constitutes the 2 colors for gradient | ColorValue | no | all | yes |
| roundedTop | To show rounded top | boolean | no | all | yes |
| roundedBottom | To show rounded bottom | boolean | no | all | yes |
| activeOpacity | activeOpacity on pressing the bar | number | no | all | yes |
| disablePress | Prop to disable the bar press action | boolean | no | all | yes |
| barBorderWidth | Border width of the bar | number | no | all | yes |
| barBorderColor | Border color of the bar | ColorValue | no | all | yes |
| barBorderRadius | Border radius of the bar | number | no | all | yes |
| barBorderTopLeftRadius | Top left border radius of the bar | number | no | all | yes |
| barBorderTopRightRadius | Top right border radius of the bar | number | no | all | yes |
| barBorderBottomLeftRadius | Bottom left border radius of the bar | number | no | all | yes |
| barBorderBottomRightRadius | Bottom right border radius of the bar | number | no | all | yes |
| barMarginBottom | margin at the bottom of the bar (above X axis) | number | no | all | yes |
| barBackgroundPattern | A svg component containing the background pattern for bars | Component | no | all | yes |
| patternId | ID of the pattern component | String | no | all | yes |
| minHeight | Minimum height of the Bars | number | no | all | yes |
Animation related props
| Name | Description | Type | Required | Platform | HarmonyOS Support |
|---|---|---|---|---|---|
| isAnimated | To show animates BarChart. Animation occurs onLoad and on value change | boolean | no | all | yes |
| animationDuration | Duration of the animations | number | no | all | yes |
| animationEasing | Easing applied to the animation | Easing | no | all | yes |
Pagination related props
| Name | Description | Type | Required | Platform | HarmonyOS Support |
|---|---|---|---|---|---|
| onEndReached | Callback function called when the chart is scrolled upto end | Function | no | all | yes |
| onStartReached | Callback function called when the chart is scrolled upto start | Function | no | all | yes |
Bar related props for making Capped Bar chart
| Name | Description | Type | Required | Platform | HarmonyOS Support |
|---|---|---|---|---|---|
| cappedBars | To show caps on the top of bars | boolean | no | all | yes |
| capThickness | Thickness of the bar caps | number | no | all | yes |
| capColor | Color of the bar caps | ColorValue | no | all | yes |
| capRadius | Border radius of the bar caps | number | no | all | yes |
pointerConfig
| Name | Description | Type | Required | Platform | HarmonyOS Support |
|---|---|---|---|---|---|
| height | Height of the pointer | number | no | all | yes |
| width | width of the pointer | number | no | all | yes |
| radius | radius of the pointer | number | no | all | yes |
| pointerColor | pointer color | ColorValue | no | all | yes |
| pointerColorsForDataSet | When using pointers with dataSet, you can set pointer colors on each data line using the pointerColorsForDataSet which is an array of color values. | ColorValue[] | no | all | yes |
| secondaryPointerColor | Secondary pointer color | ColorValue | no | all | yes |
| pointerComponent | is a function that returns the component to be rendered as a pointer | Function | no | all | yes |
| showPointerStrip | show pointer bar | boolean | no | all | yes |
| pointerStripWidth | width of the pointer bar | number | no | all | yes |
| pointerStripHeight | height of the pointer bar | number | no | all | yes |
| pointerStripColor | color of the pointer bar | ColorValue | no | all | yes |
| pointerStripUptoDataPoint | Pointer stripped to data point | boolean | no | all | yes |
| pointerLabelComponent | is a function that returns the component to be rendered as a Label. It takes 2 parameters - 1. an array of items 2 | Function | no | all | yes |
| stripOverPointer | strip to over pointer | boolean | no | all | yes |
| autoAdjustPointerLabelPosition | Adjust the position of the pointer | boolean | no | all | yes |
| shiftPointerLabelX | x-axis displacement pointer label | number | no | all | yes |
| shiftPointerLabelY | y-axis displacement pointer label | number | no | all | yes |
| pointerLabelWidth | pointer label width | number | no | all | yes |
| pointerLabelHeight | pointer label height | number | no | all | yes |
| pointerVanishDelay | Pointer disappearance delay | number | no | all | yes |
| activatePointersOnLongPress | Long press to activate pointer | boolean | no | all | yes |
| activatePointersDelay | activation pointer delay | number | no | all | no |
| persistPointer | persistent pointer | boolean | no | all | yes |
| strokeDashArray | Array of 2 numbers denoting the dashWidth and dashGap of the lines. Used to render dashed/dotted pointer | number[] | no | all | yes |
| barTouchable | touchable bar | boolean | no | all | yes |
| pointerEvents | pointer event in Bars | PointerEvents | no | no | no |
| stripBehindBars | hide the strip in Bars | boolean | no | all | yes |
Props for horizontal BarChart
| Name | Description | Type | Required | Platform | HarmonyOS Support |
|---|---|---|---|---|---|
| horizontal | Render horizontal | boolean | no | all | yes |
| rtl | Render the chart from right to left | boolean | no | all | yes |
| shiftX | Shift the chart towards left or right by given value (only in horizontal charts) | number | no | all | yes |
| shiftY | Shift the chart upwards or downwards by given value (only in horizontal charts) | number | no | all | yes |
| rotateYAxisTexts | angle by which the Y axis label texts should rotate in horizontal charts | number | no | all | yes |
| yAxisAtTop | In horizontal BarCharts the Y axis appears at bottom by default. Set it to true for otherwise | boolean | no | all | yes |
| intactTopLabel | To rotate the top label component to make it intact with the Bars | boolean | no | all | yes |
Props for Stacked Bar Charts
| Name | Description | Type | Required | Platform | HarmonyOS Support |
|---|---|---|---|---|---|
| stackData | A stack array represents a stack of bars in the bar chart. It is described in the next table | Array of stack arrays | no | all | yes |
| barBorderRadius | Border radius of each bar of the stack | number | no | all | yes |
| barBorderTopLeftRadius | Top left border radius of each bar of the stack | number | no | all | yes |
| barBorderTopRightRadius | Top right border radius of each bar of the stack | number | no | all | yes |
| barBorderBottomLeftRadius | Bottom left border radius of each bar of the stack | number | no | all | yes |
| barBorderBottomRightRadius | Bottom right border radius of each bar of the stack | number | no | all | yes |
| stackBorderRadius | Border radius of the top and bottom bars of the stack | number | no | all | yes |
| stackBorderTopLeftRadius | Top left border radius of the top bar of the stack | number | no | all | yes |
| stackBorderTopRightRadius | Top right border radius of the top bar of the stack | number | no | all | yes |
| stackBorderBottomLeftRadius | Bottom left border radius of the bottom bar of the stack | number | no | all | yes |
| stackBorderBottomRightRadius | Bottom right border radius of the bottom bar of the stack | number | no | all | yes |
| autoShiftLabelsForNegativeStacks | Whether the x axis labels should auto shift to a position below the bar, if the bar is under x-axis due to negative value | boolean | no | all | yes |
Stack Array description
| Name | Description | Type | Required | Platform | HarmonyOS Support |
|---|---|---|---|---|---|
| stacks array | A stack is made of 1 or more objects of the type described in the next table | Array of stack items | no | all | yes |
| label | Label text appearing below the stack (under the X axis) | string | no | all | yes |
| labelTextStyle | Style object for the label text appearing below the stack | object | no | all | yes |
| barWidth | Width of the stack bar | number | no | all | yes |
| spacing | Distance between 2 consecutive bars in the stack Bar chart | number | no | all | yes |
| borderRadius | Border radius of each bar of the stack | number | no | all | yes |
| borderTopLeftRadius | Top left border radius of the top bar of the stack | number | no | all | yes |
| borderTopRightRadius | Top right border radius of the top bar of the stack | number | no | all | yes |
| borderBottomLeftRadius | Bottom left border radius of the bottom bar of the stack | number | no | all | yes |
| borderBottomRightRadius | Bottom right border radius of the bottom bar of the stack | number | no | all | yes |
Stack item description
| Name | Description | Type | Required | Platform | HarmonyOS Support |
|---|---|---|---|---|---|
| value | Value of the item representing height of the stack item | number | no | all | yes |
| color | Color of the stack item | ColorValue | no | all | yes |
| onPress | Function called on pressing the stack item | function | no | all | yes |
| onLongPress | Function called on long pressing the stack item | function | no | all | yes |
| onPressOut | Callback function called on press out of a bar | Function | no | all | yes |
| marginBottom | margin below a particular stack sectio | number n | no | all | yes |
| barBorderRadius | Border radius of a stack section | number | no | all | yes |
| borderTopLeftRadius | borderTopLeftRadius for a stack section | number | no | all | yes |
| borderTopRightRadius | borderTopRightRadius for a stack section | number | no | all | yes |
| borderBottomLeftRadius | borderBottomLeftRadius for a stack section | number | no | all | yes |
| borderBottomRightRadius | borderBottomRightRadius for a stack section | number | no | all | yes |
| showGradient | Prop to enable linear gradient for the bar color, defaults to false | boolean | no | all | yes |
| gradientColor | Along with frontColor, this prop constitutes the 2 colors for gradient | ColorValue | no | all | yes |
| barWidth | Width of the bar | number | no | all | yes |
| showXAxisIndex | show small graduation at the X axis for the corresponding stack | boolean | no | all | yes |
Basic props
| Name | Description | Type | Required | Platform | HarmonyOS Support |
|---|---|---|---|---|---|
| data | An item object represents a point in the line chart. It is described in the next table. | Array | no | all | yes |
| data2 | Second set of dataPoint for the second line | Array | no | all | yes |
| data3 | Third set of dataPoint for the third line | Array | no | all | yes |
| data4 | Fourth set of dataPoint for the fourth line | Array | no | all | yes |
| data5 | Fifth set of dataPoint for the third line | Array | no | all | yes |
| dataSet | Array of data sets (used instead of using data2, data3, data4 etc) |
Array | no | all | yes |
| width | Width of the Bar chart | number | no | all | yes |
| height | Height of the Bar chart (excluding the bottom label) | number | no | all | yes |
| overflowTop | Extra space at the top of the chart to make room for dataPointText | number | no | all | yes |
| overflowBottom | Extra space at the bottom of the chart to make room for dataPoints or dataPointText | number | no | all | yes |
| maxValue | Maximum value shown in the Y axis | number | no | all | yes |
| mostNegativeValue | The most negative value shown in the Y axis (to be used only if the data set has negative values too) | number | no | all | yes |
| noOfSections | Number of sections in the Y axis | number | no | all | yes |
| noOfSectionsBelowXAxis | Number of sections in the Y axis below X axis (in case the data set has negative values too) | number | no | all | yes |
| stepValue | Value of 1 step/section in the Y axis | number | no | all | yes |
| stepHeight | Height of 1 step/section in the Y axis | number | no | all | yes |
| spacing | Distance between 2 consecutive bars in the Bar chart | number | no | all | yes |
| adjustToWidth | When set to true, it auto computes the spacing value to fit the Line chart in the available width | boolean | no | all | yes |
| backgroundColor | Background color of the Bar chart | ColorValue | no | all | yes |
| sectionColors | Background color of the horizontal sections of the chart | Array | no | all | yes |
| scrollref | ref object that can be used to control the horizontal ScrollView inside which the chart is rendered | any | no | all | yes |
| scrollToIndex | scroll to a particular index on chart load | number | no | all | yes |
| disableScroll | To disable horizontal scroll | boolean | no | all | yes |
| showScrollIndicator | To show horizontal scroll indicator | boolean | no | all | yes |
| indicatorColor | (iOS only) The color of the scroll indicators - ('black', 'white' or 'default') | String | no | all | yes |
| isAnimated | To show animated Line or Area Chart. Animation occurs when the chart load for the first time | boolean | no | all | yes |
| onPress | The callback function that handles the press event. item and index are received as props |
Function | no | all | yes |
| scrollToEnd | When set to true, the chart automatically scrolls to the rightmost data point | boolean | no | all | yes |
| scrollAnimation | When set to true, scroll animation is visible when the chart automatically scrolls to the rightmost data point | boolean | no | all | yes |
| scrollEventThrottle | (only for iOS) see https://reactnative.dev/docs/scrollview#scrolleventthrottle-ios | number | no | iOS | yes |
| onScroll | callback function called when the chart is scrolled horizontally | Function | no | all | yes |
| onMomentumScrollEnd | callback function called when scroll is completed | Function | no | all | yes |
| initialSpacing | distance of the first data point from the Y axis | number | no | all | yes |
| endSpacing | distance/padding left at the end of the line chart | number | no | all | yes |
Item description (lineDataItem)
| Name | Description | Type | Required | Platform | HarmonyOS Support |
|---|---|---|---|---|---|
| value | Value of the item representing representing its position | number | no | all | yes |
| onPress | Function called on pressing the data point | function | no | all | no |
| label | Label text appearing under the X axis | string | no | all | yes |
| labelTextStyle | Style object for the label text appearing under the X axis | object | no | all | yes |
| labelComponent | custom label component appearing under the X axis | Function | no | all | yes |
| yAxisLabelText | Y axis label text | string | no | all | yes |
| dataPointText | Text appearing near the data points | string | no | all | yes |
| textShiftX | To shift the dataPointText text horizontally | number | no | all | yes |
| textShiftY | To shift the dataPointText text vertically | number | no | all | yes |
| textColor | Color of the dataPointText | ColorValue | no | all | yes |
| textFontSize | Font size of the dataPointText | number | no | all | yes |
| dataPointHeight | Height of the data point (when data point's shape is rectangular) | number | no | all | yes |
| dataPointWidth | Width of the data point (when data point's shape is rectangular) | number | no | all | yes |
| dataPointRadius | Radius of the data point (when data points' shape is circular) | number | no | all | yes |
| dataPointColor | Color of the data point | ColorValue | no | all | yes |
| dataPointShape | Shape of the data point (rectangular or circular) defaults to circular | string | no | all | yes |
| hideDataPoint | To hide the data point | boolean | no | all | yes |
| showVerticalLine | When set to true, a vertical line will be displayed along that data point | boolean | no | all | yes |
| verticalLineUptoDataPoint | When set to true, it sets the height of the vertical line upto the corresponding data point | boolean | no | all | yes |
| verticalLineColor | Color of the vertical Line displayed along the data point | ColorValue | no | all | yes |
| verticalLineThickness | Thickness of the vertical Line displayed along the data point | number | no | all | yes |
| dataPointLabelWidth | width of the label shown beside a data point | number | no | all | no |
| dataPointLabelShiftX | horizontal shift of a label from its corresponding data point | number | no | all | no |
| dataPointLabelShiftY | vertical shift of a label from its corresponding data point | number | no | all | no |
| dataPointLabelComponent | custom component rendered above a data point | Function | no | all | no |
| focusedDataPointLabelComponent | custom component rendered above a data point only when focused/selected (when the user presses) | Function | no | all | no |
| showStrip | To show a vertical strip along the data point (even if it's not focused/selected) | boolean | no | all | yes |
| stripHeight | Height of the vertical strip that becomes visible on pressing the corresponding area of the chart, or when showStrip is set to true | number | no | all | yes |
| stripWidth | Width of the vertical strip that becomes visible on pressing the corresponding area of the chart, or when showStrip is set to true | number | no | all | yes |
| stripColor | Color of the vertical strip that becomes visible on pressing the corresponding area of the chart, or when showStrip is set to true | ColorValue | no | all | yes |
| stripOpacity | Opacity of the vertical strip that becomes visible on pressing the corresponding area of the chart, or when showStrip is set to true | number | no | all | yes |
| pointerShiftX | Shifts the pointer for that item horizontally by given quantity (used only when pointerConfig prop is passed) | number | no | all | yes |
| pointerShiftY | Shifts the pointer for that item vertically by given quantity (used only when pointerConfig prop is passed) | number | no | all | yes |
Pagination related props
| Name | Description | Type | Required | Platform | HarmonyOS Support |
|---|---|---|---|---|---|
| onEndReached | Callback function called when the chart is scrolled upto end | Function | no | all | yes |
| onStartReached | Callback function called when the chart is scrolled upto start | Function | no | all | yes |
Axes and rules related props
| Name | Description | Type | Required | Platform | HarmonyOS Support |
|---|---|---|---|---|---|
| xAxisLength | X axis length | number | no | all | yes |
| xAxisColor | X axis color | ColorValue | no | all | yes |
| xAxisThickness | X axis thickness | number | no | all | yes |
| xAxisType | solid or dotted/dashed | RuleType | no | all | yes |
| yAxisColor | Y axis color | ColorValue | no | all | yes |
| yAxisThickness | Y axis thickness | number | no | all | yes |
| yAxisLabelWidth | Width of the Y axis Label container | number | no | all | ye |
| yAxisTextStyle | Style object for the Y axis text style | object | no | all | yes |
| yAxisTextNumberOfLines | Number of lines for y axis label text | number | no | all | yes |
| yAxisLabelContainerStyle | Style object for the Y axis label container | object | no | all | yes |
| trimYAxisAtTop | Removes the extra length of the Y axis from the top | boolean | no | all | yes |
| yAxisExtraHeight | Extra length of Y axis at the top | number | no | all | yes |
| yAxisOffset | Starting value on Y Axis | number | no | all | yes |
| horizontalRulesStyle | Style object for the horizontal rules container | object | no | all | yes |
| showFractionalValues | Allow fractional values for the Y axis label | boolean | no | all | yes |
| roundToDigits | Rounds the y axis values to given number of digits after decimal point | number | no | all | yes |
| yAxisLabelPrefix | The String prepended to the y axis label text (for example- '$') | String | no | all | yes |
| yAxisLabelSuffix | The String appended to the y axis label text | String | no | all | yes |
| hideYAxisText | To hide Y axis label text | boolean | no | all | yes |
| formatYLabel | a callback function that takes the label generated by the library and modifies it. | (label: string) => string | no | all | yes |
| yAxisSide | Tells which side of the chart, should the y axis be present, defaults to 'left' | String | no | all | yes |
| rulesLength | Length of the horizontal | number | no | all | yes |
| rulesColor | Color of the horizontal rules | ColorValue | no | all | yes |
| rulesThickness | Thickness of the horizontal | number | no | all | yes |
| hideRules | To hide the horizontal | boolean | no | all | yes |
| rulesType | solid or dotted/dashed | RuleType | no | all | yes |
| dashWidth | width of each dash | number | no | all | yes |
| dashGap | gap between 2 | number | no | all | yes |
| rulesConfigArray | Array of rulesConfig objects, used to customise the properties (like color, type etc) of specific rules | Array | no | all | yes |
| showReferenceLine1 | show reference line | boolean | no | all | yes |
| referenceLine1Config | properties of reference line like thickness, color etc (described below the table) | referenceConfigType | no | all | yes |
| referenceLine1Position | position of reference | number | no | all | yes |
| showReferenceLine2 | show second reference | boolean | no | all | yes |
| referenceLine2Config | properties of reference line like thickness, color etc (described below the table) | referenceConfigType | no | all | yes |
| referenceLine2Position | position of second reference | number | no | all | yes |
| showReferenceLine3 | show third reference | boolean | no | all | yes |
| referenceLine3Config | properties of reference line like thickness, color etc (described below the table) | referenceConfigType | no | all | yes |
| referenceLine3Position | position of third reference line | number | no | all | yes |
| showVerticalLines | To show vertical lines | boolean | no | all | yes |
| verticalLinesUptoDataPoint | To set the height of the vertical lines upto the corresponding data point | boolean | no | all | yes |
| verticallinesThickness | Thickness of the vertical lines | number | no | all | yes |
| verticalLinesHeight | Height of the vertical lines | number | no | all | yes |
| verticalLinesStrokeDashArray | Array of 2 numbers denoting the dashWidth and dashGap of the lines. Used to render dashed/dotted vertical line | Array | no | all | yes |
| verticalLinesShift | vertical lines are aligned with data point. Shift them left or right using +ve or -ve value of verticalLinesShift | number | no | all | yes |
| verticalLinesZIndex | Z index of the vertical lines | number | no | all | yes |
| noOfVerticalLines | Number of vertical lines displayed | number | no | all | yes |
| verticalLinesSpacing | Distance between consecutive vertical lines | number | no | all | yes |
| showXAxisIndices | To show the pointers on the X axis | boolean | no | all | yes |
| xAxisIndicesHeight | Height of the pointers on the X axis | number | no | all | yes |
| xAxisIndicesWidth | Width of the pointers on the X axis | number | no | all | yes |
| xAxisIndicesColor | Color of the pointers on the X axis | ColorValue | no | all | yes |
| showYAxisIndices | To show the pointers on the Y axis | boolean | no | all | yes |
| yAxisIndicesHeight | Height of the pointers on the Y axis | number | no | all | yes |
| yAxisIndicesWidth | Width of the pointers on the Y axis | number | no | all | yes |
| yAxisIndicesColor | Color of the pointers on the X axis | ColorValue | no | all | yes |
| hideAxesAndRules | To hide axes, rules, labels altogether | boolean | no | all | yes |
| yAxisLabelTexts | Array of label texts to be displayed along y axis | Array | no | all | yes |
| xAxisLabelTexts | Array of label texts to be displayed below x axis | Array | no | all | yes |
| xAxisLabelTextStyle | Style of label texts to be displayed below x axis | object | no | all | yes |
| xAxisTextNumberOfLines | Number of lines for x axis label text | number | no | all | yes |
| xAxisLabelsHeight | Height of X axis labels container | number | no | all | yes |
| xAxisLabelsVerticalShift | prop to adjust the vertical position of X axis labels (move X axis labels up or down) | number | no | all | yes |
| rotateLabel | To rotate the X axis labels (by 60deg) | boolean | no | all | yes |
| hideOrigin | To hide the y Axis label at origin (i.e. 0) | boolean | no | all | yes |
| secondaryYAxis | displays and controls the properties of the secondary Y axis on the right side | secondaryYAxisType | no | all | yes |
| secondaryData | the secondary data that will be rendered along the secondary Y axis | Array of items | no | all | yes |
| secondaryLineConfig | properties of the secondary data line (secondaryLineConfigType is described below) | secondaryLineConfigType | no | all | yes |
Line related props
| Name | Description | Type | Required | Platform | HarmonyOS Support |
|---|---|---|---|---|---|
| curved | To show curved line joining the data points | boolean | no | all | yes |
| color | Color of the lines joining the data points | ColorValue | no | all | yes |
| color1 | Color of the lines joining the first set of data points | ColorValue | no | all | yes |
| color2 | Color of the lines joining the second set of data points | ColorValue | no | all | yes |
| color3 | Color of the lines joining the third set of data points | ColorValue | no | all | yes |
| color4 | Color of the lines joining the fourth set of data points | ColorValue | no | all | yes |
| color5 | Color of the lines joining the fifth set of data points | ColorValue | no | all | yes |
| thickness | Thickness of the lines joining the data points | number | no | all | yes |
| thickness1 | Thickness of the lines joining the first set of data points | number | no | all | yes |
| thickness2 | Thickness of the lines joining the second set of data points | number | no | all | yes |
| thickness3 | Thickness of the lines joining the third set of data points | number | no | all | yes |
| thickness4 | Thickness of the lines joining the fourth set of data points | number | no | all | yes |
| thickness5 | Thickness of the lines joining the fifth set of data points | number | no | all | yes |
| zIndex1 | zIndex of the lines joining the first set of data points | number | no | all | yes |
| zIndex2 | zIndex of the lines joining the second set of data points | number | no | all | yes |
| zIndex3 | zIndex of the lines joining the third set of data points | number | no | all | yes |
| zIndex4 | zIndex of the lines joining the fourth set of data points | number | no | all | yes |
| zIndex5 | zIndex of the lines joining the fifth set of data points | number | no | all | yes |
| strokeDashArray | Array of 2 numbers denoting the dashWidth and dashGap of the lines. Used to render dashed/dotted line chart | Array | no | all | yes |
| strokeDashArray1 | Array of 2 numbers denoting the dashWidth and dashGap of line1. Used to render dashed/dotted line chart | Array | no | all | yes |
| strokeDashArray2 | Array of 2 numbers denoting the dashWidth and dashGap of line2. Used to render dashed/dotted line chart | Array | no | all | yes |
| strokeDashArray3 | Array of 2 numbers denoting the dashWidth and dashGap of line3. Used to render dashed/dotted line chart | Array | no | all | yes |
| strokeDashArray4 | Array of 2 numbers denoting the dashWidth and dashGap of line4. Used to render dashed/dotted line chart | Array | no | all | yes |
| strokeDashArray5 | Array of 2 numbers denoting the dashWidth and dashGap of line5. Used to render dashed/dotted line chart | Array | no | all | yes |
| lineSegments | Array of objects used to customize segments (parts) of line | Array | no | all | yes |
| lineSegments2 | Array of objects used to customize segments (parts) of line2 | Array | no | all | yes |
| lineSegments3 | Array of objects used to customize segments (parts) of line3 | Array | no | all | yes |
| lineSegments4 | Array of objects used to customize segments (parts) of line4 | Array | no | all | yes |
| lineSegments5 | Array of objects used to customize segments (parts) of line5 | Array | no | all | yes |
| highlightedRange | renders the parts of lines lying in a given data range with a different style (color, thickness,type) | HighlightedRange | no | all | yes |
| startIndex | Start index for data line (used to display data lines having breaks) | number | no | all | yes |
| startIndex1 | Start index for data line 1 (used to display data lines having breaks) | number | no | all | yes |
| startIndex2 | Start index for data line 2 (used to display data lines having breaks) | number | no | all | yes |
| startIndex3 | Start index for data line 3 (used to display data lines having breaks) | number | no | all | yes |
| startIndex4 | Start index for data line 4 (used to display data lines having breaks) | number | no | all | yes |
| startIndex5 | Start index for data line 5 (used to display data lines having breaks) | number | no | all | yes |
| endIndex | End index for data line (used to display data lines having breaks) | number | no | all | yes |
| endIndex1 | End index for data line 1 (used to display data lines having breaks) | number | no | all | yes |
| endIndex2 | End index for data line 2 (used to display data lines having breaks) | number | no | all | yes |
| endIndex3 | End index for data line 3 (used to display data lines having breaks) | number | no | all | yes |
| endIndex4 | End index for data line 4 (used to display data lines having breaks) | number | no | all | yes |
| endIndex5 | End index for data line 5 (used to display data lines having breaks) | number | no | all | yes |
| lineGradient | this prop is used to render the line with a gradient blend of colors | boolean | no | all | yes |
| lineGradientComponent | this prop defines the svg gradient that should be applied to the line (requires lineGradient to be truthy) | Function | no | all | yes |
| lineGradientId | id of the (needed along with lineGradientComponent prop) | string | no | all | yes |
| lineGradientDirection | 'vertical'/'horizontal' | string | no | all | yes |
| lineGradientStartColor | Start gradient color for the line (requires lineGradient to be truthy) | string | no | all | yes |
| lineGradientEndColor | End gradient color for the line (requires lineGradient to be truthy) | string | no | all | yes |
The arrow
| Name | Description | Type | Required | Platform | HarmonyOS Support |
|---|---|---|---|---|---|
| showArrows | To show an arrow at the end of each data line | boolean | no | all | yes |
| arrowConfig | Object describing the properties of the arrows like length, width, strokeWidth, strokeColor, fillColor | arrowType | no | all | yes |
| showArrow1 | To show an arrow at the end of the first data line | boolean | no | all | yes |
| arrowConfig1 | Object describing the properties of the first arrow | arrowType | no | all | yes |
| showArrow2 | To show an arrow at the end of the second data line | boolean | no | all | yes |
| arrowConfig2 | Object describing the properties of the second arrow | arrowType | no | all | yes |
| showArrow3 | To show an arrow at the end of the third data line | boolean | no | all | yes |
| arrowConfig3 | Object describing the properties of the third arrow | arrowType | no | all | yes |
| showArrow4 | To show an arrow at the end of the fourth data line | boolean | no | all | yes |
| arrowConfig4 | Object describing the properties of the fourth arrow | arrowType | no | all | yes |
| showArrow5 | To show an arrow at the end of the fifth data line | boolean | no | all | yes |
| arrowConfig5 | Object describing the properties of the fifth arrow | arrowType | no | all | yes |
Data points related props
| Name | Description | Type | Required | Platform | HarmonyOS Support |
|---|---|---|---|---|---|
| hideDataPoints | To hide data points | boolean | no | all | yes |
| dataPointsHeight | Height of data points (when data points' shape is rectangular) | number | no | all | yes |
| dataPointsWidth | Width of data points (when data points' shape is rectangular) | number | no | all | yes |
| dataPointsRadius | Radius of data points (when data points' shape is circular) | number | no | all | yes |
| dataPointsColor | Color of the data points | ColorValue | no | all | yes |
| dataPointsShape | Shape of the data points ('rectangular' or 'circular') | string | no | all | yes |
| hideDataPoints1 | To hide data points for the first set of data | boolean | no | all | yes |
| dataPointsHeight1 | Height of data points for the first dataset (when data points' shape is rectangular) | number | no | all | yes |
| dataPointsWidth1 | Width of data points for the first dataset (when data points' shape is rectangular) | number | no | all | yes |
| dataPointsRadius1 | Radius of data points for the first dataset (when data points' shape is circular) | number | no | all | yes |
| dataPointsColor1 | Color of data points for the first dataset | ColorValue | no | all | yes |
| dataPointsShape1 | Shape of data points for the first dataset | string | no | all | yes |
| hideDataPoints2 | To hide data points for the second set of data | boolean | no | all | yes |
| dataPointsHeight2 | Height of data points for the second dataset (when data points' shape is rectangular) | number | no | all | yes |
| dataPointsWidth2 | Width of data points for the second dataset (when data points' shape is rectangular) | number | no | all | yes |
| dataPointsRadius2 | Radius of data points for the second dataset (when data points' shape is circular) | number | no | all | yes |
| dataPointsColor2 | Color of data points for the second dataset | ColorValue | no | all | yes |
| dataPointsShape2 | Shape of data points for the second dataset ('rectangular' or 'circular') | string | no | all | yes |
| hideDataPoints3 | To hide data points for the third set of data | boolean | no | all | yes |
| dataPointsHeight3 | Height of data points for the third dataset (when data points' shape is rectangular) | number | no | all | yes |
| dataPointsWidth3 | Width of data points for the third dataset (when data points' shape is rectangular) | number | no | all | yes |
| dataPointsRadius3 | Radius of data points for the third dataset (when data points' shape is circular) | number | no | all | yes |
| dataPointsColor3 | Color of data points for the third dataset | ColorValue | no | all | yes |
| dataPointsShape3 | Shape of data points for the third dataset ('rectangular' or 'circular') | string | no | all | yes |
| hideDataPoints4 | To hide data points for the fourth set of data | boolean | no | all | yes |
| dataPointsHeight4 | Height of data points for the fourth dataset (when data points' shape is rectangular) | number | no | all | yes |
| dataPointsWidth4 | Width of data points for the fourth dataset (when data points' shape is rectangular) | number | no | all | yes |
| dataPointsRadius4 | Radius of data points for the fourth dataset (when data points' shape is circular) | number | no | all | yes |
| dataPointsColor4 | Color of data points for the fourth dataset | ColorValue | no | all | yes |
| dataPointsShape4 | Shape of data points for the fourth dataset ('rectangular' or 'circular') | string | no | all | yes |
| hideDataPoints5 | To hide data points for the fifth set of data | boolean | no | all | yes |
| dataPointsHeight5 | Height of data points for the fifth dataset (when data points' shape is rectangular) | number | no | all | yes |
| dataPointsWidth5 | Width of data points for the fifth dataset (when data points' shape is rectangular) | number | no | all | yes |
| dataPointsRadius5 | Radius of data points for the fifth dataset (when data points' shape is circular) | number | no | all | yes |
| dataPointsColor5 | Color of data points for the fifth dataset | ColorValue | no | all | yes |
| dataPointsShape5 | Shape of data points for the fifth dataset ('rectangular' or 'circular') | string | no | all | yes |
| focusedDataPointIndex | Index of the focused data point, works only when focusEnabled prop is used | number | no | all | yes |
| focusedDataPointShape | Shape of the data points when focused due to press event | String | no | all | yes |
| focusedDataPointWidth | Width of the data points when focused due to press event | number | no | all | yes |
| focusedDataPointHeight | Height of the data points when focused due to press event | number | no | all | yes |
| focusedDataPointColor | Color of the data points when focused due to press event | ColorValue | no | all | yes |
| focusedDataPointRadius | Radius of the data points when focused due to press event | number | no | all | yes |
| focusedCustomDataPoint | Custom data point when focused due to press event | Function | no | all | yes |
| textColor | Color of the dataPointText | ColorValue | no | all | yes |
| textFontSize | Font size of the dataPointText | number | no | all | yes |
| textShiftX | To shift the dataPointText text horizontally | number | no | all | yes |
| textShiftY | To shift the dataPointText text vertically | number | no | all | yes |
| customDataPoint | A callback function to render a custom component as the data points | Function | no | all | yes |
| dataPointLabelWidth | width of the label shown beside a data point | number | no | all | no |
| dataPointLabelShiftX | horizontal shift of a label from its corresponding data point | number | no | all | no |
| dataPointLabelShiftY | vertical shift of a label from its corresponding data point | number | no | all | no |
| showValuesAsDataPointsText | When set to true, the data item value will be shown as a label text near data point | boolean | no | all | yes |
| pointerColorsForDataSet | When using pointers with dataSet, you can set pointer colors on each data line using this array | ColorValue[] | no | all | yes |
pointerConfig
| Name | Description | Type | Required | Platform | HarmonyOS Support |
|---|---|---|---|---|---|
| height | Height of the pointer | number | no | all | yes |
| width | width of the pointer | number | no | all | yes |
| radius | radius of the pointer | number | no | all | yes |
| pointerColor | pointer color | ColorValue | no | all | yes |
| pointer1Color | pointer color | ColorValue | no | all | yes |
| pointer2Color | pointer color | ColorValue | no | all | yes |
| pointer3Color | pointer color | ColorValue | no | all | yes |
| pointer4Color | pointer color | ColorValue | no | all | yes |
| pointer5Color | pointer color | ColorValue | no | all | yes |
| pointerColorsForDataSet | When using pointers with dataSet, you can set pointer colors on each data line using the pointerColorsForDataSet which is an array of color values. | ColorValue[] | no | all | yes |
| secondaryPointerColor | Secondary pointer color | ColorValue | no | all | yes |
| pointerComponent | is a function that returns the component to be rendered as a pointer | Function | no | all | yes |
| showPointerStrip | show pointer bar | boolean | no | all | yes |
| pointerStripWidth | width of the pointer bar | number | no | all | yes |
| pointerStripHeight | height of dthe pointer bar | number | no | all | yes |
| pointerStripColor | color of the pointer bar | ColorValue | no | all | yes |
| pointerStripUptoDataPoint | Pointer stripped to data point | boolean | no | all | yes |
| pointerLabelComponent | is a function that returns the component to be rendered as a Label. It takes 2 parameters - 1. an array of items 2 | Function | no | all | yes |
| stripOverPointer | strip to over pointer | boolean | no | all | yes |
| autoAdjustPointerLabelPosition | Adjust the position of the pointer | boolean | no | all | yes |
| shiftPointerLabelX | x-axis displacement pointer label | number | no | all | yes |
| shiftPointerLabelY | y-axis displacement pointer label | number | no | all | yes |
| pointerLabelWidth | pointer label width | number | no | all | yes |
| pointerLabelHeight | pointer label height | number | no | all | yes |
| pointerVanishDelay | Pointer disappearance delay | number | no | all | yes |
| activatePointersOnLongPress | Long press to activate pointer | boolean | no | all | yes |
| activatePointersDelay | activation pointer delay | number | no | all | no |
| persistPointer | persistent pointer | boolean | no | all | yes |
| hidePointer1 | hidden pointer | boolean | no | all | yes |
| hidePointer2 | hidden pointer | boolean | no | all | yes |
| hidePointer3 | hidden pointer | boolean | no | all | yes |
| hidePointer4 | hidden pointer | boolean | no | all | yes |
| hidePointer5 | hidden pointer | boolean | no | all | yes |
| hideSecondaryPointer | Hide auxiliary pointer | boolean | no | all | yes |
| strokeDashArray | Array of 2 numbers denoting the dashWidth and dashGap of the lines. Used to render dashed/dotted pointer | number[] | no | all | yes |
onFocus and strip related props
| Name | Description | Type | Required | Platform | HarmonyOS Support |
|---|---|---|---|---|---|
| focusEnabled | If set true, allows users to press on the chart and focuses the nearest data point (focus event can be then handled using the onFocus prop) |
boolean | no | all | yes |
| onFocus | The callback function that handles the focus event. item and index are received as props |
Function | no | all | yes |
| focusedDataPointIndex | Index of the focused data point, used to set initially focused data point and to override the focus behaviour on onFocus | number | no | all | yes |
| showDataPointOnFocus | If set true, it shows the data point corresponding to the focused area of the chart | boolean | no | all | yes |
| showStripOnFocus | If set true, it shows a vertical strip corresponding to the focused area of the chart | boolean | no | all | yes |
| showTextOnFocus | If set true, it shows the data point text corresponding to the focused area of the chart | boolean | no | all | yes |
| showDataPointLabelOnFocus | If set true, it shows the data point corresponding to the focused area of the chart | boolea | no | all | no |
| stripHeight | Height of the vertical strip that becomes visible on pressing the corresponding area of the chart | number | no | all | yes |
| stripWidth | Width of the vertical strip that becomes visible on pressing the corresponding area of the chart | number | no | all | yes |
| stripColor | Color of the vertical strip that becomes visible on pressing the corresponding area of the chart | ColorValue | no | all | yes |
| stripOpacity | Opacity of the vertical strip that becomes visible on pressing the corresponding area of the chart | number | no | all | yes |
| unFocusOnPressOut | If set true, it unselects/unfocuses the focused/selected data point | boolean | no | all | yes |
| delayBeforeUnFocus | Delay (in milliseconds) between the release of the press and ghe unfocusing of the data point | number | no | all | yes |
| focusedDataPointShape | Shape of the data points when focused due to press | String | no | all | yes |
| focusedDataPointWidth | Width of the data points when focused due to press | number | no | all | yes |
| focusedDataPointHeight | Height of the data points when focused due to press | number | no | all | yes |
| focusedDataPointColor | Color of the data points when focused due to press | ColorValue | no | all | yes |
| focusedDataPointRadius | Radius of the data points when focused due to press | number | no | all | yes |
| focusedCustomDataPoint | Custom data point when focused due to press event | Function | no | all | yes |
Props for Area Chart
| Name | Description | Type | Required | Platform | HarmonyOS Support |
|---|---|---|---|---|---|
| areaChart | If set true, renders area chart instead of line chart | boolean | no | all | yes |
| areaChart1 | If set true, renders area chart for 1st data set instead of line chart | boolean | no | no | no |
| areaChart2 | If set true, renders area chart for 2nd data set instead of line chartt | boolean | no | no | no |
| areaChart3 | If set true, renders area chart for 3rd data set instead of line chartt | boolean | no | no | no |
| areaChart4 | If set true, renders area chart for 4th data set instead of line chartt | boolean | no | no | no |
| areaChart5 | If set true, renders area chart for 5th data set instead of line chartt | boolean | no | no | no |
| startFillColor | Start gradient color for the area chart | ColorValue | no | all | yes |
| endFillColor | End gradient color for the area chart | ColorValue | no | all | yes |
| startOpacity | Start gradient opacity for the area chart | number | no | all | yes |
| endOpacity | End gradient opacity for the area chart | number | no | all | yes |
| startFillColor1 | Start gradient color for the first dataset of the area chart | ColorValue | no | all | yes |
| endFillColor1 | End gradient color for the first dataset of the area chart | ColorValue | no | all | yes |
| startOpacity1 | Start gradient opacity for the first dataset of the area chart | number | no | all | yes |
| endOpacity1 | End gradient opacity for the first dataset of the area chart | number | no | all | yes |
| startFillColor2 | Start gradient color for the second dataset of the area chart | ColorValue | no | all | yes |
| endFillColor2 | End gradient color for the second dataset of the area chart | ColorValue | no | all | yes |
| startOpacity2 | Start gradient color for the second dataset of the area chart | number | no | all | yes |
| endOpacity2 | End gradient opacity for the second dataset of the area chart | number | no | all | yes |
| startFillColor3 | Start gradient color for the third dataset of the area chart | ColorValue | no | all | yes |
| endFillColor3 | End gradient color for the third dataset of the area chart | ColorValue | no | all | yes |
| startOpacity3 | Start gradient color for the third dataset of the area chart | number | no | all | yes |
| endOpacity3 | End gradient opacity for the third dataset of the area chart | number | no | all | yes |
| startFillColor4 | Start gradient color for the fourth dataset of the area chart | ColorValue | no | all | yes |
| endFillColor4 | End gradient color for the fourth dataset of the area chart | ColorValue | no | all | yes |
| startOpacity4 | Start gradient color for the fourth dataset of the area chart | number | no | all | yes |
| endOpacity4 | End gradient opacity for the fourth dataset of the area chart | number | no | all | yes |
| startFillColor5 | Start gradient color for the fifth dataset of the area chart | ColorValue | no | all | yes |
| endFillColor5 | End gradient color for the fifth dataset of the area chart | ColorValue | no | all | yes |
| startOpacity5 | Start gradient color for the fifth dataset of the area chart | number | no | all | yes |
| endOpacity5 | End gradient opacity for the fifth dataset of the area chart | number | no | all | yes |
| gradientDirection | Direction of the gradient ('horizontal' or 'vertical') | string | no | all | yes |
| areaGradientComponent | this prop defines the svg gradient that should be applied to the area (requires areaChart to be truthy) | Function | no | all | yes |
| areaGradientId | id of the (needed along with areaGradientComponent prop) | string | no | all | yes |
Basic props
| Name | Description | Type | Required | Platform | HarmonyOS Support |
|---|---|---|---|---|---|
| data | An item object represents a section in the Pie chart. Descibed in the next table | pieDataItem[] | no | all | yes |
| radius | Radius of the Pie | number | no | all | yes |
| initialAngle | Starting angle in radians (illustrated below this table) | number | no | all | yes |
| isThreeD | If set to true, it rotates and translates the chart to give it a 3D effect | boolean | no | all | yes |
| showGradient | Prop to enable radial gradient for the Pie sections | boolean | no | all | yes |
| gradientCenterColor | Gradient color at the center of the Pie chart | ColorValue | no | all | yes |
| onPress | Callback function called on press of Pie sections (takes item and index as parameter) | Function | no | all | yes |
| focusOnPress | When set to true, the pressed section of the Pie chart will have a bigger radius, hence appear focused | boolean | no | all | yes |
| toggleFocusOnPress | When set to true, if the user presses an already focused pie section, it will be unfocused | boolean | no | all | yes |
| extraRadius | Extra radius for the focused Pie section | number | no | all | yes |
| inwardExtraLengthForFocused | Extra length of focused Pie section towards the center (only for donut charts) | number | no | all | yes |
| sectionAutoFocus | In case you don't want focusOnPress but want a particular section to autofocus, this prop will be needed | boolean | no | all | yes |
| tiltAngle | The angle by which the chart should be tilted | Angle in deg | no | all | yes |
| shadow | Shadow to the Pie chart, when set to true, it enhances the 3D effect | boolean | no | all | yes |
| shadowColor | Color of the shadow | ColorValue | no | all | yes |
| shadowWidth | Width of the shadow | number | no | all | yes |
| strokeWidth | Stroke (line) width for the Pie chart and its section | number | no | all | yes |
| strokeColor | Stroke (line) color | ColorValue | no | all | yes |
| backgroundColor | Background color of the container that contains the Pie chart | ColorValue | no | all | yes |
| showText | When set to true, displays text on the Pie sections | boolean | no | all | yes |
| textColor | Color of the label texts | ColorValue | no | all | yes |
| textSize | Size of the label texts (max allowed: radius / 5) | number | no | all | yes |
| fontStyle | Style of the text - 'normal', 'italic' or 'oblique' | string | no | all | yes |
| fontWeight | Weight of the text - 'bold', 'bolder', 'lighter', '100', '200' etc | string | no | all | yes |
| font | Font family of the text - 'Arial', 'Cursive', 'Comic Sans MS' etc | string | no | all | no |
| showTextBackground | When set to true, displays background for text on the Pie sections | boolean | no | all | yes |
| textBackgroundColor | Background color for the label texts | ColorValue | no | all | yes |
| textBackgroundRadius | Radius for the background of the text labels | number | no | all | yes |
| showValuesAsLabels | When set to true, the values of the Pie sections are displayed as labels | boolean | no | all | yes |
| centerLabelComponent | Component to be rendered at the center of the Pie chart | Function | no | all | yes |
| semiCircle | When set to true, renders the Pie Chart in a semi-circle. donut semiCircle charts look like a speed-meter | boolean | no | all | yes |
| labelsPosition | Tells where inside the Pie sections should the labels be shown- 'onBorder', 'outward', 'inward' or 'mid' | string | no | all | yes |
| pieInnerComponent | Svg element to be rendered inside each Pie like a label (position controlled by 'labelsPosition' ) | () => svg element | no | all | yes |
| paddingHorizontal | horizontal padding in the chart svg component (useful to accomodate "onBorder" labels) | number | no | all | yes |
| paddingVertical | vertical padding in the chart svg component (useful to accomodate "onBorder" labels) | number | no | all | yes |
| isAnimated | To show animates PieProChart. Animation occurs onLoad and on value change | boolean | no | all | yes |
| animationDuration | Duration of the animations, only fro PieProChart | number | no | all | yes |
| curvedStartEdges | Bend start edge, only fro PieProChart | boolean | no | all | yes |
| curvedEndEdges | Bend end edge, only fro PieProChart | boolean | no | all | yes |
| edgesRadius | Bend radius, only fro PieProChart | number | no | all | yes |
| strokeDashArray | Array of 2 numbers denoting the dashWidth and dashGap of the lines. Used to render dashed/dotted pointer. only for PieProChart | number[] | no | all | yes |
| ring | Whether the pie chart needs to be filled with fan leaves | boolean | no | all | yes |
Item description (pieDataItem)
| Name | Description | Type | Required | Platform | HarmonyOS Support |
|---|---|---|---|---|---|
| value | Value of the item, representing a section of the Pie chart | number | no | all | yes |
| shiftX | Translates (shifts) the particular section horizontally by given value | number | no | all | yes |
| shiftY | Translates (shifts) the particular section vertically by given value | number | no | all | yes |
| shiftTextX | Translates (shifts) the position of label text horizontally | number | no | all | yes |
| shiftTextY | Translates (shifts) the position of label text vertically | number | no | all | yes |
| shiftTextBackgroundX | Shifts the background of label text horizontally (default value is shiftTextX) | number | no | all | yes |
| shiftTextBackgroundY | Shifts the background of label text vertically (default value is shiftTextY) | number | no | all | yes |
| color | Color (background color) of the section | ColorValue | no | all | yes |
| text | Label text for the sections | string | no | all | yes |
| textColor | Color of the text (label) inside the section | ColorValue | no | all | no |
| textSize | Size of the text (label) inside the section | number | no | all | yes |
| fontStyle | Style of the text - 'normal', 'italic' or 'oblique' | string | no | all | yes |
| fontWeight | Weight of the text - 'bold', 'bolder', 'lighter', '100', '200' etc | string | no | all | yes |
| font | Font family of the text - 'Arial', 'Cursive', 'Comic Sans MS' etc | string | no | all | no |
| textBackgroundColor | Background color for the label text | ColorValue | no | all | yes |
| textBackgroundRadius | Radius for the background of the text label | number | no | all | yes |
| labelPosition | Tells where inside the Pie sections should the labels be shown- 'onBorder', 'outward', 'inward' or 'mid' | string | no | all | yes |
| onPress | Callback function called on press of Pie sections (takes item and index as parameter) | Function | no | all | yes |
| strokeWidth | Stroke (line) width for the Pie chart and its section | number | no | all | yes |
| strokeColor | Stroke (line) color | ColorValue | no | all | yes |
| focused | When set to true, the section for that item is focused, sectionAutoFocus must be set true in order to use this property | boolean | no | all | yes |
| pieInnerComponent | Svg element to be rendered inside the Pie like a label (position controlled by 'labelsPosition' ) | () => svg element | no | all | yes |
Donut chart related props
| Name | Description | Type | Required | Platform | HarmonyOS Support |
|---|---|---|---|---|---|
| donut | When set to true, renders a Donut chart (makes an inner ring) | boolean | no | all | yes |
| innerRadius | Radius of the inner ring | number | no | all | yes |
| innerCircleColor | Color of the inner ring | ColorValue | no | all | yes |
| innerCircleBorderWidth | Stroke (border) width of the inner ring | number | no | all | yes |
| innerCircleBorderColor | Stroke (border) color of the inner ring | ColorValue | no | all | yes |
| shiftInnerCenterX | Shifts the inner ring horizontally to enhance the 3D effect | number | no | all | yes |
| shiftInnerCenterY | Shifts the inner ring vertically to enhance the 3D effect | number | no | all | yes |
base props
| Name | Description | Type | Required | Platform | HarmonyOS Support |
|---|---|---|---|---|---|
| height | height of chart body (excluding x-axis labels) | number | no | all | yes |
| width | width of chart body | number | no | all | yes |
| data | array of objects, each object is described by popnPyramidDataItem | Array | no | all | yes |
| hideRules | when set to true, hides horizontal rules (which are displayed in the background of the charts) | boolean | no | all | yes |
| rulesThickness | thickness of the horizontal rules | number | no | all | yes |
| rulesColor | color of the horizontal rules | ColorValue | no | all | yes |
| rulesType | type of the horizontal rules - solid or dashed/dotted | RuleTypes | no | all | yes |
| dashWidth | width of each dash in the horizontal rules | number | no | all | yes |
| dashGap | gap between each dash in the horizontal rules | number | no | all | yes |
| stepHeight | height of each step/horizontal section in the chart body | number | no | all | yes |
| verticalMarginBetweenBars | self explanatory | number | no | all | yes |
| hideYAxisText | hide Y axis labels, when not set to true, a gap will be left to the left of the chart | boolean | no | all | yes |
| yAxisLabelWidth | self explanatory | number | no | all | yes |
| yAxisColor | self explanatory | ColorValue | no | all | yes |
| yAxisThickness | self explanatory | number | no | all | yes |
| yAxisStrokeDashArray | used to render a dashed or dotted Y axis line ([dashWidth,dashGap]) | Array | no | all | yes |
| xAxisColor | self explanatory | ColorValue | no | all | yes |
| xAxisThickness | self explanatory | number | no | all | yes |
| xAxisType | type of X-axis- solid or dashed/dotted | RuleTypes | no | all | yes |
| xAxisNoOfSections | number of sections in X-axis (in both left and right parts) | number | no | all | yes |
| showXAxisIndices | when set to true, shows small lines (indices) at each section of x-axis | boolean | no | all | yes |
| xAxisIndicesWidth | width of x axis indices | number | no | all | yes |
| xAxisIndicesHeight | height of x axis indices | number | no | all | yes |
| xAxisIndicesColor | color of of x axis indices | ColorValue | no | all | yes |
| xAxisIndicesShiftY | used to shift x axis indices downwards or upwards | number | no | all | yes |
| showXAxisLabelTexts | self explanatory | boolean | no | all | yes |
| xAxisLabelFontSize | self explanatory | number | no | all | yes |
| xAxisLabelColor | self explanatory | ColorValue | no | all | yes |
| xAxisLabelFontStyle | self explanatory | FontStyle | no | all | yes |
| xAxisLabelFontWeight | self explanatory | FontWeight | no | all | yes |
| xAxisLabelFontFamily | self explanatory | string | no | all | no |
| xAxisLabelShiftX | horizontally shifts the x axis labels by given value | number | no | all | yes |
| xAxisLabelShiftY | vertically shifts the x axis labels by given value | number | no | all | yes |
| xAxisRoundToDigits | number of decimal places upto which x axis labels will be displayed | number | no | all | yes |
| xAxisLabelPrefix | The String prepended to the x axis label text (for example- '$') | string | no | all | yes |
| xAxisLabelSuffix | The String appended to the x axis label text | string | no | all | yes |
| formatXAxisLabels | a callback function that takes the label generated by the library and modifies it | (label: string) => string | no | all | yes |
| showVerticalLines | show vertical lines (similar to horiz rules) in background of the chart | boolean | no | all | yes |
| verticalLinesColor | Color of the vertical lines | ColorValue | no | all | yes |
| verticalLinesThickness | Thickness of the vertical lines | number | no | all | yes |
| verticalLinesStrokeDashArray | used to render dashed or dotted vertical lines ([dashWidth,dashGap]) | Array | no | all | yes |
| noOfSections | Number of sections (and horiz rules) in the Y axis | number | no | all | yes |
| barsMapToYAxisSections | this prop tells whether the number of sections in the Y axis is equal to the length of data array | boolean | no | all | yes |
| showYAxisIndices | when set to true, shows small lines (indices) at each section of y-axis | boolean | no | all | yes |
| yAxisIndicesWidth | width of y axis indices | number | no | all | yes |
| yAxisIndicesHeight | height of y axis indices | number | no | all | yes |
| yAxisIndicesColor | color of of x axis indices | ColorValue | no | all | yes |
| yAxisLabelColor | color of of x axis label text | ColorValue | no | all | yes |
| yAxisLabelFontSize | font size of of of x axis label text = | number | no | all | yes |
| yAxisLabelTextMarginRight | space left between the y axis labels and the y axis line | number | no | all | yes |
| yAxisLabelTexts | An array of string labels to be rendered as Y axis labels (top to bottom) | Array | no | all | yes |
| yAxisLabelFontStyle | self explanatory | FontStyle | no | all | yes |
| yAxisLabelFontWeight | self explanatory | FontWeight | no | all | yes |
| yAxisLabelFontFamily | self explanatory | string | no | all | no |
| showValuesAsBarLabels | when set to true, displays the left and right values as labels beside the respective bars | boolean | no | all | yes |
| showMidAxis | when set to true, displays an axis in the mid - between the left and right halves of the pyramid | boolean | no | all | yes |
| midAxisThickness | thickness of the mid axis lines | number | no | all | yes |
| midAxisLabelWidth | width of the mid axis | number | no | all | yes |
| midAxisColor | color of the mid axis lines | ColorValue | no | all | yes |
| midAxisLeftColor | color of the left mid axis line | ColorValue | no | all | yes |
| midAxisRightColor | color of the right mid axis line | ColorValue | no | all | yes |
| midAxisStrokeDashArray | used to render dashed or dotted mid axis lines ([dashWidth,dashGap]) | Array | no | all | yes |
| midAxisLabelFontSize | self explanatory | number | no | all | yes |
| midAxisLabelColor | self explanatory | ColorValue | no | all | yes |
| midAxisLabelFontStyle | self explanatory | FontStyle | no | all | yes |
| midAxisLabelFontWeight | self explanatory | FontWeight | no | all | yes |
| midAxisLabelFontFamily | self explanatory | string | no | all | no |
| barLabelWidth | width of the labels displayed behind the bars (both left and right bars) | number | no | all | yes |
| barLabelFontSize | font size of the labels displayed behind the bars (both left and right bars) | number | no | all | yes |
| barLabelColor | color of the of the labels displayed behind the bars (both left and right bars) | ColorValue | no | all | yes |
| barLabelFontStyle | font style of the labels displayed behind the bars (both left and right bars) | FontStyle | no | all | yes |
| barLabelFontWeight | font weight of the labels displayed behind the bars (both left and right bars) | FontWeight | no | all | yes |
| barLabelFontFamily | font family of the labels displayed behind the bars (both left and right bars) | string | no | all | no |
| leftBarLabelWidth | width of the labels displayed behind the left bars | number | no | all | yes |
| leftBarLabelFontSize | font size of the labels displayed behind the left bars | number | no | all | yes |
| leftBarLabelColor | color of the labels displayed behind the left bars | ColorValue | no | all | yes |
| leftBarLabelFontStyle | font style of the labels displayed behind the left bars | FontStyle | no | all | yes |
| leftBarLabelFontWeight | font weight of the labels displayed behind the left bars | FontWeight | no | all | yes |
| leftBarLabelFontFamily | font family of the labels displayed behind the left bars | string | no | all | no |
| leftBarLabelShift | value by which the left bar labels should be shifted horizontally (kind of margin b/w label and bar) | number | no | all | yes |
| leftBarLabelPrefix | The String prepended to the left bar label text (for example- '$') | string | no | all | yes |
| leftBarLabelSuffix | The String appended to the left bar label text | string | no | all | yes |
| rightBarLabelWidth | width of the labels displayed behind the right bars | number | no | all | yes |
| rightBarLabelFontSize | font size of the labels displayed behind the right bars | number | no | all | yes |
| rightBarLabelColor | color of the labels displayed behind the right bars | ColorValue | no | all | yes |
| rightBarLabelFontStyle | font style of the labels displayed behind the right bars | FontStyle | no | all | yes |
| rightBarLabelFontWeight | font weight of the labels displayed behind the right bars | FontWeight | no | all | yes |
| rightBarLabelFontFamily | font family of the labels displayed behind the right bars | string | no | all | no |
| rightBarLabelShift | value by which the right bar labels should be shifted horizontally (kind of margin b/w label and bar) | number | no | all | yes |
| rightBarLabelPrefix | The String prepended to the right bar label text (for example- '$') | string | no | all | yes |
| rightBarLabelSuffix | The String appended to the right bar label text | string | no | all | yes |
| formatBarLabels | a callback function that takes the label generated by the library and modifies it | (label: string) => string | no | all | yes |
| leftBarColor | color of the bars displayed in the left half of the pyramid | ColorValue | no | all | yes |
| rightBarColor | color of the bars displayed in the right half of the pyramid | ColorValue | no | all | yes |
| leftBarBorderColor | border color of the bars displayed in the left half of the pyramid | ColorValue | no | all | yes |
| rightBarBorderColor | border color of the bars displayed in the right half of the pyramid | ColorValue | no | all | yes |
| barBorderWidth | boder width of the bars (both left and right bars) | number | no | all | yes |
| leftBarBorderWidth | boder width of the bars displayed in the left half of the pyramid | number | no | all | yes |
| rightBarBorderWidth | boder width of the bars displayed in the right half of the pyramid | number | no | all | yes |
| barBorderRadius | boder radius of the bars | number | no | all | yes |
| leftBarBorderRadius | boder width of the bars displayed in the left half of the pyramid | number | no | all | yes |
| rightBarBorderRadius | boder width of the bars displayed in the right half of the pyramid | number | no | all | yes |
| allCornersRounded | when set to true, border radius will apply to all the four corners of the bars, else applied only on outer edges | boolean | no | all | yes |
| showSurplus | shows surplus values on the edges in highlighted colors (extra width of the bigger bar is highlighted ) | boolean | no | all | yes |
| showSurplusLeft | shows surplus values on the left edges in highlighted colors (extra width of the bigger bar is highlighted ) | boolean | no | all | yes |
| showSurplusRight | shows surplus values on the right edges in highlighted colors (extra width of the bigger bar is highlighted ) | boolean | no | all | yes |
| leftSurplusColor | highlight color of the left surplus | ColorValue | no | all | yes |
| leftSurplusBorderColor | border color of the left surplus | ColorValue | no | all | yes |
| rightSurplusColor | highlight color of the right surplus | ColorValue | no | all | yes |
| rightSurplusBorderColor | border color of the right surplus | ColorValue | no | all | yes |
| leftSurplusBorderWidth | border width of the left surplus | number | no | all | yes |
| rightSurplusBorderWidth | border width of the right surplus | number | no | all | yes |
- PieChart 设置圆环设置为 3D，中间圆环显示问题，svg 问题。 issue#7
- BarChart 设置 barBackgroundPattern 显示问题，svg 问题。 issue#6
- LineChart 设置 customDataPoint 不显示，svg 问题。 issue#8
- PieChartPro 饼图设置 animated 为 true，动画会卡顿，RN 框架问题。 issue#9
- LineChart/BarChart dataPointLabelComponent 不生效,svg 问题。issue#10
- LineChart/BarChart dataPointLabelWidth 不生效,svg 问题。issue#11
- LineChart/BarChart dataPointLabelShiftX 不生效,svg 问题。issue#12
- LineChart/BarChart dataPointLabelShiftY 不生效,svg 问题。issue#13
- LineChart showDataPointLabelOnFocus 为 true 不生效,svg 问题。issue#14
- LineChart data 设置 onPress 方法 不生效,svg 问题。issue#15
- LineChart data 设置 focusedDataPointLabelComponent 不生效,svg 问题。issue#16
- PopulationPyramid barLabelFontFamily 不生效,svg 问题。issue#17
- PopulationPyramid leftBarLabelFontFamily 不生效,svg 问题。issue#18
- PopulationPyramid rightBarLabelFontFamily 不生效,svg 问题。issue#19
- PopulationPyramid xAxisLabelFontFamily 不生效,svg 问题。issue#20
- PopulationPyramid yAxisLabelFontFamily 不生效,svg 问题。issue#21
- PopulationPyramid midAxisLabelFontFamily 不生效,svg 问题。issue#22
- PieChart/PieChartPro font 不生效,svg 问题。issue#23
- BarChart/LineChart rulesConfigArray 属性设置第一条不生效,效果与 iOS/Android 一致。issue#892
- PieChart data 设置 textColor 不生效,效果与 iOS/Android 一致。issues#886
- LineChart areaChart1 areaChart2 areaChart3 areaChart4 areaChart5 不生效,效果与 iOS/Android 一致。issue#892
- BarChart pointerEvents 不生效,效果与 iOS/Android 一致.
- BarChart/LineChart pointerConfig 的 activatePointersDelay 不生效,效果与 iOS/Android 一致。
本项目基于 The MIT License (MIT) ，请自由地享受和参与开源。