模板版本：v0.4.0

本项目基于 react-native-gifted-charts 开发。

该第三方库的仓库已迁移至 Gitcode，且支持直接从 npm 下载，新的包名为：@react-native-ohos/react-native-gifted-charts，具体版本所属关系如下：

|三方库名称| 三方库版本 | 发布信息 | 支持RN版本 |Autolink|编译API版本|社区基线版本|npm地址| |-------|-------|-----| ---------- |---------- |---------- |---------- |---------- | |@react-native-ohos/react-native-gifted-charts| ~1.6.0（开发中） | GitCode | 0.82 |否|API12+|1.4.64|Npm Address| |@react-native-ohos/react-native-gifted-charts| ~1.5.0 | GitCode Releases | 0.77 |否|API12+|1.4.61 |Npm Address| |@react-native-ohos/react-native-gifted-charts| ~1.4.17 | GitCode Releases | 0.72 |否|API12+|1.4.16 |Npm Address| |@react-native-oh-tpl/react-native-gifted-charts| <=1.4.16-0.0.3@deprecated | Github Releases(deprecated) | 0.72 |否|API12+|1.4.16 |Npm Address|

1. 安装与使用

进入到工程目录并输入以下命令：·

npm

npm install @react-native-ohos/react-native-gifted-charts

yarn

yarn add @react-native-ohos/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 />
    </>
  );
}

2. Link

本库鸿蒙侧实现依赖@react-native-ohos/react-native-svg、@react-native-ohos/react-native-linear-gradient 的原生端代码，如已在鸿蒙工程中引入过这两个库，则无需再次引入，可跳过本章节步骤，直接使用。

如未引入请参照@react-native-ohos/react-native-svg 文档、@react-native-ohos/react-native-linear-gradient 文档进行引入

3. 约束与限制

兼容性

要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。

请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：

本文档内容基于以下版本验证通过：

1. RNOH: 0.72.33; SDK: OpenHarmony 5.0.0.71(API Version 12 Release); IDE: DevEco Studio 5.0.3.900; ROM: NEXT.0.0.71;
2. RNOH: 0.77.18; SDK: HarmonyOS 5.1.1 Release; IDE: DevEco Studio 5.1.1.830; ROM: NEXT 5.1.0.150;
3. RNOH: 0.82.1; SDK: HarmonyOS 6.0.1 Release SDK; IDE: DevEco Studio 6.0.1 Release; ROM:6.0.0.120 SP7;

4. 属性

详情见 react-native-gifted-charts Props tables

[!TIP] "Platform"列表示该属性在原三方库上支持的平台。

[!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。

BarChart, Horizontal BarChart and Stacked Bar Chart

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 | | customBackground1.5.0+ | An object used to set a custom background component (See the properties of this object below) | CustomBackground | no | all | yes | | nestedScrollEnabled1.5.0+ | Useful when the chart is used inside a horizontal ScrollView (without this, the chart's scrolling is compromised) | boolean | no | all | yes | | onScrollEndDrag1.5.0+ | callback function called when the chart is has finished scrolling. See Note below. | (event,direction) => void | no | all | yes | | bounces1.5.0+ | controls the bouncing effect of the Scrolling chart on iOS. See https://reactnative.dev/docs/scrollview#bounces-ios | boolean | no | iOS | no | | overScrollMode1.5.0+ | controls the bouncing effect of the Scrolling chart on Android. See https://reactnative.dev/docs/scrollview#overscrollmode-android | boolean | no | Android | no | | autoCenterTooltip1.5.0+ | When set to true, automatically centers the tooltip | boolean | no | all | yes | | topLabelTextStyle1.5.0+ | text style for the top labels that appear at the top of bars | object | no | all | yes | | highlightEnabled1.5.0+ | used to highlight a particular Bar on press, by decreasing the opacity of the remaining (setting them to lowlightOpacity) | boolean | no | all | yes | | lowlightOpacity1.5.0+ | the opacity of the un-highlighted bars when one of them is highlighted | number | no | all | yes | | highlightedBarIndex1.5.0+ | the index(or indices) of the highlighted bar(s) | number | number[] | no | all | yes | | onBackgroundPress1.5.0+ | Callback function called on pressing the chart body (outside of the bars). Helps ufocus/unselect after focusing/selecting a Bar | Function | 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 | no | no | | 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 | | secondaryLabel1.5.0+ | Label text appearing above the secondary X-axis (at the top of the chart) | string | no | all | yes | | secondaryLabelComponent1.5.0+ | Custom label component appearing above the secondary X-axis (at the top of the chart) | Component | no | all | yes | | secondaryLabelTextStyle1.5.0+ | Style object for the label text of secondary X-axis (at the top of the chart) | object | 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 Y 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 | no | | verticalLinesStrokeLinecap1.5.0+ | Linecap of the vertical lines (see in svg)stroke-linecap | 'butt' | 'round' | 'square' | no | all | yes | | xAxisLabelsAtBottom1.5.0+ | places the x-axis labels at bottom of the chart, useful in charts involving -ve values (4th quadrant) | boolean | no | all | yes | | secondaryXAxis1.5.0+ | properties of the secondary X-axis (appearing at the top of the chart) | XAxisConfig | 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 | no | no | | 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 | | endReachedOffset1.5.0+ | distance before end of scroll when onEndReached should be triggered | number | 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 | no | | secondaryPointerColor | Secondary pointer color | ColorValue | no | all | no | | 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 | | stackHighlightEnabled1.5.0+ | used to highlight a section of the Bar from each stack on press | boolean | no | all | yes | | highlightedStackIndex1.5.0+ | index of the selected section (state variable) | number | 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 | | innerBarComponent1.5.0+ | Renders a component inside a section of a stack | () => ReactNode | no | all | yes |

LineChart and AreaChart

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 Line chart | number | no | all | yes | | height | Height of the Line 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 points in the Line 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 Line 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 | y