{"id":13421948,"url":"https://github.com/esnet/react-timeseries-charts","last_synced_at":"2025-05-15T04:00:26.350Z","repository":{"id":23109463,"uuid":"26463801","full_name":"esnet/react-timeseries-charts","owner":"esnet","description":"Declarative and modular timeseries charting components for React","archived":false,"fork":false,"pushed_at":"2023-09-18T09:32:05.000Z","size":59870,"stargazers_count":874,"open_issues_count":127,"forks_count":283,"subscribers_count":38,"default_branch":"master","last_synced_at":"2025-04-15T00:49:28.794Z","etag":null,"topics":["chart","javascript","pond","react","timeseries"],"latest_commit_sha":null,"homepage":"http://software.es.net/react-timeseries-charts","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/esnet.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGES.md","contributing":"CONTRIBUTING.md","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":"2014-11-11T01:16:14.000Z","updated_at":"2025-04-10T21:05:37.000Z","dependencies_parsed_at":"2024-04-17T11:34:58.627Z","dependency_job_id":"800f9d35-3722-48df-8730-97764a4b5d5f","html_url":"https://github.com/esnet/react-timeseries-charts","commit_stats":{"total_commits":538,"total_committers":38,"mean_commits":"14.157894736842104","dds":0.6691449814126393,"last_synced_commit":"aa9c9b368100d78337b562d9e2833f2d90d9de3d"},"previous_names":[],"tags_count":45,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/esnet%2Freact-timeseries-charts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/esnet%2Freact-timeseries-charts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/esnet%2Freact-timeseries-charts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/esnet%2Freact-timeseries-charts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/esnet","download_url":"https://codeload.github.com/esnet/react-timeseries-charts/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254270640,"owners_count":22042858,"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","javascript","pond","react","timeseries"],"created_at":"2024-07-30T23:00:34.339Z","updated_at":"2025-05-15T04:00:26.321Z","avatar_url":"https://github.com/esnet.png","language":"JavaScript","funding_links":[],"categories":["UI Components","JavaScript","Demos","\u003csummary\u003eUI Components\u003c/summary\u003e","react"],"sub_categories":["Chart","Data Visualization"],"readme":"\u003cimg src=\"https://raw.githubusercontent.com/esnet/react-timeseries-charts/master/src/website/packages/charts/logo.png\" alt=\"logo\" width=\"160px\"/\u003e\n\n# React Timeseries Charts\n\n[![Build Status](https://travis-ci.org/esnet/react-timeseries-charts.svg)](https://travis-ci.org/esnet/react-timeseries-charts) [![npm version](https://badge.fury.io/js/react-timeseries-charts.svg)](https://badge.fury.io/js/react-timeseries-charts)\n\n![Zooming](https://github.com/esnet/react-timeseries-charts/blob/master/zooming.gif)\n\nThis library contains a set of modular charting components used for building flexible interactive charts. It was built for React from the ground up, specifically to visualize timeseries data and network traffic data in particular. Low level elements are constructed using d3, while higher level composability is provided by React. Charts can be stacked as rows, overlaid on top of each other, or any combination, all in a highly declarative manner.\n\nThe library is used throughout the public facing [ESnet Portal](http://my.es.net).\n\nCurrent features of the library include:\n\n * Declarative layout of charts using JSX\n * Interactivity, including pan and zoom\n * Add new chart types or overlays\n * Multiple axis, multiple rows\n * Line, area, scatter, bar and boxplot charts\n * Brushing\n * Legends\n * Overlay markers\n\nPlease browse the [examples](http://software.es.net/react-timeseries-charts) for a feel for the library.\n\nGetting started\n---------------\n\nThis charts library is intended to be installed with [npm](https://www.npmjs.com/) and the built into your project with a tool like [Webpack](https://webpack.github.io/). It expects React to be present, as well as our TimeSeries abstraction library, [pond.js](http://software.es.net/pond). More on this below. To install:\n\n    npm install react-timeseries-charts pondjs --save\n\nOnce installed, you can import the necessary components from the library:\n\n```js\nimport { Charts, ChartContainer, ChartRow, YAxis, LineChart } from \"react-timeseries-charts\";\n```\n\nThen we construct our chart in the `render()` function of our component. For a simple example we create a chart with two line charts on it, specified in JSX:\n\n```jsx\n\u003cChartContainer timeRange={series1.timerange()} width={800}\u003e\n    \u003cChartRow height=\"200\"\u003e\n        \u003cYAxis id=\"axis1\" label=\"AUD\" min={0.5} max={1.5} width=\"60\" type=\"linear\" format=\"$,.2f\"/\u003e\n        \u003cCharts\u003e\n            \u003cLineChart axis=\"axis1\" series={series1}/\u003e\n            \u003cLineChart axis=\"axis2\" series={series2}/\u003e\n        \u003c/Charts\u003e\n        \u003cYAxis id=\"axis2\" label=\"Euro\" min={0.5} max={1.5} width=\"80\" type=\"linear\" format=\"$,.2f\"/\u003e\n    \u003c/ChartRow\u003e\n\u003c/ChartContainer\u003e\n```\n\nAt the outer most layer, we add a `\u003cChartContainer\u003e` which contains our time range for the x-axis. All charts within a ChartContainer share the same x-axis. In this case we get the TimeRange from the TimeSeries itself, but you could specify one yourself. You also need to provide a width for the chart, or wrap the chart in a `\u003cResizable\u003e` component and that will inject a width for you.\n\nFor the next layer of the layout we make a `\u003cChartRow\u003e`. We can have multiple charts stacked on top of each other by using more than one row. In this case we just have one row. Each row has a specific height in the layout, so we specify that as 200px high here.\n\nNext up we want to put something in our row. Rows contain two parts:\n1. a central flexible sized area in which charts can be added and  \n2. axes on either the left or right of the central area.\n\nThis central area is surrounded in the JSX by the `\u003cCharts\u003e` tag. Each chart in this area is composited on top of each other. In this case we are adding two `\u003cLineChart\u003e`s, one for each of our timeseries. As a result they will be drawn on top of each other. (Note that as of v0.9, it is also possible to draw multiple channels of a TimeSeries as multiple line charts). For scaling each chart will reference an axis that will define the scale as well as display that scale visually as the y-axis.\n\nFinally, we specify the axes that the charts reference. These go either before or after the `\u003cCharts\u003e` group, depending on if you want the axis before (to the left) or after the charts (to the right). You can specify any number of axes on either side. For each `\u003cYAxis\u003e` you specify the `id` so that a chart can reference it, the `label` you want displayed alongside the axis and, importantly, the scale using `min` and `max`. You can also specify the `type` of the axis (`linear`, `log`, etc), a non-default `width` and the `format`.\n\nFor more details, please see the API docs.\n\nData format\n-----------\n\nThis charting library is built on the ESnet timeseries library called [pond.js](http://software.es.net/pond). Pond.js was created to provide a common representation for things like time series, time ranges, events and other structures as well as to implement common operations on those structures.\n\nFor the purpose of using the charting library, you need to create a `TimeSeries` object as your time series, which will be rendered by the chart code. Constructing a TimeSeries is pretty simple. You just need to pass it an object that contains, at a minimum, the column names as an array, and a list of points.\n\nFor example:\n\n```jsx\nimport { TimeSeries, TimeRange } from \"pondjs\";\n\nconst data = {\n    name: \"traffic\",\n    columns: [\"time\", \"in\", \"out\"],\n    points: [\n        [1400425947000, 52, 41],\n        [1400425948000, 18, 45],\n        [1400425949000, 26, 49],\n        [1400425950000, 93, 81],\n        ...\n    ]\n};\n\nconst timeseries = new TimeSeries(data);\n```\n\nGenerally `columns` must have 'time' as the first column (see the Pond.js docs for other options), and `points` is of the format:\n\n    [[time, value], [time, value], ...]\n\nNote that there are several ways to construct a TimeSeries. The above is what we call our wire format.\n\nTo specify a ChartContainer you also need to provide the time range to plot on the x-axis. This is done with a pond.js `TimeRange`. You could either get the TimeRange from the TimeSeries directly:\n\n```js\nvar timerange = timeseries.timerange()\n```\n\nOr construct a new one:\n\n```js\nvar timerange = new TimeRange([begin, end]);\n```\n\nwhere `begin` and `end` are times (Javascript Dates, usually).\n\nHow you manage this is application specific. We often have pages where the current time range being shown is kept in the `this.state` of the component and is updated during pan and zoom, both via interaction with the charts or via other controls on the page.\n\nDeveloping\n----------\n\nThe repo contains the examples website. This is very helpful in developing new functionality. Within a cloned repo, you first need to run:\n\n    yarn install\n\nThis will install the development dependencies into your node_modules directory.\n\nYou can then start up the test server:\n\n    npm run start-website\n\nThen, point your browser to:\n\n[http://localhost:3000/](http://localhost:3000/)\n\nBefore submitting a Pull Request, run:\n    \n    npm run build\n    \nIn case you want to demonstrate an issue with the library via an example, you can use [CodeSandBox](https://codesandbox.io/s/).\n\nA simple BarChart example has been built here - [https://codesandbox.io/s/3j0540mo5](https://codesandbox.io/s/3j0540mo5)\n\nSupported Browsers\n-------\n\nThe most recent release of Firefox or Chrome is recommended.\n\nThanks\n-------\n\n\u003ca href=\"https://www.chromaticqa.com/\"\u003e\u003cimg src=\"https://cdn-images-1.medium.com/letterbox/147/36/50/50/1*oHHjTjInDOBxIuYHDY2gFA.png?source=logoAvatar-d7276495b101---37816ec27d7a\" width=\"120\"/\u003e\u003c/a\u003e\n\nThanks to [Chromatic](https://www.chromaticqa.com/) for providing the visual testing platform that help us catch unexpected changes on time.\n\nLicense\n-------\n\nThis code is distributed under a BSD style license, see the LICENSE file for complete information.\n\nCopyright\n---------\n\nESnet's React Timeseries Charts, Copyright (c) 2015 - present, The Regents of the University of California, through Lawrence Berkeley National Laboratory (subject to receipt of any required approvals from the U.S. Dept. of Energy). All rights reserved.\n\nIf you have questions about your rights to use or distribute this software, please contact Berkeley Lab's Technology Transfer Department at TTD@lbl.gov.\n\nNOTICE. This software is owned by the U.S. Department of Energy. As such, the U.S. Government has been granted for itself and others acting on its behalf a paid-up, nonexclusive, irrevocable, worldwide license in the Software to reproduce, prepare derivative works, and perform publicly and display publicly. Beginning five (5) years after the date permission to assert copyright is obtained from the U.S. Department of Energy, and subject to any subsequent five (5) year renewals, the U.S. Government is granted for itself and others acting on its behalf a paid-up, nonexclusive, irrevocable, worldwide license in the Software to reproduce, prepare derivative works, distribute copies to the public, perform publicly and display publicly, and to permit others to do so.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fesnet%2Freact-timeseries-charts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fesnet%2Freact-timeseries-charts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fesnet%2Freact-timeseries-charts/lists"}