|
2 | 2 |
|
3 | 3 | Essential rules for PatternFly Charts implementation using Victory.js and ECharts. |
4 | 4 |
|
5 | | -## Related Files |
6 | | -- [**Component Architecture**](../guidelines/component-architecture.md) - Chart component structure rules |
7 | | -- [**Performance Optimization**](../troubleshooting/performance.md) - Chart performance considerations |
8 | | - |
9 | 5 | ## Installation Rules |
10 | 6 |
|
11 | 7 | ### Required Installation |
@@ -79,16 +75,44 @@ Module not found: Can't resolve '@patternfly/react-charts' |
79 | 75 |
|
80 | 76 | ## Chart Implementation Rules |
81 | 77 |
|
| 78 | +### Best Practices |
| 79 | +
|
| 80 | +### Color families |
| 81 | +- Chart color families include |
| 82 | + - red-orange |
| 83 | + - orange |
| 84 | + - yellow |
| 85 | + - teal |
| 86 | + - green |
| 87 | + - blue |
| 88 | + - purple |
| 89 | + - black |
| 90 | +- Use the same brightness of colors first, then use other brightness |
| 91 | + - Base: 300 |
| 92 | + - Lightest: 100 |
| 93 | + - Darkest: 500 |
| 94 | + - Second-lightest: 200 |
| 95 | + - Second-darkest: 400 |
| 96 | + - Use PatternFly tokens to define your color variables |
| 97 | + - --pf-t-chart-color-[color-family]-[brightness] |
| 98 | + - example: --pf-t-chart-color-blue-300 |
| 99 | +- When selecting colors for your chart, adhere to these general rules: |
| 100 | + - Within a color family, use the base color first. Then use the other lighter and darker hues. |
| 101 | + - Some families have predetermined uses: |
| 102 | + - Blue: Use to show success. |
| 103 | + - Red-orange: Use to show failure. Do not use this family unless you're communicating failure. |
| 104 | + - Other colors: Use for neutral purposes or categories. |
| 105 | + |
82 | 106 | ### Color Rules |
83 | 107 | - ✅ **Use PatternFly chart color tokens** - For consistency with design system |
84 | 108 | - ❌ **Don't use hardcoded colors** - Use design tokens instead |
85 | 109 |
|
86 | 110 | ```jsx |
87 | 111 | // ✅ Correct - Use PatternFly color tokens |
88 | 112 | const chartColors = [ |
89 | | - 'var(--pf-t--chart--color--blue--300)', |
90 | | - 'var(--pf-t--chart--color--green--300)', |
91 | | - 'var(--pf-t--chart--color--orange--300)' |
| 113 | + 'var(--pf-t--chart--color--[color family 1]--300)', |
| 114 | + 'var(--pf-t--chart--color--[color family 2]--300)', |
| 115 | + 'var(--pf-t--chart--color--[color family 3]--300)' |
92 | 116 | ]; |
93 | 117 |
|
94 | 118 | <ChartDonut data={data} colorScale={chartColors} /> |
@@ -239,7 +263,8 @@ const LazyChart = lazy(() => import('./HeavyChart')); |
239 | 263 | ## Quick Reference |
240 | 264 | - **[PatternFly Charts README](https://github.com/patternfly/patternfly-react/tree/main/packages/react-charts#readme)** - Installation and usage |
241 | 265 | - **[Victory.js Documentation](https://formidable.com/open-source/victory/)** - Chart library documentation |
242 | | -- **[PatternFly Chart Guidelines](https://www.patternfly.org/charts/about)** - Design guidelines |
| 266 | +- **[PatternFly Chart Guidelines](https://www.patternfly.org/charts/about-charts)** - Design guidelines |
| 267 | +- **[PatternFly Chart Colors](https://www.patternfly.org/charts/colors-for-charts)** - Colors for charts |
243 | 268 |
|
244 | 269 | ## Reference Documentation |
245 | 270 |
|
|
0 commit comments