Charting library that relies on React's virtual diffing.


42450.5.0-rc.782 years ago4 years agoMinified + gzip package size for @cognite/griff-react in KB



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 cognite-community.slack.com. (Get invited to join the Slack workspace here)

Storybook & demo

Our tip-of-tree Storybook can be found on griff-master.surge.sh

Test locally

git clone https://github.com/cognitedata/griff-react
yarn storybook #starts the stories


yarn add @cognite/griff-react


npm i @cognite/griff-react

See examples in 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;
  return oldSeries.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.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.