{"id":18556750,"url":"https://github.com/coreui/coreui-react-chartjs","last_synced_at":"2025-04-10T01:31:30.840Z","repository":{"id":66177541,"uuid":"238686361","full_name":"coreui/coreui-react-chartjs","owner":"coreui","description":null,"archived":false,"fork":false,"pushed_at":"2024-03-28T11:14:58.000Z","size":880,"stargazers_count":2,"open_issues_count":7,"forks_count":3,"subscribers_count":4,"default_branch":"v3","last_synced_at":"2024-04-14T02:23:03.439Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/coreui.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}},"created_at":"2020-02-06T12:41:20.000Z","updated_at":"2023-03-15T12:51:14.000Z","dependencies_parsed_at":"2024-04-13T19:46:19.626Z","dependency_job_id":"bce59f1f-b655-4999-aa30-f50ff2819db8","html_url":"https://github.com/coreui/coreui-react-chartjs","commit_stats":{"total_commits":46,"total_committers":3,"mean_commits":"15.333333333333334","dds":0.4565217391304348,"last_synced_commit":"c6077716da130a1ba8f97346f2d98c60ea2cca3e"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coreui%2Fcoreui-react-chartjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coreui%2Fcoreui-react-chartjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coreui%2Fcoreui-react-chartjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coreui%2Fcoreui-react-chartjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/coreui","download_url":"https://codeload.github.com/coreui/coreui-react-chartjs/tar.gz/refs/heads/v3","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248140362,"owners_count":21054286,"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-11-06T21:33:09.526Z","updated_at":"2025-04-10T01:31:25.828Z","avatar_url":"https://github.com/coreui.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://coreui.io/\"\u003e\n    \u003cimg\n      src=\"https://coreui.io/images/brand/coreui-signet.svg\"\n      alt=\"CoreUI logo\"\n      width=\"200\"\n    /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch3 align=\"center\"\u003eCoreUI React.js wrapper for Chart.js\u003c/h3\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://coreui.io/react/docs/components/chart/\"\u003e\u003cstrong\u003eExplore @coreui/react-chartjs docs \u0026 examples »\u003c/strong\u003e\u003c/a\u003e\n  \u003cbr\u003e\n  \u003cbr\u003e\n  \u003ca href=\"https://github.com/coreui/coreui-react/issues/new?template=bug_report.md\"\u003eReport bug\u003c/a\u003e\n  ·\n  \u003ca href=\"https://github.com/coreui/coreui-react/issues/new?template=feature_request.md\"\u003eRequest feature\u003c/a\u003e\n  ·\n  \u003ca href=\"https://blog.coreui.io/\"\u003eBlog\u003c/a\u003e\n\u003c/p\u003e\n\n## Status\n\n[![npm package][npm-badge]][npm]\n[![NPM downloads][npm-download]][npm]\n\n[npm-badge]: https://img.shields.io/npm/v/@coreui/react-chartjs/latest?style=flat-square\n[npm]: https://www.npmjs.com/package/@coreui/react-chartjs\n[npm-download]: https://img.shields.io/npm/dm/@coreui/react-chartjs.svg?style=flat-square\n\n##### install:\n\n```bash\nnpm install @coreui/react-chartjs\n\n# or\n\nyarn add @coreui/react-chartjs\n```\n\n##### import:\n\n```jsx\nimport { CChart } from '@coreui/react-chartjs'\n```\n\nor\n\n```js\nimport {\n  CChart,\n  CChartBar,\n  CChartHorizontalBar,\n  CChartLine,\n  CChartDoughnut,\n  CChartRadar,\n  CChartPie,\n  CChartPolarArea,\n} from '@coreui/react-chartjs'\n```\n\n##### props:\n\n```js\n\n/**\n* A string of all className you want applied to the base component.\n */\nclassName?: string\n/**\n * Enables custom html based tooltips instead of standard tooltips.\n *\n * @default true\n */\ncustomTooltips?: boolean\n/**\n * The data object that is passed into the Chart.js chart (more info).\n */\ndata: ChartData | ((canvas: HTMLCanvasElement) =\u003e ChartData)\n/**\n * A fallback for when the canvas cannot be rendered. Can be used for accessible chart descriptions.\n *\n * {@link https://www.chartjs.org/docs/latest/general/accessibility.html More Info}\n */\nfallbackContent?: React.ReactNode\n/**\n * Proxy for Chart.js getDatasetAtEvent. Calls with dataset and triggering event.\n */\ngetDatasetAtEvent?: (\n  dataset: InteractionItem[],\n  event: React.MouseEvent\u003cHTMLCanvasElement\u003e,\n) =\u003e void\n/**\n * Proxy for Chart.js getElementAtEvent. Calls with single element array and triggering event.\n */\ngetElementAtEvent?: (\n  element: InteractionItem[],\n  event: React.MouseEvent\u003cHTMLCanvasElement\u003e,\n) =\u003e void\n/**\n * Proxy for Chart.js getElementsAtEvent. Calls with element array and triggering event.\n */\ngetElementsAtEvent?: (\n  elements: InteractionItem[],\n  event: React.MouseEvent\u003cHTMLCanvasElement\u003e,\n) =\u003e void\n/**\n * Height attribute applied to the rendered canvas.\n *\n * @default 150\n */\nheight?: number\n/**\n * ID attribute applied to the rendered canvas.\n */\nid?: string\n/**\n * The options object that is passed into the Chart.js chart.\n *\n * {@link https://www.chartjs.org/docs/latest/general/options.html More Info}\n */\noptions?: ChartOptions\n/**\n * The plugins array that is passed into the Chart.js chart (more info)\n *\n * {@link https://www.chartjs.org/docs/latest/developers/plugins.html More Info}\n */\nplugins?: Plugin[]\n/**\n * If true, will tear down and redraw chart on all updates.\n *\n * @default false\n */\nredraw?: boolean\n/**\n * Chart.js chart type.\n *\n * @type {'line' | 'bar' | 'radar' | 'doughnut' | 'polarArea' | 'bubble' | 'pie' | 'scatter'}\n */\ntype: ChartType\n/**\n * Width attribute applied to the rendered canvas.\n *\n * @default 300\n */\nwidth?: number\n/**\n * Put the chart into the wrapper div element.\n *\n * @default true\n */\nwrapper?: boolean\n```\n\n##### usage:\n\n```jsx\n...\nclass CoreUICharts extends Component {\n...\nrender() {\n  return (\n    \u003cCChart\n      type='line'\n      data={{\n        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],\n        datasets: [\n          {\n            label: '2019',\n            backgroundColor: 'rgba(179,181,198,0.2)',\n            borderColor: 'rgba(179,181,198,1)',\n            pointBackgroundColor: 'rgba(179,181,198,1)',\n            pointBorderColor: '#fff',\n            pointHoverBackgroundColor: '#fff',\n            pointHoverBorderColor: 'rgba(179,181,198,1)',\n            tooltipLabelColor: 'rgba(179,181,198,1)',\n            data: [65, 59, 90, 81, 56, 55, 40]\n          },\n          {\n            label: '2020',\n            backgroundColor: 'rgba(255,99,132,0.2)',\n            borderColor: 'rgba(255,99,132,1)',\n            pointBackgroundColor: 'rgba(255,99,132,1)',\n            pointBorderColor: '#fff',\n            pointHoverBackgroundColor: '#fff',\n            pointHoverBorderColor: 'rgba(255,99,132,1)',\n            tooltipLabelColor: 'rgba(255,99,132,1)',\n            data: [28, 48, 40, 19, 96, 27, 100]\n          }\n        ],\n      }}  \n      options={{\n        aspectRatio: 1.5,\n        tooltips: {\n          enabled: true\n        }\n      }}\n    /\u003e\n  )\n}\n...\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoreui%2Fcoreui-react-chartjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcoreui%2Fcoreui-react-chartjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoreui%2Fcoreui-react-chartjs/lists"}