{"id":21744543,"url":"https://github.com/indeemasoftware/dashboard","last_synced_at":"2026-05-06T12:44:24.603Z","repository":{"id":120451201,"uuid":"176024188","full_name":"IndeemaSoftware/Dashboard","owner":"IndeemaSoftware","description":"React Chart","archived":false,"fork":false,"pushed_at":"2019-03-16T23:35:29.000Z","size":303,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-18T13:08:16.047Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/IndeemaSoftware.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}},"created_at":"2019-03-16T20:59:32.000Z","updated_at":"2019-03-29T12:15:11.000Z","dependencies_parsed_at":"2023-03-15T11:15:34.211Z","dependency_job_id":null,"html_url":"https://github.com/IndeemaSoftware/Dashboard","commit_stats":{"total_commits":8,"total_committers":1,"mean_commits":8.0,"dds":0.0,"last_synced_commit":"dc0ed4df8d39a215f3c69dbf626443a956405c5f"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IndeemaSoftware%2FDashboard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IndeemaSoftware%2FDashboard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IndeemaSoftware%2FDashboard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IndeemaSoftware%2FDashboard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/IndeemaSoftware","download_url":"https://codeload.github.com/IndeemaSoftware/Dashboard/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244722655,"owners_count":20499153,"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-26T07:11:52.986Z","updated_at":"2026-05-06T12:44:24.560Z","avatar_url":"https://github.com/IndeemaSoftware.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![React Dashboard]\n\n## Introduction\n\nA project for integrating [Highcharts](https://github.com/highcharts/highcharts) into a React app, with proper React components for each Highcharts/Highstock component. Inspired by [Recharts](https://github.com/recharts/recharts), but for Highcharts, obviously.\n\n## Why React JSX Highcharts?\n\nUnlike other React Highcharts wrapper libraries, **React JSX Highcharts** is designed to be dynamic - it is optimised for *interactive* charts that need to adapt to business logic in your React application.\n\nOther Highcharts wrappers completely destroy and recreate the chart when the configuration options change, which is *very* wasteful and inefficient.\n\nReact JSX Highcharts uses a different approach. By providing React components for each Highcharts component, we can observe exactly which prop has changed and call the optimal Highcharts method behind the scenes. For example, if the `data` prop were to change on a `\u003cSeries /\u003e` component, React JSX Highcharts can follow Highcharts best practices and use the `setData` method rather than the more expensive `update`.\n\nReact JSX Highcharts also enables you to write your *own* Highcharts components, via its powerful higher order components.\n\n## Installation\n\n`npm install --save react-dashboard`\n\nYou'll need the peer dependencies too\n\n`npm install --save react react-dom prop-types highcharts@^6.0.0`\n\n## Getting started\n\nThe intention of this library is to provide a very thin abstraction of Highcharts using React components. This has been achieved by passing Highcharts configuration options as component props.\n\nIn the vast majority of cases, the name of the configuration option, and the name of the component prop are the same.\n\n#### Example\n\n`\u003cTooltip /\u003e` component\n```jsx\n\u003cTooltip padding={10} hideDelay={250} shape=\"square\" split /\u003e\n```\nThis corresponds to the Highcharts' [`tooltip`](http://api.highcharts.com/highcharts/tooltip) configuration of\n```js\ntooltip: {\n  enabled: true, // This is assumed when component is mounted\n  padding: 10,\n  hideDelay: 250,\n  shape: 'square',\n  split: true\n}\n```\nWe aim to pass all configuration options using the same name, so we use [Highcharts' documentation](http://api.highcharts.com/highcharts) to figure out how to achieve the same with React JSX Highcharts.\n\n### Note:\n\nThere are **two** exceptions to the above;\n\n#### Exception 1\n\nWhere Highcharts **events** are concerned - instead of passing `events` as an object, we use the React convention *onEventName*.\n\n#### Example\n```jsx\n\n\u003cSplineSeries id=\"my-series\" data={myData} onHide={this.handleHide} onShow={this.handleShow} /\u003e\n```\nThis would correspond to the Highcharts configuration\n```js\nseries: [{\n  type: 'spline',\n  id: 'my-series',\n  data: myData,\n  events: { hide: this.handleHide, show: this.handleShow }\n}]\n```\n\n#### Exception 2\n\n`text` configuration options are passed as a React child\n\n#### Example\n\n```jsx \n\u003cTitle\u003eSome Text Here\u003c/Title\u003e\n```\n\nThis would correspond to the Highcharts configuration\n```js\ntitle: {\n  text: 'Some Text Here'\n}\n```\n\n## Example\n\n```jsx\nrender () {\n  return (\n    \u003cHighchartsChart\u003e\n      \u003cChart /\u003e\n\n      \u003cTitle\u003eSolar Employment Growth by Sector, 2010-2016\u003c/Title\u003e\n\n      \u003cSubtitle\u003eSource: thesolarfoundation.com\u003c/Subtitle\u003e\n\n      \u003cLegend layout=\"vertical\" align=\"right\" verticalAlign=\"middle\" /\u003e\n\n      \u003cXAxis\u003e\n        \u003cXAxis.Title\u003eTime\u003c/XAxis.Title\u003e\n      \u003c/XAxis\u003e\n\n      \u003cYAxis\u003e\n        \u003cYAxis.Title\u003eNumber of employees\u003c/YAxis.Title\u003e\n        \u003cLineSeries name=\"Installation\" data={[43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]} /\u003e\n        \u003cLineSeries name=\"Manufacturing\" data={[24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]} /\u003e\n        \u003cLineSeries name=\"Sales \u0026 Distribution\" data={[11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]} /\u003e\n        \u003cLineSeries name=\"Project Development\" data={[null, null, 7988, 12169, 15112, 22452, 34400, 34227]} /\u003e\n        \u003cLineSeries name=\"Other\" data={[12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]} /\u003e\n      \u003c/YAxis\u003e\n    \u003c/HighchartsChart\u003e\n  );\n}\n\n// Provide Highcharts object for library to interact with\nexport default withHighcharts(MyComponent, Highcharts);\n```\n\n## Upgrading from 2.x to 3.x\n\nFor the vast majority of cases, **if your chart works in v2 of React JSX Highcharts it should work in v3 without any required changes**.\n\nOk, so what about the minority of cases?\n\n### Dropped React 15 support\n\nv3 is built on top of the new Context API added in [React 16.3](https://reactjs.org/blog/2018/03/29/react-v-16-3.html#official-context-api), using the fantastic [create-react-context](https://www.npmjs.com/package/create-react-context) polyfill for previous React 16 versions.\n\nWhile polyfills for React 15 exist, I want to minimise the amount of use cases supported, going forward.\n\n## Changelog\n\nAs of 3.x you are no longer required to use IDs for Axis, Series and PlotLines/Bands\n\nAs of 2.1.0 Highcharts 6 is supported\n\nAs of 2.x you are required to use the `withHighcharts` HOC to inject the Highcharts object (see below)\n\nAs of 1.2.0 React JSX Highcharts supports using [Immutable.js](https://facebook.github.io/immutable-js/) data structures as Series data.\n\n## Goals\n\nThis project aims to hide the complexity of Highcharts from the React application author, allowing the rendering of charts in a React familiar way.\n\nIt also aims to use best React and Highcharts practices where possible - for example if the `data` prop of a Series were to change React JSX Highcharts uses the [`Series.prototype.setData`](http://api.highcharts.com/highstock/Series.setData) method of Highcharts which is much less expensive than `update`.\n\nAdditionally we avoid passing large JSON configuration objects as props, as this leads to painful debugging when trying to work out why your component did or did not re-render. This also helps as an abstraction over the complexity as mentioned above.\n\n## Technical approach\n\nRather than passing around a chart object between all the components, we utilise [React's context](https://facebook.github.io/react/docs/context.html) to share the chart object around, then using [Higher Order Components](https://medium.com/@mweststrate/how-to-safely-use-react-context-b7e343eff076) (HOCs), we inject the Highcharts functions we need to the wrapped component.\n\nThere are 3 HOCs in this project, [provideChart](https://github.com/whawker/react-jsx-highcharts/blob/master/packages/react-jsx-highcharts/src/components/ChartProvider/index.js), [provideAxis](https://github.com/whawker/react-jsx-highcharts/blob/master/packages/react-jsx-highcharts/src/components/AxisProvider/index.js) and [provideSeries](https://github.com/whawker/react-jsx-highcharts/blob/master/packages/react-jsx-highcharts/src/components/SeriesProvider/index.js).\n\nIn the vast majority of cases, there is no need to use these HOCs directly - but they have been exposed anyway - they are useful if you want to create your own components with this library.\n\n## Common issues\n\n**Uncaught TypeError: Cannot read property 'chart' of undefined**\n\nYou need to use the `withHighcharts` higher order component to inject the Highcharts object. [See here](https://github.com/whawker/react-jsx-highcharts/wiki/Higher-Order-Components#withhighcharts-version-200)\n\n**Uncaught TypeError: Cannot read property 'stockChart' of undefined**\n\nAs above, or you are importing High*charts* rather than High*stock*. Change you Highcharts import to...\n```js\nimport Highcharts from 'highcharts/highstock';\n```\n\n**Highcharts error #17**\n\nYou likely need to add an extra Highcharts module to support the requested series type. This is usually `highcharts-more`.\n\n```js\nimport Highcharts from 'react-dashboard';\nimport addHighchartsMore from 'highcharts/highcharts-more';\n\naddHighchartsMore(Highcharts);\n```\n\nAlternatively it may be the Heatmap, Treemap, Sankey, [or one of these](https://github.com/highcharts/highcharts/tree/master/js/modules) extra modules.\n\n```js\nimport Highcharts from 'react-dashboard';\nimport addHeatmapModule from 'highcharts/modules/heatmap';\nimport addTreemapModule from 'highcharts/modules/treemap';\n\naddHeatmapModule(Highcharts);\naddTreemapModule(Highcharts);\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Findeemasoftware%2Fdashboard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Findeemasoftware%2Fdashboard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Findeemasoftware%2Fdashboard/lists"}