{"id":4224,"url":"https://github.com/xanderdeseyn/react-native-responsive-linechart","last_synced_at":"2026-03-12T06:38:41.627Z","repository":{"id":38856431,"uuid":"127194640","full_name":"xanderdeseyn/react-native-responsive-linechart","owner":"xanderdeseyn","description":"A customizable and responsive line or area chart for react-native","archived":false,"fork":false,"pushed_at":"2023-01-06T13:43:04.000Z","size":5968,"stargazers_count":209,"open_issues_count":70,"forks_count":54,"subscribers_count":3,"default_branch":"master","last_synced_at":"2026-02-22T08:10:02.698Z","etag":null,"topics":["area-chart","linechart","responsive","svg"],"latest_commit_sha":null,"homepage":"https://react-native-responsive-linechart.surge.sh","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/xanderdeseyn.png","metadata":{"files":{"readme":"README-v2.2.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-28T20:28:07.000Z","updated_at":"2025-08-25T23:11:23.000Z","dependencies_parsed_at":"2023-02-06T04:32:06.300Z","dependency_job_id":null,"html_url":"https://github.com/xanderdeseyn/react-native-responsive-linechart","commit_stats":null,"previous_names":["n1ghtly/react-native-responsive-linechart"],"tags_count":31,"template":false,"template_full_name":null,"purl":"pkg:github/xanderdeseyn/react-native-responsive-linechart","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xanderdeseyn%2Freact-native-responsive-linechart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xanderdeseyn%2Freact-native-responsive-linechart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xanderdeseyn%2Freact-native-responsive-linechart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xanderdeseyn%2Freact-native-responsive-linechart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xanderdeseyn","download_url":"https://codeload.github.com/xanderdeseyn/react-native-responsive-linechart/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xanderdeseyn%2Freact-native-responsive-linechart/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30417517,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-12T04:41:02.746Z","status":"ssl_error","status_checked_at":"2026-03-12T04:40:12.571Z","response_time":114,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["area-chart","linechart","responsive","svg"],"created_at":"2024-01-05T20:17:05.026Z","updated_at":"2026-03-12T06:38:41.612Z","avatar_url":"https://github.com/xanderdeseyn.png","language":"TypeScript","funding_links":[],"categories":["Components"],"sub_categories":["UI"],"readme":"# react-native-responsive-linechart\n\n\u003ca href=\"https://badge.fury.io/js/react-native-responsive-linechart\"\u003e\u003cimg src=\"https://badge.fury.io/js/react-native-responsive-linechart.svg\" alt=\"npm version\" height=\"18\"\u003e\u003c/a\u003e\n\n## Breaking changes in v2\n\nTooltip and dataPoint (previously valuePoint) config is changed, check the default config for the correct keys.\n\n## Installation\n\n```js\nnpm install react-native-responsive-linechart\n```\n\n```js\nimport LineChart from \"react-native-responsive-linechart\";\n```\n\nNo need to set an explicit width and height! Percentages or `flex` work just fine.\n\n## Quick example\n\n\u003ca href=\"url\"\u003e\u003cimg src=\"https://i.imgur.com/alSOfYb.png\" align=\"middle\" width=\"500\" \u003e\u003c/a\u003e\n\n```jsx\n\u003cLineChart style={{ flex: 1 }} config={config} data={data} /\u003e;\n\nconst data = [-10, -15, 40, 19, 32, 15, 52, 55, 20, 60, 78, 42, 56];\nconst config = {\n  line: {\n    visible: true,\n    strokeWidth: 1,\n    strokeColor: \"#54a0ff\"\n  },\n  area: {\n    visible: false\n  },\n  tooltip: {\n    visible: true,\n    labelFontSize: 10\n  },\n  grid: {\n    stepSize: 10000\n  },\n  yAxis: {\n    labelColor: \"#54a0ff\"\n  },\n  insetY: 10,\n  insetX: 10\n};\n```\n\n## Reference\n\n### LineChart\n\n| Property | Type   | Description                    | Example               |\n| -------- | ------ | ------------------------------ | --------------------- |\n| data     | array  | Your numeric data              | [10, 22, 13, 15, 25]  |\n| xLabels  | array  | Optional labels for the X axis | ['jan', 'feb', 'mar'] |\n| config   | object | Chart configuration object     | See next section      |\n\n### Default Config\n\n```js\nconst defaultConfig = {\n  grid: {\n    visible: true,\n    backgroundColor: \"#fff\",\n    strokeWidth: 1,\n    strokeColor: \"#ededed\",\n    stepSize: 15\n  },\n  line: {\n    visible: true,\n    strokeWidth: 1,\n    strokeColor: \"#333\"\n  },\n  area: {\n    visible: true,\n    gradientFrom: \"#be2ddd\",\n    gradientFromOpacity: 1,\n    gradientTo: \"#e056fd\",\n    gradientToOpacity: 0.4\n  },\n  yAxis: {\n    visible: true,\n    labelFontSize: 12,\n    labelColor: \"#777\",\n    labelFormatter: v =\u003e String(v)\n  },\n  xAxis: {\n    visible: false,\n    labelFontSize: 12,\n    labelColor: \"#777\"\n  },\n  tooltip: {\n    visible: false,\n    labelFormatter: v =\u003e v.toFixed(2),\n    lineColor: \"#777\",\n    lineWidth: 1,\n    circleColor: \"#fff\",\n    circleBorderColor: \"#fff\",\n    circleBorderWidth: 1,\n    boxColor: \"#fff\",\n    boxBorderWidth: 1,\n    boxBorderColor: \"#777\",\n    boxBorderRadius: 5,\n    boxPaddingY: 0,\n    boxPaddingX: 0,\n    labelColor: \"black\",\n    labelFontSize: 10\n  },\n  dataPoint: {\n    visible: false,\n    color: \"#777\",\n    radius: 5,\n    label: {\n      visible: false,\n      labelFontSize: 12,\n      labelColor: \"#777\",\n      labelFormatter: v =\u003e String(v),\n      marginBottom: 25\n    }\n  },\n  insetY: 0,\n  insetX: 0,\n  interpolation: \"none\",\n  backgroundColor: \"#fff\",\n  backgroundOpacity: 1\n};\n```\n\n## More examples\n\n\u003ca href=\"url\"\u003e\u003cimg src=\"https://i.imgur.com/fKWp3eZ.png\" align=\"middle\" width=\"500\" \u003e\u003c/a\u003e\n\n```jsx\nconst data = [-10, -15, 40, 60, 78, 42, 56];\nconst labels = [\"jan\", \"feb\", \"mar\", \"apr\", \"may\", \"jun\", \"jul\"];\nconst config = {\n  line: {\n    visible: true,\n    strokeWidth: 2,\n    strokeColor: \"#341f97\"\n  },\n  area: {\n    visible: false\n  },\n  yAxis: {\n    visible: true,\n    labelFormatter: v =\u003e String(v) + \" °C\"\n  },\n  xAxis: {\n    visible: true\n  },\n  grid: {\n    stepSize: 15\n  },\n  dataPoint: {\n    visible: true,\n    color: \"#777\",\n    radius: 3,\n    label: { visible: true, marginBottom: 25 }\n  },\n  insetY: 10\n};\n```\n\n\u003ca href=\"url\"\u003e\u003cimg src=\"https://i.imgur.com/gFdef89.png\" align=\"middle\" width=\"500\" \u003e\u003c/a\u003e\n\n```jsx\nconst data4 = [-10, -15, 40, 19, 32, 15, 52, 55, 20, 60, 78, 42, 56];\nconst config4 = {\n  interpolation: \"spline\",\n  line: { strokeColor: \"#be2ddd\", strokeWidth: 2 },\n  yAxis: { visible: false },\n  grid: { visible: false }\n};\n```\n\n\u003ca href=\"url\"\u003e\u003cimg src=\"https://i.imgur.com/rWaUzB3.png\" align=\"middle\" width=\"500\" \u003e\u003c/a\u003e\n\n````jsx\nconst data5 = [-10, -15, 40, 19, 32, 15, 52, 55, 20, 60, 78, 42, 56];\nconst config5 = {\n  interpolation: 'spline',\n  area: {\n    gradientFrom: '#10ac84',\n    gradientFromOpacity: 1,\n    gradientTo: '#10ac84',\n    gradientToOpacity: 0.4,\n  },\n  line: {\n    visible: false\n  }\n}```\n\nNote: the cards around the charts are not included.\n````\n\n\u003ca href=\"http://imgur.com/gallery/KdTuviJ\"\u003eImage for maintainers\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxanderdeseyn%2Freact-native-responsive-linechart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxanderdeseyn%2Freact-native-responsive-linechart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxanderdeseyn%2Freact-native-responsive-linechart/lists"}