{"id":28092575,"url":"https://github.com/fundkis/reactchart","last_synced_at":"2025-08-17T03:42:15.401Z","repository":{"id":57348090,"uuid":"66011113","full_name":"fundkis/reactchart","owner":"fundkis","description":"Fund KIS React based chart library","archived":false,"fork":false,"pushed_at":"2017-02-21T16:30:15.000Z","size":1684,"stargazers_count":6,"open_issues_count":0,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-08-09T14:51:20.712Z","etag":null,"topics":["area-chart","chart","charting-library","pie-chart","react","react-charts","svg","svg-chart","timeseries"],"latest_commit_sha":null,"homepage":"https://fundkis.com/lab/react-chart","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/fundkis.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-08-18T16:01:38.000Z","updated_at":"2025-06-01T12:04:38.000Z","dependencies_parsed_at":"2022-08-28T03:01:49.708Z","dependency_job_id":null,"html_url":"https://github.com/fundkis/reactchart","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/fundkis/reactchart","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fundkis%2Freactchart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fundkis%2Freactchart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fundkis%2Freactchart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fundkis%2Freactchart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fundkis","download_url":"https://codeload.github.com/fundkis/reactchart/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fundkis%2Freactchart/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269787303,"owners_count":24475712,"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-08-10T02:00:08.965Z","response_time":71,"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":["area-chart","chart","charting-library","pie-chart","react","react-charts","svg","svg-chart","timeseries"],"created_at":"2025-05-13T13:20:48.988Z","updated_at":"2025-08-17T03:42:15.350Z","avatar_url":"https://github.com/fundkis.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Fund KIS' immutable React-based charts library\n\nThis is a work of [Fund KIS](http://fundkis.com/lab/react-chart) to \neasily produce quality charts.\n\nThose graphics are produce in the [SVG](https://www.w3.org/Graphics/SVG/)\nformat.\n\nMore exemples are available at [the Fund KIS github page](https://fundkis.github.io/reactchart).\n\n## Dependencies\n\nThis library is based on [React](http://facebook.github.io/react/)\nand [Freezer](https://github.com/arqex/freezer).\n\n## Installation\n\nUsing ```npm``` and the npm registry,\n```\nnpm install reactchart\n``` \nIf you wish to use directly the sources:\n\n###### using ```git```:\nyou'll need to clone the repo\n```\ngit clone git@github.com:fundkis/reactchart.git\n```\nin some place ```node``` can reach (either locally in your\n*node_modules* folder or in the ```NODE_PATH``` folder, if\nset), then you'll need to delete the ```.git``` folder.\n\n###### Using ```npm```:\n```\nnpm install git+ssh://git@github.com/fundkis/reactchart.git\n```\n\n## Usage\n\nLet's start with a minimal example:\n\n```\nlet React = require('react');\nlet Chart = require('reactchart');\n\nlet props = {\n\twidth: 600, // px\n    height: 300, // px\n    data: [{\n    \tseries: [\n        \t{x: 0, y: 1},\n        \t{x: 1, y: 2},\n        \t{x: 2, y: 2},\n        \t{x: 3, y: 3},\n        \t{x: 4, y: 2.5},\n        \t{x: 5, y: 4},\n        \t{x: 6, y: 1}\n    \t]\n    }],\n    graphProps: [{color: 'blue'}]\n};\n\nclass ShowChart extends React.Component {\n\n\trender(){\n    \treturn \u003cdiv\u003e\n        \t\u003ch1\u003eMy first graph!\u003c/h2\u003e\n            \u003cChart {...props}/\u003e\n        \u003c/div\u003e;\n    }\n}\n\n```\nThe above example produces this chart:\n\n![First graph](readme_files/plain.png)\n\nThen all the subtlety consists in knowing how to use the props.\n\n### Proprieties you should know about\n\nThe very least you need to do is to provide a _width_, a _height_,\nsome _data_ and _graphProps_. The data you wish to render\nare the _series_ in the _data_ part, while the way you\nwish to see them will be in the _graphProps_ part.\n\n#### The _data_\n\nThe _data_ proprieties contains the numerical description of the\ngraphic, basically what should be shown. It is an array as one\ngraphic may contain several data.\n\n```\ndata: [{\n\tseries: [{x, y, value, label: {x, y}, tag, legend\t\t}], // the data points\n    type: 'Plain' or 'Bars' or ..., // type of graph\n    stacked: undefined or x or y, // should the data be stacked along a direction\n    ord: {\n    \taxis: 'left' or 'right', // which axis\n        type: 'number' or 'date', // type of y data\n    },\n    abs: {\n\t\taxis: 'bottom' or 'top',\n        type: 'number' or 'date'\n\t}\n}, ...\n]\n```\n##### Default settings and type of chart\n\nThe first piece of information to provide is the data points. The simplest\nform is ```{x, y}``` with the values being either a number or a date. The _label_ enables\nto print labels instead of values at the axis' corresponding tick.\n\nThe library can handle numbers and dates as input values, a date should be explicitely\ndeclared in the corresponding proprieties (_abs_ if abscissa or _ord_ if ordinate).\n\nOnce you have some data, you get to choose which type of chart will give them the best\njustice! Here are the same data, rendered by the default settings, changing the\n_type_ value. The stairs can be either _left_ or _right_.\n\n_type_       | Resulting chart                     |_type_        | Resulting chart\n:-----:      | :----:                              | :---:        | :---:\n```Bars```   |![Bars](readme_files/bar.png)        | ```yBars```  | ![yBars](readme_files/ybar.png)\n```Stairs``` | ![Stairs](readme_files/stairsR.png) | ```Stairs``` | ![Stairs](readme_files/stairsL.png)\n```Pie```    | ![Pie](readme_files/pie.png)\n\n##### Stacking\n\nIt is possible to stack values. Each stacked-declared serie will be offsetted\nso as to \"sit\" on the stack. You probably want _bar_ marks, and no line. The\n_stacked_ parameter takes a string giving the direction of the stacking:\n\n Direction | Prop | Chart |\n:---: | :--:           | :--:\nx     | `stacked: 'x'` | ![x stacked](readme_files/ystacked.png)\ny     | `stacked: 'y'` | ![y stacked](readme_files/xstacked.png)\n\n##### The axis\n\nAn axis can be a _date_  or a _number_ axis. As dates are not numbers, the library\nshows period instead of milestone, unless the period is very short.\n\n![Date abscissa](readme_files/plainTime.png)\n\nThe axis against which the data should be plotted\ncan be _left_ or _right_, _top_ of _bottom_, providing the correct\n[axis definition](https://github.com/fundkis/reactchart/#the-axis-description-axisprops).\n\n![Top and right](readme_files/revAxe.png)\n![All axis](readme_files/revAxeMul.png)\n\n#### The _graphProps_\n\nThis contains the description of how the data should be printed. When there are\nseveral values, the first value given is the default value.\n\nNote that in most browsers, an **undefined** color is equivalent to black.\n\n```\ngraphProps: [{\n\tcolor: 'black' or 'blue' or '#1F456C' or ..., // any color\n\twidth: 1, // any number\n\tfill: 'none' or 'blue' or ..., // any color or 'none'\n\tshade: 1, // any number between 0 and 1\n    dropLine: {x: false or true, y:false or true}, // draw?\n\t// mark props, explicit at this level\n\t// overwritten if present in markProps\n\t// exists for friendlyness of use\n\tmark: true or false, // print marks ?\n\tmarkColor: undefined, // any color\n\tmarkSize: 3, // \n\tmarkType: 'dot' or 'square', //\n\tonlyMarks: false, //\n\t// contains low-level description,\n\t// i.e. specific things like radius\n\t// for a dot, or anything.\n\tmarkProps: {},\n\tshader: undefined, // playing with colors\n\ttag: {\n\t\tshow: false, // show the tag\n\t\tprint: (t) =\u003e t + '', // if something special needs to be done\n\t\tfontSize: 10, // any number\n\t\tpin: true or false, // show the pin\n    \tpinColor: 'black', \n\t\tpinLength: 10, // 10 px as pin length by default\n\t\tpinAngle: 90, // direction fo pin\n\t\tpinHook: 3\n\t}\n}, ...\n]\n```\nThe details of the _marksProps_ are given at the [marks](https://github.com/fundkis/reactchart/#the-different-marks) section, \nthe _shader_ at the [shading](https://github.com/fundkis/reactchart/#playing-with-color) section.\n\n##### Basic\n\nThe basic proprieties are the color (_color_), the width of the line (_width_), the opacity of\nthe charts (_shade_) and wether or not the area under the curve should be colored (_fill_).\n\n##### dropLine\n\nThe _dropLine_ boolean is used to print the drop lines.\n\n##### The marks controller at high level\n\nA few mark controllers are available at this level of description. The most common ones:\n  - should the mark be printed? _mark_;\n  - the color of the marks: _markColor_;\n  - the type of mark: _markType_;\n  - the size of the marks: _markSize_.\n\nThe different types available are currently _dot_, _square_ and _bar_.\nNote that the size has a different meaning for different marks. For more details, see the\n[description of the marks](https://github.com/fundis/reactchart/#the-different-marks).\n\n##### shader\n\nThe _shader_ enables fine color control of the marks, it has three calculations type, see\nthe [shading section](https://github.com/fundkis/reactchart/#playing-with-color) for more\ndetails.\n\n##### Tag the data\n\nYou can tag any data point you wish. Note that tagging is a \n[complex issue](https://en.wikipedia.org/wiki/Automatic_label_placement), and it is not\nin the [FundKIS](https://fundkis.com/) TODO list to start research in this area. Thus\nlabelling is kept at it's most basic form: you describe a tag (called pin) with its\nlength, angle, and hook. The tag itself is given by a _tag_ propriety in the data point.\n\n#### The axis' description: _axisProps_\n\nReact Chart supports two possible axis for the abscissa and the ordinate: at the\ntop of the bottom of the chart for the abscissa, left or right for the ordinate.\nThus the following description:\n```\n{\n\tticks: {\n\t\tmajor: {\n        \tcolor: 'black' or 'blue' or '#F13ED5\" or..., \n            show: true or false, \n            labelColor: 'black' or 'blue' or '#F13ED5\" or...\n        },\n        minor: {\n        \tcolor: 'black' or 'blue' or '#F13ED5\" or..., \n            show: true or false, \n            labelColor: 'black' or 'blue' or '#F13ED5\" or...\n        },\n\t},\n\tgrid: {\n\t\tmajor: {\n        \tcolor: 'lightgrey' or ...,\n            show: false or true\n        },\n\t\tminor: {\n        \tcolor: 'lightgrey' or ...,\n            show: false or true\n        },\n\t},\n\tshow: true,\n\t// to force definition\n\tmin: undefined,\n\tmax: undefined,\n\ttickLabels: [], //{coord: where, label: ''}, coord in ds\n\tcolor:     'black',\n\twidth:      1,\n\tlabel:      '',\n\tempty:      false\n}\n```\nAn axis is composed of the axis line, the ticks and the grid. The ticks and the\ngrid can be _major_ or _minor_. A tick is composed of a line and a label\nplaced near it.\n\nAll of these different parts have a _color_ and a _show_ proprieties. The axis can\nbe forced to a minimum (_min_) and a maximum (_max_) value.\n\nYou can provide a _label_ to your axis, and have only a line using the _empy_ boolean.\n\n![Labelling the axis](readme_files/axisLabel.png)\n\n### The different graphics' type\n\nAs shown in [the first section](https://github.com/fundis/reactchart/#default-settings-and-type-of-chart), you have:\n  - _Plain_\n  - _Bars_\n  - _yBars_\n  - _Stairs_\n  - _Pie_\n\nStairs can be either _right_ or _left_ using the propriety _stairs_ in the\n_graphProps_ propriety.\n\n\n### The different marks\n\nAs of now, React Chart supports _dot_, _square_, _opendot_ and _opensquare_ using the _markType_ propriety.\nThe _markSize_ propriety refers to the radius of the dot and the width of the square.\n\n![Marks](readme_files/marks.png)\n\n### Playing with the colors\n\nMarks color or opacity can be evaluated and computed for each point.   \n\n### Some more playabilities (background, foreground)\n### Immutability and optimisation\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffundkis%2Freactchart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffundkis%2Freactchart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffundkis%2Freactchart/lists"}