{"id":13421929,"url":"https://github.com/jscharting/jscharting-react","last_synced_at":"2025-07-30T21:32:49.518Z","repository":{"id":35046827,"uuid":"158273591","full_name":"jscharting/jscharting-react","owner":"jscharting","description":"Official JSCharting React Plugin \u0026 Examples","archived":false,"fork":false,"pushed_at":"2023-03-01T16:04:30.000Z","size":2186,"stargazers_count":18,"open_issues_count":14,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-20T07:34:05.508Z","etag":null,"topics":["chart","jscharting","react","reactjs"],"latest_commit_sha":null,"homepage":"https://jscharting.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jscharting.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","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":"2018-11-19T18:42:22.000Z","updated_at":"2024-06-07T17:48:52.000Z","dependencies_parsed_at":"2024-06-19T00:22:53.356Z","dependency_job_id":"96a48e11-ee80-4f12-8b61-0e46a5de94ed","html_url":"https://github.com/jscharting/jscharting-react","commit_stats":{"total_commits":34,"total_committers":5,"mean_commits":6.8,"dds":"0.32352941176470584","last_synced_commit":"338ebb7ec389c342ad625f63c2746cdbd6467f87"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jscharting%2Fjscharting-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jscharting%2Fjscharting-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jscharting%2Fjscharting-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jscharting%2Fjscharting-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jscharting","download_url":"https://codeload.github.com/jscharting/jscharting-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228192341,"owners_count":17882756,"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":["chart","jscharting","react","reactjs"],"created_at":"2024-07-30T23:00:34.090Z","updated_at":"2024-12-04T21:14:20.120Z","avatar_url":"https://github.com/jscharting.png","language":"JavaScript","readme":"\u003cp align=\"center\"\u003e\n    \u003cbr /\u003e\n   \u003ca href=\"https://jscharting.com\"\u003e\u003cimg src=\"https://jscharting.com/images/jsc-react-logo.svg\" width=\"400\" alt=\"JSCharting for React\"/\u003e\u003c/a\u003e\u003cbr/\u003e\n   JavaScript data visualization for ReactJS \n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://travis-ci.org/jscharting/jscharting-react\"\u003e\u003cimg src=\"https://img.shields.io/travis/jscharting/jscharting-react.svg?branch=master\" alt=\"Builds\"\u003e\u003c/a\u003e\n\u003ca href=\"https://david-dm.org/jscharting/jscharting-react\"\u003e\u003cimg alt=\"David\" src=\"https://img.shields.io/david/jscharting/jscharting-react\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/jscharting-react\"\u003e\u003cimg alt=\"npm version\" src=\"https://img.shields.io/npm/v/jscharting-react.svg\"\u003e\u003c/a\u003e\n\u003cimg alt=\"code style\" src=\"https://img.shields.io/badge/code_style-prettier-ff69b4.svg\"\u003e\n\u003ca href=\"https://twitter.com/jscharting/\"\u003e\u003cimg alt=\"Twitter\" src=\"https://img.shields.io/twitter/url?style=social\u0026url=https%3A%2F%2Ftwitter.com%2Fjscharting%2F\"\u003e\u003c/a\u003e\n\u003cbr /\u003e\n\u003c/p\u003e\n\u003cbr /\u003e\n\n**JSCharting** is a JavaScript data visualization library offering seamless usage with React across all devices and platforms. Every JSCharting license includes a full suite of 150+ chart types including standards such as pie charts, line charts, donut and bar charts. In addition, advanced chart types including Gantt charts, JavaScript Org Charts, interactive charts for stock and finance, seamless grid and calendar charts, JavaScript maps, and micro charts all for no additional charge. JSCharting has all the features you need and many you don't yet know you want.\n\nExample Charts: \n[Chart Types](https://jscharting.com/examples/chart-types/)\n| [Feature Examples](https://jscharting.com/examples/chart-features/)\n\n# Official JSCharting plugin for ReactJS\nA react wrapper to use [JSCharting](https://jscharting.com/) charting library as a react chart component.\n## Table of Contents\n\n1. [Install](#install)\n    1. [Run Examples](#run-examples)\n2. [Usage](#usage)\n    1. [Simple Example](#simple-example)\n    2. [JSCharting with Typescript](#jscharting-with-typescript)\n    3. [Upating Charts](#updating-charts)\n        1. [Using setState()](#using-setstate)\n        2. [Bypassing setState()](#bypass-setstate---updating-chart-directly)\n3. [Chart resources](#chart-resources)\n4. [Getting a chart reference](#getting-a-chart-reference)\n5. [JSCLabel Component](#jsclabel-component)\n6. [JSCGrid Component](#jscgrid-component)\n\n\n\n### Install\n\nInstall the jscharting-react plugin.\n\n```console\nnpm i -D jscharting-react\n```\n\n#### Run Examples\nClone the github repo locally. Example charts are located in the `/examples` folder.\n\nTo view the examples you can run the webpack dev server: localhost:8080\n\n```console\nnpm run start-examples\n```\n\nOr build the project manually.\n\n```console\nnpm run build-examples\n```\n\n\n### Usage\n\n#### Simple example\nThis example shows how you can use the `JSCharting` component of the `jscharting-react` module to make a bar chart.\n\n```jsx \nimport React from 'react';\nimport { JSCharting } from 'jscharting-react';\n\nconst config = {\n    type: 'horizontal column',\n    series: [\n        {\n            points: [\n                { x: 'A', y: 50 },\n                { x: 'B', y: 30 },\n                { x: 'C', y: 50 }\n            ]\n        }\n    ]\n};\n\nconst divStyle = {\n\tmaxWidth: '700px',\n\theight: '400px',\n\tmargin: '0px auto'\n};\n\nexport default class SimpleChartComponent extends React.Component {\n    render() {\n        return (\n            \u003cdiv style={divStyle}\u003e\u003cJSCharting options={config} /\u003e\u003c/div\u003e\n        );\n    }\n}\n\n```\n\nThis line chart example binds the chart to the components state. With this setup you can call the \ncomponent `setState()` function to update the chart. See the [Updating Chart](#updating-charts) section \nfor more information on using the `mutable` option. \n\n```jsx\nimport React from 'react';\nimport { JSCharting } from 'jscharting-react';\n\nconst config = {\n    type: 'line',\n    series: [\n        {\n            points: [\n                { x: 'A', y: 50 },\n                { x: 'B', y: 30 },\n                { x: 'C', y: 50 }\n            ]\n        }\n    ]\n};\n\nexport default class SimpleChartComponent extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            options: config, \n            mutable: false\n        };\n    }\n    render() {\n        return (\n            \u003cdiv\u003e\u003cJSCharting options={this.state.options} mutable={this.state.mutable} /\u003e\u003c/div\u003e\n        );\n    }\n}\n```\n\n\n\n#### JSCharting with TypeScript\n\nThe following area chart example demonstrates how you can use the JSCharting declarations for code completion in TypeScript (.tsx) files.\n```tsx\nimport * as React from 'react';\nimport { JSC, JSCharting } from 'jscharting-react';\n\nconst config: JSC.JSCChartConfig = {\n    type: 'area',\n    series: [\n        {\n            name: '2020 Sales',\n            points: [\n                { name: 'Jan', y: 196 },\n                { name: 'Feb', y: 178 },\n                { name: 'Mar', y: 169 },\n            ]\n        }\n    ]\n}\nexport default class typeScriptComponent extends React.Component {\n    render() {\n        return (\n            \u003cdiv\u003e\u003cJSCharting options={config} /\u003e\u003c/div\u003e\n        );\n    }\n}\n```\nYou can check out the radar example in the `examples/` react application which uses Typescript and the declarations file.\n\n#### JSCharting Component Options\nThese configurable options are available with the `JSCharting` component.\n\n| Parameter | Type |  Description |\n| --------- | :----: | ----------- |\n| `options` | object | JSCharting chart configuration object. Please refer to the [API documentation](https://jscharting.com/documentation/#node=Home.API.json.Chart). |\n| `mutable` | boolean | (Optional) When set to true, `chart.options()` is called with the updated props instead of recreating the chart object. \n| `callback` | function | (Optional) Function that is called when the chart is finished rendering. The first argument of the callback function is a reference to the created chart.|\n| `ignoreStateUpdate` | boolean | (Optional) `false` by default. When `true`, the chart will ignore updates applied when setState() is called. This is useful when you want to update the chart directly and use `setState()` for other elements of the component. |\n| `className` | string | (Optional) Applies the class name to the chart container div element. It allows controlling chart size and layout with external CSS. |\n\n\n#### Updating charts\n\nThere are a couple ways to update live charts. \n\n##### Using setState()\n\nThe `setState()` chart updates operate in two modes. When the component option ` mutable` is true, only new options set \nthrough the `setState()` function are passed to the chart using chart.options(). When `mutable` is false,  setState will \nreset the chart with a new instance. \n\nCharts with `mutable == true` option perform better and allow charts to animate changes. Only new options that are changing \nneed to be passed to the chart. You can animate chart updates using this more.\n\nUsing `mutable == false` is sometimes useful when a chart must be drastically modified. In this mode, all options should be\n available in the state object for a new chart instance to use.\n\nSee [animating series and points](https://jscharting.com/tutorials/types/js-series-point-animation-chart/) for more information.\n\n```jsx \nexport default class setStateUpdateComponent extends React.Component {\nconstructor(props) {\n        super(props);\n        this.state = {\n            mutable: true,\n            options: {\n                series: [\n                    {\n                        name: 'Purchases',\n                        points: randomPoints()\n                    }\n                ]\n            }\n        };\n        this.updateData = this.updateData.bind(this);\n    }\n    updateData() {\n        this.setState({\n            options: {\n                series: [\n                    {\n                        name: 'Purchases',\n                        points: randomPoints()\n                    }\n                ]\n            }\n        });\n    }\n    render() {\n        return (\n            \u003cdiv style={divStyle}\u003e\n                \u003cJSCharting options={this.state.options} mutable={this.state.mutable} /\u003e\n                \u003cbutton onClick={this.updateData}\u003eUpdate Data\u003c/button\u003e\n            \u003c/div\u003e\n        );\n    }\n}\n```\n\n##### Bypass setState() - Updating chart directly\n\nJSCharting has a rich API for interacting with chart elements programatically. this approach is more flexible and can \nupdate the chart more efficiently when performance is a priority. Charts can also be decoupled from setState updates \nand managed independently.\n\nSet the `ignoreStateUpdate` option to true when you  want to use `setState()` for other purposes but not affect the chart itself.\n\nSee [getting a chart reference](#getting-a-chart-reference). Once a chart reference is available, you can update chart options as needed with code such as:\n\n```js\nchart.series().points(p =\u003e p.y \u003e 50).options({ color: 'red' });\n```\n\nThis line will make all points on a chart with y values greater than 50 red. Another example:\n\n```js\nchart.series(0).points(0).options({ y: 100 });\n```\n\nThis selects the first point in the first series and changes the point's y value to 100.\n\nIn contrast, the `setState()` method with `mutable==true` can only call `chart.options()`.\n\n```jsx \nexport default class directUpdateComponent extends React.Component {\nconstructor(props) {\n        super(props);\n        this.state = {\n            mutable: true,\n            options: {\n                series: [\n                    {\n                        name: 'Purchases',\n                        points: randomPoints()\n                    }\n                ]\n            }\n        };\n        this.chart = React.createRef();\n        this.updateData = this.updateData.bind(this);\n    }\n    updateData() {\n        const chart = this.chart.current \u0026\u0026 this.chart.current.instance;\n        if(chart){\n            chart.series('Purchases').options({points: randomPoints()})\n        }\n    }\n    render() {\n        return (\n            \u003cdiv\u003e\n                \u003cJSCharting ref={this.chart} options={this.state.options} mutable={this.state.mutable} /\u003e\n                \u003cbutton onClick={this.updateData}\u003eUpdate Data\u003c/button\u003e\n            \u003c/div\u003e\n        );\n    }\n}\n```\n\n### Chart resources\nThe JSCharting library includes resources (modules, mapping data, polyfills, icons library) that load automatically \nwhen they are needed. The examples webpack build copies these resources to the `./dist/jsc/` folder. \nThe examples app component `examples/src/components/app.component.jsx` file calls the `JSC.defaults()` function to set `baseUrl` option with this path globally in \nits constructor. All subsequent charts will be aware of the location of these resources. \n\n```jsx\nimport { JSC } from 'jscharting-react';\nJSC.defaults({ baseUrl: 'dist/jsc', debug:true });\n```\n\n**Note:** If the chart does not find the resources path, it will download them from a CDN. \nSetting `debug:true` in the `JSC.defaults()` function during development is recommended as it will alert you when the \nCDN fallback is used. It is recommended to use a local copy of resources in production.\n\n### Getting a chart reference\n\nYou can get a chart instance using the `React.createRef` method:\n```jsx \nexport default class LiveDataLineComponent extends React.Component {\n    constructor(props) {\n        super(props);\n        this.chart = React.createRef();\n    }\n    render() {\n        return (\n            \u003cdiv style={divStyle}\u003e\n                \u003cJSCharting ref={this.chart} options={config} /\u003e\n            \u003c/div\u003e\n        );\n    }\n}\n```\n\nYou can also store it when a chart callback function is executed.\n\n```jsx \nexport default class LiveDataLineComponent extends React.Component {\n    constructor(props) {\n        super(props);\n        this.chartCallback = this.chartCallback.bind(this);\n    }\n    chartCallback(chart){\n        this.chart = chart;\n    }\n    componentDidMount() {\n        // Using the chart reference. \n        this.chart \u0026\u0026 \n            this.chart.series.add({ name: 'S1', points: [{ x: 5, y: 10 }, { x: 5, y: 10 }] });\n    }\n    render() {\n        return (\n            \u003cdiv style={divStyle}\u003e\n                \u003cJSCharting options={config} callback={this.chartCallback} /\u003e\n            \u003c/div\u003e\n        );\n    }\n}\n```\n\n\n### JSCLabel Component\nThis plugin also contains an implementation of the `JSCLabel` component for react. \nIt can be used to create very efficient microchart SVG images in your react projects. \nHere's a simple example.\n\n```jsx\n\nimport { JSCLabel } from 'jscharting-react';\n\nexport default class MicroChartComponent extends React.Component {\n    render() {\n        const data = [5,2,3,5,1];\n        return (\n            \u003cdiv\u003e\n                \u003cJSCLabel options={`\u003cchart arealine data=${data} width=200 height=50\u003e`} /\u003e\n            \u003c/div\u003e\n        );\n    }\n}\n\n```\n\nSee the [microcharts tutorial](https://jscharting.com/tutorials/types/js-microcharts/) for configuration syntax and more information.\n\n### JSCGrid Component\nThe `JSCGrid` data grid component is also included. You can use it to to create data grids from JSON arrays.\nHere's a data grid example.\n\n```jsx\n\nimport React from 'react';\nimport { JSCGrid } from 'jscharting-react';\n\nexport default class DataGridComponent extends React.Component {\n\tconstructor(props) {\n\t\tsuper(props);\n\n\t\tthis.state = {\n\t\t\toptions: {\n\t\t\t\tdata: [\n\t\t\t\t\t['Art', 5, 10],\n\t\t\t\t\t['Greg', 3, 6],\n\t\t\t\t\t['Olivia', 11, 8],\n\t\t\t\t\t['Steve', 11, 4],\n\t\t\t\t\t['Anna', 3, 8]\n\t\t\t\t],\n\t\t\t\tcolumns: [\n\t\t\t\t\t{ header: 'Name' },\n\t\t\t\t\t{ header: 'Value One' },\n\t\t\t\t\t{ header: 'Value Two' },\n\t\t\t\t\t{ header: 'Sum', value: '{%1+%2}' }\n\t\t\t\t]\n\t\t\t}\n\t\t};\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t\u003cJSCGrid options={this.state.options} /\u003e\n\t\t);\n\t}\n}\n\n```\n\nThe available options for the data grid component are.\n\n| Parameter | Type |  Description |\n| --------- | :----: | ----------- |\n| `options` | object | JSCGrid configuration object. Please refer to the [API documentation](https://jscharting.com/documentation/#node=Home.API.json.Types.grid). |\n| `mutable` | boolean | (Optional) When set to true, `grid.options()` is called with the updated props instead of recreating the grid instance. \n| `callback` | function | (Optional) Function that is called when the grid is finished rendering. The first argument of the callback function is a reference to the created grid.|\n| `className` | string | (Optional) Applies the class name to the grid container div element. It allows controlling grid size and layout with external CSS. |\n\nSee the [data grid tutorial](https://jscharting.com/tutorials/types/js-data-grid/) for configuration syntax and more information.\n\n\n","funding_links":[],"categories":["UI Components"],"sub_categories":["Chart"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjscharting%2Fjscharting-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjscharting%2Fjscharting-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjscharting%2Fjscharting-react/lists"}