{"id":13998601,"url":"https://github.com/indiespirit/react-native-chart-kit","last_synced_at":"2025-05-13T20:16:01.745Z","repository":{"id":37598307,"uuid":"114833639","full_name":"indiespirit/react-native-chart-kit","owner":"indiespirit","description":"📊React Native Chart Kit: Line Chart, Bezier Line Chart, Progress Ring, Bar chart, Pie chart, Contribution graph (heatmap)","archived":false,"fork":false,"pushed_at":"2024-04-17T13:58:08.000Z","size":2329,"stargazers_count":2980,"open_issues_count":421,"forks_count":674,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-05-12T21:04:40.340Z","etag":null,"topics":["chart","chart-kit","expo","react-native","react-native-charts","react-native-graphs"],"latest_commit_sha":null,"homepage":"https://expo.io/@indiespirit/react-native-chart-kit","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/indiespirit.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"contributing.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"hermanya","patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2017-12-20T02:30:08.000Z","updated_at":"2025-05-12T10:10:23.000Z","dependencies_parsed_at":"2024-06-18T11:15:22.083Z","dependency_job_id":"d051063a-e93e-4a86-acaf-3c463827308c","html_url":"https://github.com/indiespirit/react-native-chart-kit","commit_stats":{"total_commits":312,"total_committers":104,"mean_commits":3.0,"dds":0.5032051282051282,"last_synced_commit":"f30a37d73cd02807c2f19cd8094f1cacb9f6ba3b"},"previous_names":[],"tags_count":87,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/indiespirit%2Freact-native-chart-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/indiespirit%2Freact-native-chart-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/indiespirit%2Freact-native-chart-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/indiespirit%2Freact-native-chart-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/indiespirit","download_url":"https://codeload.github.com/indiespirit/react-native-chart-kit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254020641,"owners_count":22000756,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chart","chart-kit","expo","react-native","react-native-charts","react-native-graphs"],"created_at":"2024-08-09T19:01:49.989Z","updated_at":"2025-05-13T20:16:01.727Z","avatar_url":"https://github.com/indiespirit.png","language":"TypeScript","readme":"If you're looking to **build a website or a cross-platform mobile app** – we will be happy to help you! Send a note to clients@ui1.io and we will be in touch with you shortly.\n\n![Chart Kit](https://i.imgur.com/Idp4WIX.jpg)\n\n[📲See example app](https://github.com/indiespirit/react-native-chart-kit-example)\n\nTo try the examples in Expo, please change `main` to `./node_modules/expo/AppEntry.js` in `package.json` before starting things with `expo run`. You'll need to have `expo-cli` installed via `npm install -g expo-cli`.\n\n# React Native Chart Kit Documentation\n\n## Import components\n\n1. `yarn add react-native-chart-kit`\n2. `yarn add react-native-svg` install peer dependencies\n3. Use with ES6 syntax to import components\n\n```js\nimport {\n  LineChart,\n  BarChart,\n  PieChart,\n  ProgressChart,\n  ContributionGraph,\n  StackedBarChart\n} from \"react-native-chart-kit\";\n```\n\n## Quick Example\n\n```jsx\n\u003cView\u003e\n  \u003cText\u003eBezier Line Chart\u003c/Text\u003e\n  \u003cLineChart\n    data={{\n      labels: [\"January\", \"February\", \"March\", \"April\", \"May\", \"June\"],\n      datasets: [\n        {\n          data: [\n            Math.random() * 100,\n            Math.random() * 100,\n            Math.random() * 100,\n            Math.random() * 100,\n            Math.random() * 100,\n            Math.random() * 100\n          ]\n        }\n      ]\n    }}\n    width={Dimensions.get(\"window\").width} // from react-native\n    height={220}\n    yAxisLabel=\"$\"\n    yAxisSuffix=\"k\"\n    yAxisInterval={1} // optional, defaults to 1\n    chartConfig={{\n      backgroundColor: \"#e26a00\",\n      backgroundGradientFrom: \"#fb8c00\",\n      backgroundGradientTo: \"#ffa726\",\n      decimalPlaces: 2, // optional, defaults to 2dp\n      color: (opacity = 1) =\u003e `rgba(255, 255, 255, ${opacity})`,\n      labelColor: (opacity = 1) =\u003e `rgba(255, 255, 255, ${opacity})`,\n      style: {\n        borderRadius: 16\n      },\n      propsForDots: {\n        r: \"6\",\n        strokeWidth: \"2\",\n        stroke: \"#ffa726\"\n      }\n    }}\n    bezier\n    style={{\n      marginVertical: 8,\n      borderRadius: 16\n    }}\n  /\u003e\n\u003c/View\u003e\n```\n\n## Chart style object\n\nDefine a chart style object with following properies as such:\n\n```js\nconst chartConfig = {\n  backgroundGradientFrom: \"#1E2923\",\n  backgroundGradientFromOpacity: 0,\n  backgroundGradientTo: \"#08130D\",\n  backgroundGradientToOpacity: 0.5,\n  color: (opacity = 1) =\u003e `rgba(26, 255, 146, ${opacity})`,\n  strokeWidth: 2, // optional, default 3\n  barPercentage: 0.5,\n  useShadowColorFromDataset: false // optional\n};\n```\n\n| Property                      | Type               | Description                                                                                                                          |\n| ----------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------ |\n| backgroundGradientFrom        | string             | Defines the first color in the linear gradient of a chart's background                                                               |\n| backgroundGradientFromOpacity | Number             | Defines the first color opacity in the linear gradient of a chart's background                                                       |\n| backgroundGradientTo          | string             | Defines the second color in the linear gradient of a chart's background                                                              |\n| backgroundGradientToOpacity   | Number             | Defines the second color opacity in the linear gradient of a chart's background                                                      |\n| fillShadowGradientFrom        | string             | Defines the first color in the linear gradient of the area under data (can also be specified as `fillShadowGradient`)                |\n| fillShadowGradientFromOpacity | Number             | Defines the first color opacity in the linear gradient of the area under data (can also be specified as `fillShadowGradientOpacity`) |\n| fillShadowGradientFromOffset  | Number             | Defines the first color offset (0-1) in the linear gradient of the area under data                                                   |\n| fillShadowGradientTo          | string             | Defines the second color in the linear gradient of the area under data                                                               |\n| fillShadowGradientToOpacity   | Number             | Defines the second color opacity in the linear gradient of the area under data                                                       |\n| fillShadowGradientToOffset    | Number             | Defines the second color offset (0-1) in the linear gradient of the area under data                                                  |\n| useShadowColorFromDataset     | Boolean            | Defines the option to use color from dataset to each chart data. Default is false                                                    |\n| color                         | function =\u003e string | Defines the base color function that is used to calculate colors of labels and sectors used in a chart                               |\n| strokeWidth                   | Number             | Defines the base stroke width in a chart                                                                                             |\n| barPercentage                 | Number             | Defines the percent (0-1) of the available width each bar width in a chart                                                           |\n| barRadius                     | Number             | Defines the radius of each bar                                                                                                       |\n| propsForBackgroundLines       | props              | Override styles of the background lines, refer to react-native-svg's Line documentation                                              |\n| propsForLabels                | props              | Override styles of the labels, refer to react-native-svg's Text documentation                                                        |\n| propsForVerticalLabels        | props              | Override styles of vertical labels, refer to react-native-svg's Text documentation                                                   |\n| propsForHorizontalLabels      | props              | Override styles of horizontal labels, refer to react-native-svg's Text documentation                                                 |\n\n## Responsive charts\n\nTo render a responsive chart, use `Dimensions` react-native library to get the width of the screen of your device like such\n\n```js\nimport { Dimensions } from \"react-native\";\nconst screenWidth = Dimensions.get(\"window\").width;\n```\n\n## Line Chart\n\n![Line Chart](https://i.imgur.com/Wt26snd.jpg)\n\n```js\nconst data = {\n  labels: [\"January\", \"February\", \"March\", \"April\", \"May\", \"June\"],\n  datasets: [\n    {\n      data: [20, 45, 28, 80, 99, 43],\n      color: (opacity = 1) =\u003e `rgba(134, 65, 244, ${opacity})`, // optional\n      strokeWidth: 2 // optional\n    }\n  ],\n  legend: [\"Rainy Days\"] // optional\n};\n```\n\n```jsx\n\u003cLineChart\n  data={data}\n  width={screenWidth}\n  height={220}\n  chartConfig={chartConfig}\n/\u003e\n```\n\n| Property                | Type                    | Description                                                                                                                                                                                                                    |\n| ----------------------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| data                    | Object                  | Data for the chart - see example above                                                                                                                                                                                         |\n| width                   | Number                  | Width of the chart, use 'Dimensions' library to get the width of your screen for responsive                                                                                                                                    |\n| height                  | Number                  | Height of the chart                                                                                                                                                                                                            |\n| withDots                | boolean                 | Show dots on the line - default: True                                                                                                                                                                                          |\n| withShadow              | boolean                 | Show shadow for line - default: True                                                                                                                                                                                           |\n| withInnerLines          | boolean                 | Show inner dashed lines - default: True                                                                                                                                                                                        |\n| withOuterLines          | boolean                 | Show outer dashed lines - default: True                                                                                                                                                                                        |\n| withVerticalLines       | boolean                 | Show vertical lines - default: True                                                                                                                                                                                            |\n| withHorizontalLines     | boolean                 | Show horizontal lines - default: True                                                                                                                                                                                          |\n| withVerticalLabels      | boolean                 | Show vertical labels - default: True                                                                                                                                                                                           |\n| withHorizontalLabels    | boolean                 | Show horizontal labels - default: True                                                                                                                                                                                         |\n| fromZero                | boolean                 | Render charts from 0 not from the minimum value. - default: False                                                                                                                                                              |\n| yAxisLabel              | string                  | Prepend text to horizontal labels -- default: ''                                                                                                                                                                               |\n| yAxisSuffix             | string                  | Append text to horizontal labels -- default: ''                                                                                                                                                                                |\n| xAxisLabel              | string                  | Prepend text to vertical labels -- default: ''                                                                                                                                                                                 |\n| yAxisInterval           | string                  | Display y axis line every {x} input. -- default: 1                                                                                                                                                                             |\n| chartConfig             | Object                  | Configuration object for the chart, see example config object above                                                                                                                                                            |\n| decorator               | Function                | This function takes a [whole bunch](https://github.com/indiespirit/react-native-chart-kit/blob/master/src/line-chart/LineChart.tsx#L827) of stuff and can render extra elements, such as data point info or additional markup. |\n| onDataPointClick        | Function                | Callback that takes `{value, dataset, getColor}`                                                                                                                                                                               |\n| horizontalLabelRotation | number (degree)         | Rotation angle of the horizontal labels - default 0                                                                                                                                                                            |\n| verticalLabelRotation   | number (degree)         | Rotation angle of the vertical labels - default 0                                                                                                                                                                              |\n| getDotColor             | function =\u003e string      | Defines the dot color function that is used to calculate colors of dots in a line chart and takes `(dataPoint, dataPointIndex)`                                                                                                |\n| renderDotContent        | Function                | Render additional content for the dot. Takes `({x, y, index, indexData})` as arguments.                                                                                                                                        |\n| yLabelsOffset           | number                  | Offset for Y axis labels                                                                                                                                                                                                       |\n| xLabelsOffset           | number                  | Offset for X axis labels                                                                                                                                                                                                       |\n| hidePointsAtIndex       | number[]                | Indices of the data points you don't want to display                                                                                                                                                                           |\n| formatYLabel            | Function                | This function change the format of the display value of the Y label. Takes the Y value as argument and should return the desirable string.                                                                                     |\n| formatXLabel            | Function                | This function change the format of the display value of the X label. Takes the X value as argument and should return the desirable string.                                                                                     |\n| getDotProps             | (value, index) =\u003e props | This is an alternative to chartConfig's propsForDots                                                                                                                                                                           |\n| segments                | number                  | The amount of horizontal lines - default 4                                                                                                                                                                                     |\n\n## Bezier Line Chart\n\n![Line Chart](https://i.imgur.com/EnUiZZU.jpg)\n\n```jsx\n\u003cLineChart\n  data={data}\n  width={screenWidth}\n  height={256}\n  verticalLabelRotation={30}\n  chartConfig={chartConfig}\n  bezier\n/\u003e\n```\n\n| Property | Type    | Description                                           |\n| -------- | ------- | ----------------------------------------------------- |\n| bezier   | boolean | Add this prop to make the line chart smooth and curvy |\n\n## Progress Ring\n\n![Progress Chart](https://i.imgur.com/U4lkW0K.jpg)\n\n```js\n// each value represents a goal ring in Progress chart\nconst data = {\n  labels: [\"Swim\", \"Bike\", \"Run\"], // optional\n  data: [0.4, 0.6, 0.8]\n};\n```\n\n```jsx\n\u003cProgressChart\n  data={data}\n  width={screenWidth}\n  height={220}\n  strokeWidth={16}\n  radius={32}\n  chartConfig={chartConfig}\n  hideLegend={false}\n/\u003e\n```\n\n| Property    | Type    | Description                                                                                 |\n| ----------- | ------- | ------------------------------------------------------------------------------------------- |\n| data        | Object  | Data for the chart - see example above                                                      |\n| width       | Number  | Width of the chart, use 'Dimensions' library to get the width of your screen for responsive |\n| height      | Number  | Height of the chart                                                                         |\n| strokeWidth | Number  | Width of the stroke of the chart - default: 16                                              |\n| radius      | Number  | Inner radius of the chart - default: 32                                                     |\n| chartConfig | Object  | Configuration object for the chart, see example config in the beginning of this file        |\n| hideLegend  | Boolean | Switch to hide chart legend (defaults to false)                                             |\n\n## Bar chart\n\n![Bat Chart](https://i.imgur.com/jVHEWiI.jpg)\n\n```js\nconst data = {\n  labels: [\"January\", \"February\", \"March\", \"April\", \"May\", \"June\"],\n  datasets: [\n    {\n      data: [20, 45, 28, 80, 99, 43]\n    }\n  ]\n};\n```\n\n```jsx\n\u003cBarChart\n  style={graphStyle}\n  data={data}\n  width={screenWidth}\n  height={220}\n  yAxisLabel=\"$\"\n  chartConfig={chartConfig}\n  verticalLabelRotation={30}\n/\u003e\n```\n\n| Property                | Type            | Description                                                                                 |\n| ----------------------- | --------------- | ------------------------------------------------------------------------------------------- |\n| data                    | Object          | Data for the chart - see example above                                                      |\n| width                   | Number          | Width of the chart, use 'Dimensions' library to get the width of your screen for responsive |\n| height                  | Number          | Height of the chart                                                                         |\n| withVerticalLabels      | boolean         | Show vertical labels - default: True                                                        |\n| withHorizontalLabels    | boolean         | Show horizontal labels - default: True                                                      |\n| fromZero                | boolean         | Render charts from 0 not from the minimum value. - default: False                           |\n| withInnerLines          | boolean         | Show inner dashed lines - default: True                                                     |\n| yAxisLabel              | string          | Prepend text to horizontal labels -- default: ''                                            |\n| yAxisSuffix             | string          | Append text to horizontal labels -- default: ''                                             |\n| chartConfig             | Object          | Configuration object for the chart, see example config in the beginning of this file        |\n| horizontalLabelRotation | number (degree) | Rotation angle of the horizontal labels - default 0                                         |\n| verticalLabelRotation   | number (degree) | Rotation angle of the vertical labels - default 0                                           |\n| showBarTops             | boolean         | Show bar tops                                                                               |\n| showValuesOnTopOfBars   | boolean         | Show value above bars                                                                       |\n\n## StackedBar chart\n\n![StackedBar_Chart](https://imgur.com/JkBtxt8.jpg)\n\n```js\nconst data = {\n  labels: [\"Test1\", \"Test2\"],\n  legend: [\"L1\", \"L2\", \"L3\"],\n  data: [\n    [60, 60, 60],\n    [30, 30, 60]\n  ],\n  barColors: [\"#dfe4ea\", \"#ced6e0\", \"#a4b0be\"]\n};\n```\n\n```jsx\n\u003cStackedBarChart\n  style={graphStyle}\n  data={data}\n  width={screenWidth}\n  height={220}\n  chartConfig={chartConfig}\n/\u003e\n```\n\n| Property             | Type    | Description                                                                                 |\n| -------------------- | ------- | ------------------------------------------------------------------------------------------- |\n| data                 | Object  | Data for the chart - see example above                                                      |\n| width                | Number  | Width of the chart, use 'Dimensions' library to get the width of your screen for responsive |\n| height               | Number  | Height of the chart                                                                         |\n| withVerticalLabels   | boolean | Show vertical labels - default: True                                                        |\n| withHorizontalLabels | boolean | Show horizontal labels - default: True                                                      |\n| chartConfig          | Object  | Configuration object for the chart, see example config in the beginning of this file        |\n| barPercentage        | Number  | Defines the percent (0-1) of the available width each bar width in a chart                  |\n| showLegend           | boolean | Show legend - default: True                                                                 |\n\n## Pie chart\n\n![Pie Chart](https://i.imgur.com/JMz3obk.jpg)\n\n### Modified Pie Chart Screenshot\n\n![Pie Chart_modified](/src/piechart_modified.png)\n\n```js\nconst data = [\n  {\n    name: \"Seoul\",\n    population: 21500000,\n    color: \"rgba(131, 167, 234, 1)\",\n    legendFontColor: \"#7F7F7F\",\n    legendFontSize: 15\n  },\n  {\n    name: \"Toronto\",\n    population: 2800000,\n    color: \"#F00\",\n    legendFontColor: \"#7F7F7F\",\n    legendFontSize: 15\n  },\n  {\n    name: \"Beijing\",\n    population: 527612,\n    color: \"red\",\n    legendFontColor: \"#7F7F7F\",\n    legendFontSize: 15\n  },\n  {\n    name: \"New York\",\n    population: 8538000,\n    color: \"#ffffff\",\n    legendFontColor: \"#7F7F7F\",\n    legendFontSize: 15\n  },\n  {\n    name: \"Moscow\",\n    population: 11920000,\n    color: \"rgb(0, 0, 255)\",\n    legendFontColor: \"#7F7F7F\",\n    legendFontSize: 15\n  }\n];\n```\n\n```jsx\n\u003cPieChart\n  data={data}\n  width={screenWidth}\n  height={220}\n  chartConfig={chartConfig}\n  accessor={\"population\"}\n  backgroundColor={\"transparent\"}\n  paddingLeft={\"15\"}\n  center={[10, 50]}\n  absolute\n/\u003e\n```\n\n| Property       | Type    | Description                                                                                       |\n| -------------- | ------- | ------------------------------------------------------------------------------------------------- |\n| data           | Object  | Data for the chart - see example above                                                            |\n| width          | Number  | Width of the chart, use 'Dimensions' library to get the width of your screen for responsive       |\n| height         | Number  | Height of the chart                                                                               |\n| chartConfig    | Object  | Configuration object for the chart, see example config in the beginning of this file              |\n| accessor       | string  | Property in the `data` object from which the number values are taken                              |\n| bgColor        | string  | background color - if you want to set transparent, input `transparent` or `none`.                 |\n| paddingLeft    | string  | left padding of the pie chart                                                                     |\n| center         | array   | offset x and y coordinates to position the chart                                                  |\n| absolute       | boolean | shows the values as absolute numbers                                                              |\n| hasLegend      | boolean | Defaults to `true`, set it to `false` to remove the legend                                        |\n| avoidFalseZero | boolean | Defaults to `false`, set it to `true` to display a \"\u003c1%\" instead of a rounded value equal to \"0%\" |\n\n## Contribution graph (heatmap)\n\n![Contribution Graph](https://i.imgur.com/NKURRt6.jpg)\n\nThis type of graph is often use to display a developer contribution activity. However, there many other use cases this graph is used when you need to visualize a frequency of a certain event over time.\n\n```js\nconst commitsData = [\n  { date: \"2017-01-02\", count: 1 },\n  { date: \"2017-01-03\", count: 2 },\n  { date: \"2017-01-04\", count: 3 },\n  { date: \"2017-01-05\", count: 4 },\n  { date: \"2017-01-06\", count: 5 },\n  { date: \"2017-01-30\", count: 2 },\n  { date: \"2017-01-31\", count: 3 },\n  { date: \"2017-03-01\", count: 2 },\n  { date: \"2017-04-02\", count: 4 },\n  { date: \"2017-03-05\", count: 2 },\n  { date: \"2017-02-30\", count: 4 }\n];\n```\n\n```jsx\n\u003cContributionGraph\n  values={commitsData}\n  endDate={new Date(\"2017-04-01\")}\n  numDays={105}\n  width={screenWidth}\n  height={220}\n  chartConfig={chartConfig}\n/\u003e\n```\n\n| Property           | Type     | Description                                                                                 |\n| ------------------ | -------- | ------------------------------------------------------------------------------------------- |\n| data               | Object   | Data for the chart - see example above                                                      |\n| width              | Number   | Width of the chart, use 'Dimensions' library to get the width of your screen for responsive |\n| height             | Number   | Height of the chart                                                                         |\n| gutterSize         | Number   | Size of the gutters between the squares in the chart                                        |\n| squareSize         | Number   | Size of the squares in the chart                                                            |\n| horizontal         | boolean  | Should graph be laid out horizontally? Defaults to `true`                                   |\n| showMonthLabels    | boolean  | Should graph include labels for the months? Defaults to `true`                              |\n| showOutOfRangeDays | boolean  | Should graph be filled with squares, including days outside the range? Defaults to `false`  |\n| chartConfig        | Object   | Configuration object for the chart, see example config in the beginning of this file        |\n| accessor           | string   | Property in the `data` object from which the number values are taken; defaults to `count`   |\n| getMonthLabel      | function | Function which returns the label for each month, taking month index (0 - 11) as argument    |\n| onDayPress         | function | Callback invoked when the user clicks a day square on the chart; takes a value-item object  |\n\n## More styling\n\nEvery charts also accepts `style` props, which will be applied to parent `svg` or `View` component of each chart.\n\n## Abstract Chart\n\n`src/abstract-chart.js` is an extendable class which can be used to create your own charts!\n\nThe following methods are available:\n\n### renderHorizontalLines(config)\n\nRenders background horizontal lines like in the Line Chart and Bar Chart. Takes a config object with following properties:\n\n```js\n{\n  // width of your chart\n  width: Number,\n  // height of your chart\n  height: Number,\n  // how many lines to render\n  count: Number,\n  // top padding from the chart top edge\n  paddingTop: Number\n}\n```\n\n### renderVerticalLabels(config)\n\nRender background vertical lines. Takes a config object with following properties:\n\n```js\n{\n  // data needed to calculate the number of lines to render\n  data: Array,\n  // width of your chart\n  width: Number,\n  // height of your chart\n  height: Number,\n  paddingTop: Number,\n  paddingRight: Number\n}\n```\n\n### renderDefs(config)\n\nRender definitions of background and shadow gradients\n\n```js\n{\n  // width of your chart\n  width: Number,\n  // height of your chart\n  height: Number,\n  // first color of background gradient\n  backgroundGradientFrom: String,\n  // first color opacity of background gradient (0 - 1.0)\n  backgroundGradientFromOpacity: Number,\n  // second color of background gradient\n  backgroundGradientTo: String,\n  // second color opacity of background gradient (0 - 1.0)\n  backgroundGradientToOpacity: Number,\n}\n```\n\n## Compilation\n\nFor production use, the package is automatically compiled after installation, so that you can just install it with `npm` and use it out-of-the-box.\n\nTo transpile TypeScript into JavaScript for development purposes, you can use either run `npm run build` to compile once, or `npm run dev` to start compilation in watch mode, which will recompile the files on change.\n\n## More information\n\nThis library is built on top of the following open-source projects:\n\n- react-native-svg (https://github.com/react-native-community/react-native-svg)\n- paths-js (https://github.com/andreaferretti/paths-js)\n- react-native-calendar-heatmap (https://github.com/ayooby/react-native-calendar-heatmap)\n\n## Contribute\n\nSee the [contribution guide](contributing.md) and join [the contributors](https://github.com/indiespirit/react-native-chart-kit/graphs/contributors)!\n","funding_links":["https://github.com/sponsors/hermanya"],"categories":["TypeScript","HarmonyOS","UI Components"],"sub_categories":["Windows Manager","Charts \u0026 Data Visualization"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Findiespirit%2Freact-native-chart-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Findiespirit%2Freact-native-chart-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Findiespirit%2Freact-native-chart-kit/lists"}