Skip to content
High performance charting library for time series data
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook Export ScalerContext as a top-level API item (#252) Feb 18, 2019
scripts Save the git commit before yarn publish runs (#273) Mar 26, 2019
src Support having no Series (#312) May 9, 2019
stories Support having no Series (#312) May 9, 2019
.clang-format (Re-)Introduce Typescript to griff-react (#263) (#274) (#278) Mar 29, 2019
.cognite-git.json Remove alex from default reviewers (#299) Apr 26, 2019
.eslintignore adding eslint and prettier support May 11, 2018
.eslintrc.json adding eslint and prettier support May 11, 2018
.gitignore (Re-)Introduce Typescript to griff-react (#263) (#274) (#278) Mar 29, 2019
.prettierignore Address issues found in the 0.2.0 migration (#64) Jun 4, 2018
.prettierrc Linting fix Jul 17, 2018
CNAME Create CNAME Aug 29, 2018
CODEOWNERS Add Kirien to owners and reviewers (#269) Mar 25, 2019 First. Dec 4, 2017
Jenkinsfile Increase the heap size for storybook builds (#284) Mar 31, 2019
LICENSE Update (#316) Jun 12, 2019
_config.yml Set theme jekyll-theme-slate Aug 29, 2018
babel.config.js (Re-)Introduce Typescript to griff-react (#263) (#274) (#278) Mar 29, 2019 Add code of conduct (#234) Jan 18, 2019
jest.config.js (Re-)Introduce Typescript to griff-react (#263) (#274) (#278) Mar 29, 2019
rollup.config.js (Re-)Introduce Typescript to griff-react (#263) (#274) (#278) Mar 29, 2019
tslint.json (Re-)Introduce Typescript to griff-react (#263) (#274) (#278) Mar 29, 2019


High-performance charting of time series with dynamic data in mind. Using the power of React to render, with event-handling and maths by d3.

griff-react introduces the concept of dynamic data loading for displaying complex time series. You provide a loader function which is in charge of fetching the data given input parameters. For instance, if the current domain is 1 year, you might want to fetch daily aggregates instead of the raw process values.


Join us on Slack at (Get invited to join the Slack workspace here)

Storybook & demo

Our tip-of-tree Storybook can be found on

Test locally

git clone
yarn start #starts the demo
yarn storybook #starts the stories


yarn add @cognite/griff-react


npm i @cognite/griff-react

See examples in demo/src and stories/index.js



The outermost component in the hierarchy. The DataProvider is in charge of handling the data for all the other components. It uses React's new context API to expose the properties sent.

DataProvider.propTypes = {
  xDomain: PropTypes.arrayOf(PropTypes.number).isRequired,
  updateInterval: PropTypes.number,
  yAccessor: PropTypes.func,
  xAccessor: PropTypes.func,
  yAxisWidth: PropTypes.number,
  pointsPerSeries: PropTypes.number,
  children: PropTypes.node.isRequired,
  defaultLoader: PropTypes.func,
  series: seriesPropType.isRequired,

The series prop type is

export const singleSeriePropType = PropTypes.shape({
  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
  color: PropTypes.string,
  hidden: PropTypes.bool,
  strokeWidth: PropTypes.number,
  drawPoints: PropTypes.bool,
  loader: PropTypes.func,
  step: PropTypes.bool,
  xAccessor: PropTypes.func,
  yAccessor: PropTypes.func,
  yDomain: PropTypes.arrayOf(PropTypes.number.isRequired),

The data loader

The thing that separates this library with other libraries is the concept of the data loader. The data loader is a function that gets called by the DataProvider with information about the current state of the chart as well as the reason why it's called. The different reasons are

MOUNTED, // First render of the chart
INTERVAL, // If you specify an update interval, it will be called every n seconds
NEW_LOADER, // The loader function changed
NEW_DOMAIN, // The outer domain changed,
NEW_SUBDOMAIN, // The user zoomed to a new subdomain.
UPDATE_POINTS_PER_SERIES, // The pointsPerSeries prop has changed

The simplest loader simply delivers static data and would look like this:

const randomData = () => {
  // generate random data
  return data;

const loader = ({ id, oldSeries, reason }) => {
  if (reason === 'MOUNTED') {
    // Get data from somewhere, the DataProvider has mounted
    return data;

The loader will override the series if same keys are provided properties sent to the DataProvider..


Active development happens on the master branch -- changes here will be published as a prerelease of the N+1 release. As of this writing, master will eventually become the 0.3.0 release, so its version in package.json is 0.3.0-0.

When it is time cut the 0.3.0 release, a 0.3 branch will be created, and package.json's version field will have the prerelease portion removed. Then master's package.json will be given a version of 0.4.0-0.

Changes to older versions will need to be merged into release branches as well as the master branch, unless it is a specific fix, relevant to only that version.


To publish versions, run yarn release. This will determine the correct version number, publish the release, and then push the new tag to GitHub.

You can’t perform that action at this time.