Info alert:Beta feature
This beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the PatternFly forum or via Slack. To learn more about the process, visit our about page or our Beta components page on GitHub.
Introduction
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.
Examples
Teal color with responsive container and toolbox
This demonstrates how to import ToolboxComponent for use with ECharts
Custom theme
This demonstrates how to create a color scale via a custom theme, which may be applied to multiple charts.
Props
Charts
| Name | Type | Default | Description |
|---|---|---|---|
| className | string | The className prop specifies a class name that will be applied to outermost element | |
| height | number | Specify height explicitly, in pixels | |
| id | string | The id prop specifies an ID that will be applied to outermost element. | |
| isLegendTooltip | boolean | Flag indicating to use the legend tooltip (default). This may be overridden by the `option.tooltip` property. | |
| isSvgRenderer | boolean | Flag indicating to use the SVG renderer (default). This may be overridden by the `opts.renderer` property. | |
| nodeSelector | string | This creates a Mutation Observer to watch the given DOM selector. When the pf-v6-theme-dark selector is added or removed, this component will be notified to update its computed theme styles. However, if the dark theme is not updated dynamically (e.g., via a toggle), there is no need to add this Mutation Observer. Note: Don't provide ".pf-v6-theme-dark" as the node selector as it won't exist in the page for light theme. The underlying querySelectorAll() function needs to find the element the dark theme selector will be added to. See https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Locating_DOM_elements_using_selectors | |
| option | ChartsOptionProps | ECharts uses this object to configure its properties; for example, series, title, and tooltip See https://echarts.apache.org/en/option.html | |
| opts | EChartsInitOpts | Optional chart configuration See https://echarts.apache.org/en/api.html#echarts.init | |
| theme | any | The theme prop specifies a theme to use for determining styles and layout properties for a component. Any styles or props defined in theme may be overwritten by props specified on the component instance. See https://echarts.apache.org/handbook/en/concepts/style/#theme | |
| themeColor | string | Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc. Note: Not compatible with theme prop | |
| width | number | Specify width explicitly, in pixels |
ChartsOptionProps
| Name | Type | Default | Description |
|---|---|---|---|
| angleAxis | AngleAxisOption | AngleAxisOption[] | The angle axis in Polar Coordinate -- see https://echarts.apache.org/en/option.html#angleAxis | |
| animation | boolean | Whether to enable animation -- see https://echarts.apache.org/en/option.html#animation | |
| animationDelay | number | Delay before updating the first animation -- see https://echarts.apache.org/en/option.html#animationDelay | |
| animationDelayUpdate | number | Delay before updating animation -- see https://echarts.apache.org/en/option.html#animationDelayUpdate | |
| animationDuration | number | Duration of the first animation -- see https://echarts.apache.org/en/option.html#animationDuration | |
| animationDurationUpdate | number | Time for animation to complete -- see https://echarts.apache.org/en/option.html#animationDurationUpdate | |
| animationEasing | string | Easing method used for the first animation -- see https://echarts.apache.org/en/option.html#animationEasing | |
| animationEasingUpdate | string | Easing method used for animation -- see https://echarts.apache.org/en/option.html#animationEasingUpdate | |
| animationThreshold | number | Whether to set graphic number threshold to animation -- see https://echarts.apache.org/en/option.html#animationThreshold | |
| aria | AriaOption | The W3C has developed the WAI-ARIA, the Accessible Rich Internet Applications Suite, which is dedicated to making web content and web applications accessible -- see https://echarts.apache.org/en/option.html#aria | |
| axisPointer | AxisPointerOption | AxisPointerOption[] | This is the global configurations of axisPointer -- see https://echarts.apache.org/en/option.html#axisPointer | |
| backgroundColor | string | Background color - see https://echarts.apache.org/en/option.html#backgroundColor | |
| blendMode | string | Sets the type of compositing operation to apply when drawing a new shape -- see https://echarts.apache.org/en/option.html#blendMode | |
| brush | BrushOption | BrushOption[] | Brush is an area-selecting component -- see https://echarts.apache.org/en/option.html#brush | |
| calendar | CalendarOption | CalendarOption[] | Calendar coordinates -- see https://echarts.apache.org/en/option.html#calendar | |
| color | string[] | The color list of palette -- see https://echarts.apache.org/en/option.html#color | |
| darkMode | boolean | 'auto' | ECharts will automatically detect it via backgroundColor by default and adjust the text color accordingly - see https://echarts.apache.org/en/option.html#darkMode | |
| dataset | DatasetOption | DatasetOption[] | Dataset brings convenience in data management separated with styles and enables data reuse by different series -- see https://echarts.apache.org/en/option.html#dataset | |
| dataZoom | DataZoomComponentOption | DataZoomComponentOption[] | Data zoom component is used for zooming a specific area -- see https://echarts.apache.org/en/option.html#dataZoom | |
| geo | GeoOption | GeoOption[] | ECharts will automatically detect it via backgroundColor by default and adjust the text color accordingly -- see https://echarts.apache.org/en/option.html#darkMode Geographic coordinate system component -- see https://echarts.apache.org/en/option.html#geo | |
| graphic | GraphicComponentLooseOption | GraphicComponentLooseOption[] | Graphic component enables creating graphic elements in ECharts -- see https://echarts.apache.org/en/option.html#graphic | |
| grid | GridOption | GridOption[] | Drawing grid in rectangular coordinate -- see https://echarts.apache.org/en/option.html#grid | |
| hoverLayerThreshold | number | When the number of element of the whole chart is larger than hoverLayerThreshold, a separate hover layer is used to render hovered elements -- see https://echarts.apache.org/en/option.html#hoverLayerThreshold | |
| legend | LegendComponentOption | LegendComponentOption[] | Legend component -- see https://echarts.apache.org/en/option.html#legend | |
| media | Object | See Responsive Mobile-End for details -- see https://echarts.apache.org/en/option.html#media | |
| options | EChartsOption[] | Option array used in timeline -- see https://echarts.apache.org/en/option.html#options | |
| parallel | ParallelCoordinateSystemOption | ParallelCoordinateSystemOption[] | Parallel Coordinates is a common way of visualizing high-dimensional geometry and analyzing multivariate data -- see https://echarts.apache.org/en/option.html#parallel | |
| parallelAxis | Object | This component is the coordinate axis for parallel coordinate -- see https://echarts.apache.org/en/option.html#parallelAxis | |
| polar | PolarOption | PolarOption[] | Polar coordinate can be used in scatter and line chart -- see https://echarts.apache.org/en/option.html#polar | |
| radar | RadarOption | RadarOption[] | Coordinate for radar charts -- see https://echarts.apache.org/en/option.html#radar | |
| radiusAxis | RadiusAxisOption | RadiusAxisOption[] | Radial axis of polar coordinate -- see https://echarts.apache.org/en/option.html#radiusAxis | |
| series | Object | Properties for various chart types -- see https://echarts.apache.org/en/option.html#series | |
| singleAxis | SingleAxisOption | SingleAxisOption[] | An axis with a single dimension -- see https://echarts.apache.org/en/option.html#singleAxis | |
| stateAnimation | Object | Animation configurations of state switchment -- see https://echarts.apache.org/en/option.html#stateAnimation | |
| timeline | TimelineOption | Object | Timeline component -- see https://echarts.apache.org/en/option.html#timeline | |
| title | TitleOption | TitleOption[] | Title component, including main title and subtitle -- see https://echarts.apache.org/en/option.html#title | |
| toolbox | ToolboxComponentOption | ToolboxComponentOption[] | A group of utility tools -- see https://echarts.apache.org/en/option.html#toolbox | |
| tooltip | TooltipOptionProps | TooltipOptionProps[] | Tooltip component -- see https://echarts.apache.org/en/option.html#tooltip | |
| useUTC | boolean | Whether to use UTC in display -- see https://echarts.apache.org/en/option.html#useUTC | |
| visualMap | VisualMapComponentOption | VisualMapComponentOption[] | Visual map is a type of component for visual encoding -- see https://echarts.apache.org/en/option.html#visualMap | |
| xAxis | XAXisOption | XAXisOption[] | The x-axis in cartesian(rectangular) coordinate -- see https://echarts.apache.org/en/option.html#xAxis | |
| yAxis | YAXisOption | YAXisOption[] | The y-axis in cartesian(rectangular) coordinate -- see https://echarts.apache.org/en/option.html#yAxis |
TooltipOptionProps
| Name | Type | Default | Description |
|---|---|---|---|
| alwaysShowContent | boolean | Whether to show tooltip content all the time -- see https://echarts.apache.org/en/option.html#tooltip.alwaysShowContent | |
| appendTo | string | HTMLElement | Function | Which DOM element to append the tooltip to -- see https://echarts.apache.org/en/option.html#tooltip.appendTo | |
| axisPointer | Object | Configuration item for axisPointer -- see https://echarts.apache.org/en/option.html#tooltip.axisPointer | |
| backgroundColor | string | The background color of tooltip's floating layer -- see https://echarts.apache.org/en/option.html#tooltip.backgroundColor | |
| borderColor | string | The border color of tooltip's floating layer -- see https://echarts.apache.org/en/option.html#tooltip.borderColor | |
| borderWidth | number | The border width of tooltip's floating layer -- see https://echarts.apache.org/en/option.html#tooltip.borderWidth | |
| className | string | Specify the classes for the tooltip root DOM -- see https://echarts.apache.org/en/option.html#tooltip.className | |
| confine | boolean | Whether confine tooltip content in the view rect of chart instance -- see https://echarts.apache.org/en/option.html#tooltip.confine | |
| destinationLabel | string | The destination label shown in the tooltip -- for Sankey only | |
| enterable | boolean | Whether mouse is allowed to enter the floating layer of tooltip -- see https://echarts.apache.org/en/option.html#tooltip.enterable | |
| extraCssText | string | Extra CSS style for floating layer -- see https://echarts.apache.org/en/option.html#tooltip.extraCssText | |
| formatter | string | Function | The content formatter of tooltip's floating layer -- see https://echarts.apache.org/en/option.html#tooltip.formatter | |
| hideDelay | number | Delay time for hiding tooltip -- see https://echarts.apache.org/en/option.html#tooltip.hideDelay | |
| order | string | Tooltip order for multiple series -- see https://echarts.apache.org/en/option.html#tooltip.order | |
| padding | number | The floating layer of tooltip space around content -- see https://echarts.apache.org/en/option.html#tooltip.padding | |
| position | string[] | The position of the tooltip's floating layer -- see https://echarts.apache.org/en/option.html#tooltip.position | |
| renderMode | string | Render mode for tooltip -- see https://echarts.apache.org/en/option.html#tooltip.renderMode | |
| show | boolean | Whether to show the tooltip component -- see https://echarts.apache.org/en/option.html#tooltip.show | |
| showContent | boolean | Whether to show the tooltip floating layer -- see https://echarts.apache.org/en/option.html#tooltip.showContent | |
| showDelay | number | Delay time for showing tooltip -- see https://echarts.apache.org/en/option.html#tooltip.showDelay | |
| sourceLabel | string | The source label shown in the tooltip -- for Sankey only | |
| textStyle | Object | The text style of tooltip's floating layer -- see https://echarts.apache.org/en/option.html#tooltip.textStyle | |
| transitionDuration | number | The transition duration of tooltip's animation, in seconds -- see https://echarts.apache.org/en/option.html#tooltip.transitionDuration | |
| trigger | string | Type of triggering -- see https://echarts.apache.org/en/option.html#tooltip.trigger | |
| triggerOn | 'mousemove' | 'click' | 'mousemove|click' | 'none' | Conditions to trigger tooltip -- see https://echarts.apache.org/en/option.html#tooltip.triggerOn | |
| valueFormatter | string | Callback function for formatting the value section in tooltip -- see https://echarts.apache.org/en/option.html#tooltip.valueFormatter |
