Nocturnal Programmer's Machine
    Have ideas to improve npm?Join in the discussion! »

    TypeScript icon, indicating that this package has built-in type declarations

    6.14.11 • Public • Published


    This package provides PatternFly charting components for PatternFly 4.


    Node Environment

    This project currently supports Node Active LTS releases. Please stay current with Node Active LTS when developing patternfly-react.

    For example, to develop with Node 8, use the following:

    nvm install 8
    nvm use 8

    This project also requires a Yarn version of >=1.6.0. The latest version can be installed here.


    yarn add @patternfly/react-charts


    npm install @patternfly/react-charts --save



    It's strongly advised to use the PatternFly Base CSS in your whole project, or some components may diverge in appearance:

    import '@patternfly/react-core/dist/styles/base.css';

    Example Component Usage

    import { Area } from '@patternfly/react-charts';
    export default <Area />;
    <Area data={[{ x: 1, y: 1 }, { x: 2, y: 2 }]} />;

    All css related to each component is provided alongside it. There is no component level CSS to import.


    This project uses Gatsby. For an overview of the project structure please refer to the Gatsby documentation - Building with Components.

    A comprehensive list of components and detailed usage of each can be found on the PatternFly React Docs website You can also find how each component is meant to be used from a design perspective on the PatternFly 4 Core website.

    Note: All commands below assume you are on the root directory in this repository.


    Run to install all the dependencies

    yarn && yarn bootstrap && yarn build && yarn build:docs


    To start the site locally.

    yarn build && yarn start:pf4


    To build the site.

    yarn build:docs

    Contributing Components

    This library makes use of the babel plugin from @patternfly/react-styles to enable providing the CSS alongside the components. This removes the need for consumers to use (style|css|sass)-loaders. For any CSS not provided by core please use the StyleSheet.create utility from @patternfly/react-styles. This will prevent collisions with any consumers, and allow the CSS to be bundled with the component.


    yarn build

    Note the build scripts for this are located in the root package.json under yarn build.


    Testing is done at the root of this repo. To only run the @patternfly/react-charts tests:

    yarn test packages/react-charts


    npm i @patternfly/[email protected]





    Unpacked Size

    5.53 MB

    Total Files


    Last publish


    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar