{"id":16927807,"url":"https://github.com/pearmini/g2-react","last_synced_at":"2025-06-17T05:05:51.243Z","repository":{"id":195965993,"uuid":"681548012","full_name":"pearmini/g2-react","owner":"pearmini","description":"The lightweight React component for @antv/g2.","archived":false,"fork":false,"pushed_at":"2023-10-24T09:09:27.000Z","size":20,"stargazers_count":9,"open_issues_count":4,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-25T03:07:23.096Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pearmini.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":"2023-08-22T08:50:31.000Z","updated_at":"2025-02-17T03:01:52.000Z","dependencies_parsed_at":"2025-04-11T17:43:34.799Z","dependency_job_id":"a7e1903f-97c2-44b2-b93a-5197c244211a","html_url":"https://github.com/pearmini/g2-react","commit_stats":null,"previous_names":["strawberry-vis/g2-react","berry-vis/g2-react"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/pearmini/g2-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pearmini%2Fg2-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pearmini%2Fg2-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pearmini%2Fg2-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pearmini%2Fg2-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pearmini","download_url":"https://codeload.github.com/pearmini/g2-react/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pearmini%2Fg2-react/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260294467,"owners_count":22987623,"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":[],"created_at":"2024-10-13T20:35:10.186Z","updated_at":"2025-06-17T05:05:51.218Z","avatar_url":"https://github.com/pearmini.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @berryv/g2-react\n\nThe lightweight [React](https://react.dev/) component for [@antv/g2 5.0](https://github.com/antvis/G2), which is based on the [Spec API](https://g2.antv.antgroup.com/manual/core/api).\n\n## Installing\n\n```bash\n$ npm install @berryv/g2-react\n```\n\n```jsx\nimport React from \"react\";\nimport { Chart } from \"@berryv/g2-react\";\n\nexport function Demo() {\n  return (\n    \u003cChart\n      options={{\n        type: \"interval\",\n        width: 640,\n        height: 480,\n        data: [\n          { genre: \"Sports\", sold: 275 },\n          { genre: \"Strategy\", sold: 115 },\n          { genre: \"Action\", sold: 120 },\n          { genre: \"Shooter\", sold: 350 },\n          { genre: \"Other\", sold: 150 },\n        ],\n        encode: { x: \"genre\", y: \"sold\" },\n      }}\n    /\u003e\n  );\n}\n```\n\n## API Reference\n\n| Property | Description                                                                                                     | Type                  | Default |\n| -------- | --------------------------------------------------------------------------------------------------------------- | --------------------- | ------- |\n| options  | the [options](https://g2.antv.antgroup.com/manual/core/api) for the visualization, say `chart.options(options)` | `G2options` \\| `null` | -       |\n| renderer | the [renderer](https://g.antv.antgroup.com/api/renderer/intro) of @antv/g canvas                                | `ChartOptions`        | -       |\n| style    | the style of the container                                                                                      | `CSSProperties`       | -       |\n| onInit   | the callback called after the chart instantiating                                                               | `Function`            | -       |\n| ref      | the ref for the [chart instance](https://g2.antv.antgroup.com/manual/core/chart)                                | `ChartRef`            | -       |\n\n## Examples\n\n- [Creating Chart](#creating-chart)\n- [Fetching Data](#updating-data)\n- [Handling Events](#handling-events)\n- [Customizing Component](#customizing-component)\n- [Styling Container](#styling-container)\n\n## Creating Chart\n\nFor more examples for `props.options`, see each [G2 example](https://g2.antv.antgroup.com/examples) and click the \"Spec Tab\".\n\n```js\nimport React from \"react\";\nimport { Chart } from \"@berryv/g2-react\";\nimport { Renderer } from \"@antv/g-svg\";\n\nexport function Demo() {\n  const renderer = useMemo(() =\u003e new Renderer(), []);\n  return (\n    \u003cChart\n      // Set renderer to SVG, optional.\n      renderer={renderer}\n      options={{\n        type: \"interval\",\n        autoFit: true, // Fit the container.\n        data: [\n          { genre: \"Sports\", sold: 275 },\n          { genre: \"Strategy\", sold: 115 },\n          { genre: \"Action\", sold: 120 },\n          { genre: \"Shooter\", sold: 350 },\n          { genre: \"Other\", sold: 150 },\n        ],\n        encode: { x: \"genre\", y: \"sold\" },\n      }}\n    /\u003e\n  );\n}\n```\n\n### Updating Data\n\nUsing `useMemo` to define a computed options with data as a decency, this allows rerendering chart after the data updating.\n\n```js\nimport React, { useState, useMemo } from \"react\";\nimport { Chart } from \"@berryv/g2-react\";\n\nexport function Demo() {\n  const [data, setData] = useState(null);\n\n  // The options will update after data updating.\n  const options = useMemo(\n    () =\u003e ({\n      type: \"interval\",\n      data,\n      encode: { x: \"genre\", y: \"sold\" },\n    }),\n    [data]\n  );\n\n  useEffect(() =\u003e {\n    // Mock the fetch delay.\n    setTimeout(() =\u003e {\n      // Update the data.\n      setData([\n        { genre: \"Sports\", sold: 275 },\n        { genre: \"Strategy\", sold: 115 },\n        { genre: \"Action\", sold: 120 },\n        { genre: \"Shooter\", sold: 350 },\n        { genre: \"Other\", sold: 150 },\n      ]);\n    }, 1000);\n  });\n\n  return \u003c\u003e{data === null ? \u003cp\u003eLoading...\u003c/p\u003e : \u003cChart options={options} /\u003e}\u003c/\u003e;\n}\n```\n\n### Handling Events\n\n`\u003cChart/\u003e` exposes the ref for the G2 [chart instance](https://g2.antv.antgroup.com/manual/core/chart), which can be used to handle events or get some instances, such as scale, coordinate, etc,.\n\n```js\nimport React, { useRef, useEffect } from \"react\";\nimport { ChartEvent } from \"@antv/g2\";\nimport { Chart } from \"@berryv/g2-react\";\n\nexport function Demo() {\n  const chartRef = useRef();\n\n  function onInit() {\n    const chart = chartRef.current;\n\n    // Listen input events.\n    chart.on(\"plot:mouseover\", () =\u003e {});\n\n    // Listen lifecycle events.\n    chart.on(ChartEvent.AFTER_RENDER, () =\u003e {\n      // Emit to init the state of highlight interaction.\n      chart.emit(\"element:highlight\", {\n        data: {\n          data: { genre: \"Sports\" },\n        },\n      });\n    });\n  }\n\n  return \u003cChart ref={chartRef} onInit={onInit} /\u003e;\n}\n```\n\n### Customizing Component\n\nWith the `register` API of G2, you can customize visual component and using it in options, such as customizing a triangle shape for bar chart:\n\n```js\nimport React, { useRef, useEffect } from \"react\";\nimport { register } from \"@antv/g2\";\n\n// Register a triangle shape for interval globally.\nregister(\"shape.interval.triangle\", (style, context) =\u003e {\n  const { document } = context;\n  return (P, value, defaults) =\u003e {\n    const { color: defaultColor } = defaults;\n    const [p0, p1, p2, p3] = P;\n    const pm = [(p0[0] + p1[0]) / 2, p0[1]];\n    const { color = defaultColor } = value;\n    const group = document.createElement(\"g\");\n    const polygon = document.createElement(\"polygon\", {\n      style: {\n        ...style,\n        fill: color,\n        points: [pm, p2, p3],\n      },\n    });\n    group.appendChild(polygon);\n    return group;\n  };\n});\n\nexport function Demo() {\n  return (\n    \u003cChart\n      options={{\n        type: \"interval\",\n        data: [\n          { genre: \"Sports\", sold: 275 },\n          { genre: \"Strategy\", sold: 115 },\n          { genre: \"Action\", sold: 120 },\n          { genre: \"Shooter\", sold: 350 },\n          { genre: \"Other\", sold: 150 },\n        ],\n        encode: {\n          x: \"genre\",\n          y: \"sold\",\n          shape: \"triangle\", // Use the custom shape.\n        },\n      }}\n    /\u003e\n  );\n}\n```\n\n### Styling Container\n\nDefine the css styles of the container:\n\n```js\nimport React from \"react\";\nimport { Chart } from \"@berryv/g2-react\";\n\nexport function Demo() {\n  // ...\n  return (\n    \u003cChart\n      options={{ autoFit: true }}\n      style={{\n        width: 800,\n        height: 600,\n        background: \"#eee\",\n        padding: \"1em\",\n        borderRadius: \"0.5em\",\n      }}\n    /\u003e\n  );\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpearmini%2Fg2-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpearmini%2Fg2-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpearmini%2Fg2-react/lists"}