{"id":13421933,"url":"https://github.com/99ff00/react-charty","last_synced_at":"2025-04-15T09:45:06.995Z","repository":{"id":53527101,"uuid":"203268191","full_name":"99ff00/react-charty","owner":"99ff00","description":"Data Visualization Component","archived":false,"fork":false,"pushed_at":"2021-08-06T17:24:46.000Z","size":5024,"stargazers_count":71,"open_issues_count":0,"forks_count":6,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-12T05:03:02.969Z","etag":null,"topics":["animation","area","autoscale","canvas","canvas2d","chart","line","percentage","pie","react","reactjs"],"latest_commit_sha":null,"homepage":"","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/99ff00.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}},"created_at":"2019-08-20T00:07:35.000Z","updated_at":"2024-09-06T22:31:10.000Z","dependencies_parsed_at":"2022-09-21T03:14:21.937Z","dependency_job_id":null,"html_url":"https://github.com/99ff00/react-charty","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/99ff00%2Freact-charty","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/99ff00%2Freact-charty/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/99ff00%2Freact-charty/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/99ff00%2Freact-charty/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/99ff00","download_url":"https://codeload.github.com/99ff00/react-charty/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248519486,"owners_count":21117760,"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":["animation","area","autoscale","canvas","canvas2d","chart","line","percentage","pie","react","reactjs"],"created_at":"2024-07-30T23:00:34.140Z","updated_at":"2025-04-15T09:45:06.972Z","avatar_url":"https://github.com/99ff00.png","language":"JavaScript","readme":"\u003cimg src=\"https://99ff00.github.io/react-charty/charty.svg\" width=\"128\" height=\"128\" title=\"react-charty logo\" /\u003e\n\n# react-charty [![npm version](https://badge.fury.io/js/react-charty.svg)](https://badge.fury.io/js/react-charty) [![npm](https://img.shields.io/npm/dt/react-charty.svg)](https://www.npmjs.org/package/react-charty) ![MIT](https://img.shields.io/dub/l/vibe-d.svg)\n\nThis component was born from the [Telegram](https://telegram.org/) programming contest where I took one of the prize places. A big thanks to the Telegram team and all contestants.\nRead further to find usage instructions and how to customize this component.\n\nPlease check out the [Demo App](https://99ff00.github.io/react-charty/) and [Playground](https://codepen.io/99ff00/pen/qBWzBpY) for example charts and usage!\n\n## Table of contents\n- [Install](#install)\n- [Features](#features)\n- [Browsers support](#browsers-support)\n- [Usage](#usage)\n- [Theming](#theming)\n- [Props](#props)\n- [Display Data Types](#display-data-types)\n- [Using as a standalone library](#using-as-a-standalone-library)\n- [Demo App](https://99ff00.github.io/react-charty/)\n- [Playground](https://codepen.io/99ff00/pen/qBWzBpY)\n\n## Install\n\n```bash\nyarn add react-charty\n```\nor\n```bash\nnpm install react-charty --save\n```\n\n## Features\n\n- Small footprint (it's just 12KB minified and gzipped)\n- The following chart types are supported: Line, Multi Y Axis Line, Stacked Bar, Percentage, and Pie\n- Supports thousands of records (thanks to the fast Segment Tree algorithm)\n- A wide variety of supported browsers on different platforms (including mobile)\n- Theme support\n- Fancy animations\n- Zoom-in support\n- No dependencies, the core is vanilla Javascript\n- Can be used as a standalone library without React\n- Different chart types can be combined\n\n## Browsers support\n\n| \u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png\" alt=\"IE / Edge\" width=\"24px\" height=\"24px\" /\u003e\u003c/br\u003eIE 11 / Edge | \u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png\" alt=\"Firefox\" width=\"24px\" height=\"24px\" /\u003e\u003c/br\u003eFirefox | \u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png\" alt=\"Chrome\" width=\"24px\" height=\"24px\" /\u003e\u003c/br\u003eChrome |\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png\" alt=\"Safari\" width=\"24px\" height=\"24px\" /\u003e\u003c/br\u003eSafari | \u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari-ios/safari-ios_48x48.png\" alt=\"iOS Safari\" width=\"24px\" height=\"24px\" /\u003e\u003c/br\u003eiOS Safari | \u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/samsung-internet/samsung-internet_48x48.png\" alt=\"Samsung\" width=\"24px\" height=\"24px\" /\u003e\u003c/br\u003eSamsung | \u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png\" alt=\"Opera\" width=\"24px\" height=\"24px\" /\u003e\u003c/br\u003eOpera |\n| --------- | --------- | --------- | --------- | --------- | --------- | --------- |\n\n## Usage\n\nHere's an example how to get a really basic chart like the one on this screenshot below. This demo is also available in the [Playground](https://codepen.io/99ff00/pen/qBWzBpY). For more complex examples please check the [Demo App](https://99ff00.github.io/react-charty/).\n\n\u003cimg src=\"./assets/example1.png\" title=\"Minimal Example\" width=\"500\" /\u003e\n\n```jsx static\nimport React, { Component } from 'react'\nimport Charty from 'react-charty'\n\nconst MINIMAL_EXAMPLE_DATA = {\n    type: 'line',\n    data: {\n      x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25],\n      y0: [-20, 0, 20, 23, 25, 28, 40, 50, 33, 23, 14, 3, 15, 16, 18, 20, 34, 44, 30, 31, 43, 22, 15, 27, 23]\n    },\n    colors: {\n      y0: '#5FB641'\n    },\n    names: {\n      y0: 'Temperature, C°'\n    },\n    startX: 1,\n    endX: 25,\n    xAxisStep: 2,\n    showPreview: false,\n    showRangeText: false,\n    showLegendTitle: false\n  };\n\nexport default class App extends Component {\n  render () {\n    return (\n      \u003cCharty title=\"Temperature\" {...MINIMAL_EXAMPLE_DATA} /\u003e\n    )\n  }\n}\n```\n\n## Theming\n\nThe chart controls can be customized via `theme` prop. Here's an example of two themes. The `LIGHT_THEME` is hardcoded in the Charty component and used if no theme is provided.\nFor a theme switching example please check the [Demo App](https://99ff00.github.io/react-charty/). Also, please check [styles.css](./src/styles.css) for even more customization.\n\n```jsx static\nconst LIGHT_THEME = {\n  grid: { color: '#182D3B', alpha: 0.1, markerFillColor: '#fff', markerRadius: 0 },\n  legend: { background: '#fff', color: '#000' },\n  preview: { maskColor: '#E2EEF9', maskAlpha: 0.6, brushColor: '#C0D1E1', brushBorderColor: '#fff', brushBorderAlpha: 1, handleColor: '#fff' },\n  xAxis: { textColor: '#8E8E93', textAlpha: 1 },\n  yAxis: { textColor: '#8E8E93', textAlpha: 1 },\n  title: { color: '#000' },\n  localRange: { color: '#000' },\n  zoomedRange: { color: '#000' },\n  zoomText: { color: '#108BE3' },\n  zoomIcon: { fill: '#108BE3' },\n  buttons: { color: '#fff' },\n  pie: { textColor: '#fff' }\n};\n\nconst DARK_THEME = {\n  grid: { color: '#fff', alpha: 0.1, markerFillColor: '#242f3e' },\n  legend: { background: '#1c2533', color: '#fff' },\n  preview: { maskColor: '#304259', maskAlpha: 0.6, brushColor: '#56626D', brushBorderAlpha: 0, handleColor: '#fff' },\n  xAxis: { textColor: '#A3B1C2', textAlpha: 0.6 },\n  yAxis: { textColor: '#A3B1C2', textAlpha: 0.6 },\n  title: { color: '#fff' },\n  localRange: { color: '#fff' },\n  zoomedRange: { color: '#fff' },\n  zoomText: { color: '#108BE3' },\n  zoomIcon: { fill: '#108BE3' },\n  buttons: { color: '#fff' },\n  pie: { textColor: '#fff' },\n};\n```\n\n## Props\n\n| Name              | Type        | Description                                                         |\n|-------------------|-------------|---------------------------------------------------------------------|\n|`title`            |String       |The chart title.|\n|`type`             |String       |The chart type, can be one of the following values: `line`, `bar`, `percentage_area`, `stacked_bar`, `multi_yaxis`, `pie`. The default value is `line`. Feel free to check [Demo App](https://99ff00.github.io/react-charty/) to see them all in action.|\n|`data`             |Object       |Contains the data points for chart series. Every key of this object is an array of data points. The `x` array is mandatory and contains the data for x-axis while other keys represent the data points for y-axis. There could be multiple series in one chart and thus several data arrays for y-axis, for example `y`, `y0`, `y1`, `yAxis` etc. The key name can be any and is used as reference for name, color etc. The key name also defines the rendering order (alphabetically).|\n|`names`            |Object       |Contains the names for data series, referenced by key. For example, `names: { y0: 'Views', y1: 'Clicks' }`.|\n|`colors`           |Object       |Contains the colors for data series, referenced by key. For example, `colors: { y0: '#4BD964', y1: '#FE3C30' }`.|\n|`fillColors`       |Object       |Contains the fill colors for data series (only `line` type is supported for now), referenced by key. A gradient fill is also supported. For example, `fillColors: { \"y1\": \"#FE3C3011\", \"y0\": { \"type\": \"linear_gradient_v\", \"colors\": [\"#4BD964\", \"#4BD964\", \"#FFFFFF00\"] }}`.|\n|`buttonTextColor`  |Object       |Contains the colors for button caption, referenced by key.|\n|`theme`            |Object       |Contains the color theme for chart components. If omitted, the default theme will be used.|\n|`animated`         |Boolean      |Enables/disables animations and transitions, default value is `true`.|\n|`startX`           |Number       |The starting position of preview region. If not specified, the starting position of the preview region will be at 2/3 of `x` axis.|\n|`endX`             |Number       |The ending position of preview region. If not specified, the ending position of the preview region will be at the end of `x` axis.|\n|`stepX`            |Number       |The value to increase/decrease current `x` axis position when dragging or moving the chart preview region. For example, if you have X axis of type `timestamp` and you want to navigate by one day, you can set the `stepX` value to `86400000`. The default value is `1`.|\n|`showLegend`       |Boolean      |If set to `false` the legend will not appear when moving the cursor over the chart (or tapping chart area on mobile). The default value is `true`.|\n|`hideFromLegend`   |Object       |Allows to hide the series from the legend, referenced by key. For example, `hideFromLegend: { y0: true, y1: true }`|\n|`disabled`         |Object       |Switches off series, referenced by key. For example, `disabled: { y0: true }`|\n|`showLegendTitle`  |Boolean      |If set to `false` the legend title will not appear. The default value is `true`.|\n|`legendPosition`   |String       |Defines the position of legend popup and can be one of the following values: `top`, `bottom`, `cursor`. The default value is `cursor`, which means the legend popup will follow the cursor position.|\n|`showMainArea`     |Boolean      |If set to `false` the main chart area won't be visible. The default value is `true`.|\n|`showPreview`      |Boolean      |If set to `false` the chart preview won't be visible. The default value is `true`.|\n|`showBrush`        |Boolean      |If set to `false` the brush controls in preview area won't be visible. The default value is `true`.|\n|`showButtons`      |Boolean      |If set to `false` the series buttons won't be visible. Also, the buttons are hidden if there's only one series of data. The default value is `true`.|\n|`showRangeText`    |Boolean      |Show/hide current range text in top right corner. The default value is `true`.|\n|`rangeTextType`    |String       |Defines the display type of current range. It could be one of the following [DDT](#display-data-types) or can be function that accepts the `x` value of range starting and ending positions.|\n|`xAxisType`        |String       |Defines the type of `x` axis. It could be one of the following [DDT](#display-data-types) or can be function that accepts the `x` value and returns the formatted value.|\n|`yAxisType`        |String       |Defines the type of `y` axis. It could be one of the following [DDT](#display-data-types) or can be function that accepts the `y` value and returns the formatted value.|\n|`xAxisStep`        |Number       |Defines the step for `x` axis. If not specified, the step value will be calculated automatically.|\n|`onZoomIn`         |Function     |This callback is called when some point is clicked on chart. It should accept the clicked `x` position and must return `Promise` loading the next chart data. Originally, this callback was used to zoom in, i.e. display more details chart for selected `x`. But you can also use it to load any supported chart.|\n|`zoomInterval`     |Number       |By default, when zomming, the chart will try to figure out the start and the end of `x` axis. But you can also set the interval to zoom in (for example, if `x` axis is a timestamp and you want to zoom in one week, the interval would be `604800000`) and chart will put the current position in the middle of this interval.|\n|`zoomStepX`        |Number       |Same as `stepX`, but for zooming chart.|\n|`autoScale`        |Boolean      |Automatically finds the min/max `y` values and scales the chart accordingly. If this prop is set to `false`, the min/max values can be set with `minY` and `maxY` props. The default value is `true`.|\n|`minY`             |Number       |Set the minimum value for `y` axis. This property is ignored if `autoScale` is set to `true`.|\n|`maxY`             |Number       |Set the maximum value for `y` axis. This property is ignored if `autoScale` is set to `true`.|\n\n## Display Data Types\n\nCurrently the following data types are supported. If no data type is specified the chart assumes it's just an integer value.\n\n| Type              | Description                                                                       |\n|-------------------|-----------------------------------------------------------------------------------|\n|`number`           |Integer value with thousands separator, i.e. `9 189 141`|\n|`time`             |Display time in format `HH:mm`, i.e. `09:42`|\n|`date`             |Display date in format `MMM D`, i.e. `Jan 1`|\n|`shortDate`        |Same like `date`|\n|`longDate`         |Display date in format `D MMM YYYY`, i.e. `8 Jun 2003`|\n|`longDateWeekDay`  |Same like `longDate`, but prepended with week day `ddd, D MMM YYYY`, i.e. `Sun, 8 sep 2019`|\n|`float1`           |Float value with one decimal place, i.e. `45.2`|\n|`float2`           |Float value with two decimal places, i.e. `45.24`|\n\n## Using as a standalone library\n\nThe Charty component can be used as a standalone library without React, for example:\n\n```html static\n\u003chtml\u003e\n\u003chead\u003e\n  \u003cscript src=\"https://unpkg.com/react-charty\"\u003e\u003c/script\u003e\n  \u003clink rel=\"stylesheet\" href=\"https://unpkg.com/react-charty/dist/charty.min.css\"\u003e\n  ...\n  \u003cscript\u003e\n    window.addEventListener('load', function(){\n      var props = {\n        title: '...',\n        data: {\n          ...\n        }\n        ...\n      }\n      var chart = new Charty('chart1', props);\n    });\n  \u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cdiv id=\"chart1\"\u003e\u003c/div\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n","funding_links":[],"categories":["UI Components"],"sub_categories":["Chart","Data Visualization"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F99ff00%2Freact-charty","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F99ff00%2Freact-charty","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F99ff00%2Freact-charty/lists"}