You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP
Socket
Book a DemoInstallSign in
Socket

@patternfly/react-charts

Package Overview
Dependencies
Maintainers
0
Versions
1118
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@patternfly/react-charts

This library provides a set of React chart components for use with the PatternFly reference implementation.

8.3.0
latest
prerelase
Source
npmnpm
Version published
Weekly downloads
0
Maintainers
0
Weekly downloads
 
Created
Source

@patternfly/react-charts

This package provides PatternFly charting components for [PatternFly][patternfly].

Installing

yarn add @patternfly/react-charts
yarn add victory

or

npm install @patternfly/react-charts --save
npm install victory --save

Note that Victory is now an optional peer dependency, allowing future chart libraries to be installed without including Victory dependencies and vice versa

  • You may choose to install the single "victory" package to cover all features
  • Or, install packages based on the features used in your app (e.g., "victory-core", "victory-tooltip", etc.).

Usage

Pre-requisites

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/victory';

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.

Documentation

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.

Install & run locally

Run to install all the dependencies, build and run the site locally.

yarn install && yarn start

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.

Building

yarn build

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

Testing

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

yarn test packages/react-charts

Keywords

react

FAQs

Package last updated on 22 Jul 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts