| id | Line chart | |||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| section | components | |||||||||||||||
| subsection | charts | |||||||||||||||
| propComponents |
|
|||||||||||||||
| beta | true |
import { FunctionComponent, useEffect, useRef, useState } from 'react'; import * as echarts from 'echarts'; import { LineChart } from 'echarts/charts'; import { GridComponent, TitleComponent, ToolboxComponent, TooltipComponent } from 'echarts/components'; import { SVGRenderer } from 'echarts/renderers'; import { getComputedStyleValue, getCustomTheme, Charts, ThemeColor } from '@patternfly/react-charts/echarts';
import chart_color_blue_300 from '@patternfly/react-tokens/dist/esm/chart_color_blue_300'; import chart_color_green_300 from '@patternfly/react-tokens/dist/esm/chart_color_green_300'; import chart_color_purple_300 from '@patternfly/react-tokens/dist/esm/chart_color_purple_300'; import chart_color_teal_300 from '@patternfly/react-tokens/dist/esm/chart_color_teal_300'; import chart_color_yellow_300 from '@patternfly/react-tokens/dist/esm/chart_color_yellow_300';
Note: PatternFly React charts live in its own package at @patternfly/react-charts!
The examples below are based on the Apache ECharts chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior.
This demonstrates how to create a color scale via a custom theme, which may be applied to multiple charts.