patternfly
Chart styles documentation
Now that a lot of chart styles have reference to CSS variables, we've had the question of where the vars are defined and how to use/reference them. Seems like this could be a good addition to the charts section on the website - similar to (or part of) the "about" page?
@mcoker I know this is a fairly old issue -- do you think this is something we still want to address with v6? Not going to ask you to remember your original thoughts exactly 😅 but the about charts page is a little behind anyways, so I could use this issue as a jumping off point if there's anything specific we feel is missing.
For example, would adding a dev section to this page be helpful? Not sure how much we need to share outside of pointing to https://www.npmjs.com/package/@patternfly/react-charts?activeTab=code, outlining how to import/use that in general, or anything else?
Yeah! I think my original goal with this was a couple of things:
- Call out that chart styles work out of the box without any additional CSS imports, except for dark theme (covered in the next bullet)
- To get the correct dark theme chart styles, you need to import the charts stylesheet from core. The path for that stylesheet is at
@patternfly/patternfly/patternfly-charts.css. This is probably the main thing worth mentioning. - Just reading what I wrote in this issue, I guess I was also thinking it might be useful to note that in order to use any of the charts vars/tokens, you would also need to import
@patternfly/patternfly/patternfly-charts.css. An example why you might want to use a chart var would be if you built your own thing and wanted to match any of the styles in charts, you would need to import that stylesheet, then you could use CSS vars like--pf-v6-chart-global--danger--Color--100or--pf-v6-chart-donut--threshold--warning--Coloror--pf-v6-chart-global--FontSize--sm
@mcoker AH perfect. This is helpful, thanks! I'll move forward with these details