{"id":30523960,"url":"https://github.com/yikenman/use-echarts-react","last_synced_at":"2025-10-30T00:38:36.680Z","repository":{"id":279443976,"uuid":"938833145","full_name":"yikenman/use-echarts-react","owner":"yikenman","description":"A modernized React hook for integrating ECharts.","archived":false,"fork":false,"pushed_at":"2025-08-15T08:43:19.000Z","size":148,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-20T01:59:30.879Z","etag":null,"topics":["echarts","echarts-for-react","react","react-hooks"],"latest_commit_sha":null,"homepage":"","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/yikenman.png","metadata":{"files":{"readme":"README.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-02-25T15:18:06.000Z","updated_at":"2025-08-15T08:42:55.000Z","dependencies_parsed_at":"2025-02-25T16:28:02.819Z","dependency_job_id":"df5192cf-e846-4e81-884b-fb5bb2d35ca3","html_url":"https://github.com/yikenman/use-echarts-react","commit_stats":null,"previous_names":["yikenman/use-echarts-react"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/yikenman/use-echarts-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yikenman%2Fuse-echarts-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yikenman%2Fuse-echarts-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yikenman%2Fuse-echarts-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yikenman%2Fuse-echarts-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yikenman","download_url":"https://codeload.github.com/yikenman/use-echarts-react/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yikenman%2Fuse-echarts-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":281725952,"owners_count":26550920,"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","status":"online","status_checked_at":"2025-10-29T02:00:06.901Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["echarts","echarts-for-react","react","react-hooks"],"created_at":"2025-08-26T20:52:15.211Z","updated_at":"2025-10-30T00:38:36.649Z","avatar_url":"https://github.com/yikenman.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# use-echarts-react\n\n[![NPM Version](https://img.shields.io/npm/v/use-echarts-react)\n](https://www.npmjs.com/package/use-echarts-react)\n![NPM License](https://img.shields.io/npm/l/use-echarts-react)\n[![codecov](https://codecov.io/gh/yikenman/use-echarts-react/graph/badge.svg?token=43EG2T8LKS)](https://codecov.io/gh/yikenman/use-echarts-react)\n\nA modernized React hook for integrating ECharts.\n\n---\n\n## Features\n\n- **Hook** based modern APIs.\n- Supports **tree-shakeable** ECharts usages by default.\n- Supports **declarative**/**imperative** mode for different scenarios.\n- Supports **deep comparison**.\n- Supports all **ECharts** APIs.\n- Works with **SSR**.\n- Written in **Typescript**.\n- 100% test coverage.\n\n\n## Install\n\n```bash\n$ npm install --save use-echarts-react echarts\n```\n\n## Basic Usage\n\n```tsx\nimport { LineChart } from 'echarts/charts';\nimport { GridComponent, LegendComponent, TitleComponent, TooltipComponent } from 'echarts/components';\nimport { use } from 'echarts/core';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { useECharts, useEChartsEvent } from \"use-echarts-react\";\n\n// Tree-shakeable ECharts usage, see https://echarts.apache.org/handbook/en/basics/import/#shrinking-bundle-size.\nuse([\n  CanvasRenderer,\n  GridComponent,\n  LineChart,\n  TooltipComponent,\n  TitleComponent,\n  LegendComponent\n]);\n\nconst App = () =\u003e {\n  const ref = useECharts\u003cHTMLDivElement\u003e({\n    // echarts instance option\n    xAxis: {\n      type: 'category',\n      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']\n    },\n    yAxis: {\n      type: 'value'\n    },\n    series: [\n      {\n        data: [150, 230, 224, 218, 135, 147, 260],\n        type: 'line'\n      }\n    ]\n  }, {\n    width: 100,\n    height: 100\n  });\n\n  // binding event\n  useEChartsEvent(ref, 'click', () =\u003e {\n    console.log('triggered');\n  });\n\n  return (\n    \u003cdiv ref={ref}\u003e\u003c/div\u003e\n  );\n};\n```\n\n## APIs\n\n### useECharts(option, initOpts)\n\nConfigures the ECharts instance with the provided options.\n\n#### `option` (Optional)\n\nThis parameter is used for configuring the ECharts instance with the options that would be passed to the `setOption` method. It can include the following:\n\n|Property|Description|\n|--|--|\n| **... ECharts Options** | Accepts all options from `setOption` method. Refers [ECharts Configuration Items Manual](https://echarts.apache.org/en/option.html#title) for all available options. |\n| **`group`** | Specifies the `group` of the ECharts instance and automatically connects the chart group. See [echartsInstance.group](https://echarts.apache.org/zh/api.html#echartsInstance.group). |\n| **`loading`** | Controls the loading state of the ECharts instance. See [showLoading method](https://echarts.apache.org/zh/api.html#echartsInstance.showLoading). |\n\n\n#### `initOpts` (Optional)\n\nThis is used to initialize the ECharts instance. It can only be set once during the initialization and includes the following options:\n\n|Property|Description|\n|--|--|\n| **`theme`**| The theme for the ECharts instance, see [echarts.init - theme](https://echarts.apache.org/en/api.html#echarts.init). |\n| **`locale`**| The locale for the ECharts instance, see [echarts.init - locale](https://echarts.apache.org/en/api.html#echarts.init). |\n| **`renderer`**| The renderer for ECharts (canvas or SVG), see [echarts.init - renderer](https://echarts.apache.org/en/api.html#echarts.init). |\n| **`devicePixelRatio`**| The pixel ratio for the instance, see [echarts.init - devicePixelRatio](https://echarts.apache.org/en/api.html#echarts.init). |\n| **`useDirtyRect`**| Whether to use the dirty rectangle technique to optimize performance, see [echarts.init - useDirtyRect](https://echarts.apache.org/en/api.html#echarts.init). |\n| **`useCoarsePointer`**| Whether to use a coarse pointer for event handling, see [echarts.init - useCoarsePointer](https://echarts.apache.org/en/api.html#echarts.init). |\n| **`pointerSize`**| The size of the pointer for interactions, see [echarts.init - pointerSize](https://echarts.apache.org/en/api.html#echarts.init). |\n| **`ssr`**| Enable server-side rendering for the instance, see [echarts.init - ssr](https://echarts.apache.org/en/api.html#echarts.init). |\n| **`width`**| The width of the chart, see [echarts.init - width](https://echarts.apache.org/en/api.html#echarts.init). |\n| **`height`**| The height of the chart, see [echarts.init - height](https://echarts.apache.org/en/api.html#echarts.init). |\n| **`resize`**| Automatically resizes the chart when the bound element’s size changes. Defaults to `false`. |\n| **`imperativeMode`**| Enables direct control of the ECharts instance. When enabled, the `option` parameter is ignored. Defaults to `false`. |\n| **`deepCompare`**| Enables deep comparison for `option` before updating the instance. Defaults to `false`. |\n\n#### Returns\n\nThe hook returns a **React ref** object used to bind the DOM element. This ref contains two properties:\n\n- **`current`**: The current DOM element that the ref is bound to.\n- **`chart`**: The current created ECharts instance with restricted APIs. If `imperativeMode` is enabled, this will return the complete ECharts instance, allowing direct interaction with all methods of ECharts.\n\n\n### useEChartsEvent(ref, event, handler) / useEChartsEvent(ref, event, query, handler)\n\nAutomatically handling event binding to ECharts instance.\n\n#### `ref` (Required)\nThe return value of the `useECharts` hook.\n\n#### `event` (Required)\nThe event to listen for. This is the same as the `eventName` parameter in the [ECharts `echartsInstance.on` method](https://echarts.apache.org/en/api.html#echartsInstance.on).\n\n#### `query` (Optional)\nThis is the query parameter for the event listener. It is the same as the `query` parameter in the [ECharts `echartsInstance.on` method](https://echarts.apache.org/en/api.html#echartsInstance.on).\n\n#### `handler` (Required)\nSame as the `handler` parameter in the [ECharts `echartsInstance.on` method](https://echarts.apache.org/en/api.html#echartsInstance.on).\n\n## Declarative / Imperative Mode\n\nBy default, `useECharts` will return an ECharts instance with restricted APIs like `setOption`, `on`... and user should update ECharts instance by updating the hook parameters. Also user can get a complete ECharts instance via enabling `imperativeMode`.\n\n### Declarative Mode\n\n```tsx\nimport { useECharts } from \"use-echarts-react\";\n\nconst App = () =\u003e {\n  const ref = useECharts\u003cHTMLDivElement\u003e({\n    // can only use hook parameters to update ECharts instance.\n    xAxis: {\n      type: 'category',\n      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']\n    },\n    yAxis: {\n      type: 'value'\n    },\n    series: [\n      {\n        data: [150, 230, 224, 218, 135, 147, 260],\n        type: 'line'\n      }\n    ]\n  }, {\n    width: 100,\n    height: 100\n  });\n\n  return (\n    \u003cdiv ref={ref}\u003e\u003c/div\u003e\n  );\n};\n```\n\n### Imperative Mode\n\n```tsx\nimport { useECharts } from \"use-echarts-react\";\n\nconst App = () =\u003e {\n  const ref = useECharts\u003cHTMLDivElement\u003e({\n    // option will be ignored under imperative mode.\n  }, {\n    imperativeMode: true,\n    width: 100,\n    height: 100\n  });\n\n  return (\n    \u003cdiv\u003e\n      \u003cbutton\n        onClick={() =\u003e {\n          // `setOption` is available to call now.\n          ref.chart?.setOption({\n            xAxis: {\n              type: 'category',\n              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']\n            },\n            yAxis: {\n              type: 'value'\n            },\n            series: [\n              {\n                data: [150, 230, 224, 218, 135, 147, 260],\n                type: 'line',\n              }\n            ]\n          });\n        }}\n      \u003e\n        update\n      \u003c/button\u003e\n      \u003cdiv ref={ref}\u003e\u003c/div\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n\n## About SSR\n\n`useEcharts` supports using [`ECharts SSR`](https://echarts.apache.org/handbook/en/how-to/cross-platform/server/) option. But this is not as the same as `React SSR`. `ECharts SSR` is used for returning SVG string instead of manipulating a dom element.\n\n```tsx\nimport { useECharts } from \"use-echarts-react\";\n\nconst App = () =\u003e {\n  const ref = useECharts\u003cHTMLDivElement\u003e({\n    xAxis: {\n      type: 'category',\n      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']\n    },\n    yAxis: {\n      type: 'value'\n    },\n    series: [\n      {\n        data: [150, 230, 224, 218, 135, 147, 260],\n        type: 'line'\n      }\n    ]\n  }, {\n    renderer: 'svg',\n    ssr: true,\n    width: 100,\n    height: 100\n  });\n\n  return (\n    \u003cdiv\n      dangerouslySetInnerHTML={{\n        __html: ref.chart?.renderToSVGString() ?? ''\n      }}\n    \u003e\u003c/div\u003e\n  );\n};\n```\n\n## License\n\nMIT License","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyikenman%2Fuse-echarts-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyikenman%2Fuse-echarts-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyikenman%2Fuse-echarts-react/lists"}