Updates to the charts about page and charts colors page (#3759)

* Updates to the charts about page and charts colors page

* Update to Color-and-pattern-usage image file

* Update colors-for-charts.md

* Update colors-for-charts.md

---------

Co-authored-by: Margot <[email protected]>

packages/documentation-site/patternfly-docs/content/design-guidelines/charts/about/about.md

@@ -18,16 +18,18 @@ A **chart** visualizes data in an application. The type of chart you use will de
 ## Chart types
 <img src="./img/chart-legend.png" alt="Image displaying what chart types to use when" width="1024"/> 
 
-- [Area chart](/charts/area-chart/design-guidelines): Use to show trends over a continuous scale (usually time).
-- [Bar chart](/charts/bar-chart/design-guidelines): Use to show and compare categorical data. Can be plotted vertically or horizontally.
+- [Area chart](/charts/area-chart/design-guidelines): Use to show (potentially multiple) trends over a continuous scale (usually time).
+- [Bar chart](/charts/bar-chart/design-guidelines): Use to show and compare categories and their respective data point/value. Bar charts can be plotted vertically or horizontally. The axis that labels the bar is the category, the axis that marks the end point of the bar displays the data points/values.
   - [Stacked bar chart](/charts/stack-chart/design-guidelines): Use to show and compare categorical data of more than one variable. Can be plotted vertically or horizontally.
+  - Vertical bar charts (category on the horizontal x axis): Use to show a progression of the categories (or sequential variables). The most common bar chart. 
+  - Horizontal bar charts (category on the vertical y axis): Use to show nominal variables. Allows for more space for category labeling.
 - [Bullet chart](/charts/bullet-chart/design-guidelines): Use as an extension to the bar chart to measure data with thresholds and static ranges.
-- [Donut chart](/charts/donut-chart/design-guidelines): Use to show the relationship of a set of values to a whole, or progress completion as a percentage; best used to display data with a small number of categories (example: 2-5 categories).
+- [Donut chart](/charts/donut-chart/design-guidelines): Use to show the relationship of a set of values to a whole or to show progress completion as a percentage. Donut charts are best used to display data with a small number of categories (example: 2-5 categories). Use the middle of the chart to highlight a data point.
   - [Donut utilization](/charts/donut-utilization-chart/design-guidelines): Use to show utilization for an object as a percentage.
   - [Donut utilization with threshold](/charts/donut-utilization-chart/design-guidelines#donut-chart---utilization-with-threshold): Use to show utilization for an object as a percentage in relation to threshold values.
-- [Line chart](/charts/line-chart/design-guidelines): Use to compare several data sets, or to show data over a period of time.
-- [Pie chart](/charts/pie-chart/design-guidelines): Use to show percentages or proportional data.
-- [Sparkline](/charts/sparkline-chart/design-guidelines): Use to show how values change over time for multiple sets of data. Useful alternative to the line chart when multiple lines need to be plotted.
+- [Line chart](/charts/line-chart/design-guidelines): Use to compare several data sets or to show data changes over a period of time. Line charts work best when small changes exist within the data.
+- [Pie chart](/charts/pie-chart/design-guidelines): Use to show percentages or proportional data. Can be used to show up to five or more data points.
+- [Sparkline](/charts/sparkline-chart/design-guidelines): Use to show how values change over time for multiple sets of data. Sparkline charts offer an alternative to the line chart when multiple lines need to be plotted. Axis values are not labeled, but a tooltip can be used to display the value at a given point.
 
 ## Charts in cards
 If a chart lives in a card, the title of that chart will be placed on the header of that card instead of the chart. The rest of the chart guidelines should be followed for the chart itself.

packages/documentation-site/patternfly-docs/content/design-guidelines/styles/colors-for-charts/colors-for-charts.md

@@ -15,7 +15,7 @@ import './colors-for-charts.css';
 
 ## Chart colors
 
-Colors for charts includes a recommended set of colors proposed for bar charts, donut charts and pie charts. There are six base colors (blue to orange) that the system is built on. Each base color has its own color family, which includes lighter and darker hues of the base. These families use a monochromatic color order. They are organized in a way that increases contrast while still looking extremely visually appealing. The variation of colors will depend on the type and amount of data at hand.
+PatternFly recommends colors to use with bar charts, donut charts and pie charts. There are six base colors (blue to orange) that the chart color system is built on. Each base color has its own monochromatic color family, which includes lighter and darker hues of the base color. Each family is ordered based on increasing color contrast. The variation of colors you use will depend on the type and amount of data you’re working with.
 
 <ColorsGrid />
 
@@ -26,9 +26,9 @@ Colors for charts includes a recommended set of colors proposed for bar charts,
 <Grid hasGutter>
   <GridItem xl={6} lg={12} className="ws-chart-colors-gridtext">
     ### How it works
-    Although the system may seem complex, it is completely customizable. The idea is that you can put together your desired colors and amount of colors and the system will still sort them correctly. Here’s how the system works:
+    Although the system may seem complex, it is completely customizable. Once you choose the base colors you want to use and the total number of colors you will need, the system will still sort them correctly. 
     <br />
-    In this instance, there are only four base colors, therefore four color families. The order begins by going through each base color. Next, it alternates between the lightest and darkest values of each family. Finally, if you still need more colors, it alternates between the second lightest and second darkest colors of each family. In variable-terms: #1a-d base colors, #2a-d [color]-100/[color]-500 alternating, #3a-d [color]-500/[color]-100 alternating, #4a-d [color]-200/[color]-400 alternating, and #5a-d [color]-400/[color]-200 alternating. No matter the colors inputted, the process will remain the same.
+    For example, if you select four base colors (and therefore their four respective color families) the system will first use each base color in your chart. Once all base colors have been used, the system will select additional colors from the families you selected. The system alternates between choosing the lightest and darkest values of each family (shown in the animation). The color picking system will continue to alternate between the remaining  lightest and darkest colors of each family. In variable-terms: #1a-d base colors, #2a-d [color]-100/[color]-500 alternating, #3a-d [color]-500/[color]-100 alternating, #4a-d [color]-200/[color]-400 alternating, and #5a-d [color]-400/[color]-200 alternating. No matter which base colors you select, this process will remain the same.
   </GridItem>
   <GridItem xl={6} lg={12}>
     <img width="480px" src={theSystem} alt="Chart color system example" />
@@ -37,12 +37,28 @@ Colors for charts includes a recommended set of colors proposed for bar charts,
 
 <Divider className="ws-chart-colors-divider" />
 
+## Color and pattern usage
+
+When selecting colors for your chart, there are a few important usage considerations to keep in mind. Within a color family, use the base color before the other, lighter or darker hues. Additionally, consider other basic guidelines: 
+<br />
+* **Green family:** Use to show success
+* **Red family:** Use to show failure
+* **Other color families:** Use for neutral purposes or categories
+* **Patterns:** Use to deemphasize a section of a chart. Do not use patterns for every section of a chart. Instead, patterns should be used for a single chart portion or for one type of portion (such as for all successes) to deemphasize that section and highlight the other section, which utilizes a solid color.
+
+
+**Note:** When showing success and failure together in a chart, the base color red and green do not pass accessibility requirements. When using both red and green base colors in a single chart, add a pattern to the section that you want to deemphasize to improve the chart’s accessibility.
+
+<img src="./img/Color-and-pattern-usage.png" alt="Color and pattern usage example" width="739"/>
+
+<Divider className="ws-chart-colors-divider" />
+
 ## Use cases
 
 <Grid hasGutter>
   <GridItem xl={6} lg={12} className="ws-chart-colors-gridtext">
     ### Chart with few variables (1-7)
-    If you are dealing with data that includes six or less variables, we recommend using the base colors to represent each. For example, if you collected data on how many sales were made per product at your organization during one period of time, it could look like this if plotted using a bar chart.
+    When working with  data that includes fewer than 7 variables, we recommend corresponding each with one of the available base colors. For example, if you collected data on how many sales were made per product at your organization during a period of time, a bar chart of your data may look similar to the following image.
   </GridItem>
   <GridItem xl={6} lg={12}>
     <img width="480px" src={fewVariables} alt="Few variables examples" />
@@ -54,7 +70,9 @@ Colors for charts includes a recommended set of colors proposed for bar charts,
 <Grid hasGutter>
   <GridItem xl={6} lg={12} className="ws-chart-colors-gridtext">
     ### Chart with nested (grouped) variables
-    If you have a set of data that includes grouped variables, we recommend using the color families to represent each. Grouped variables would include a set of parents and children variables. Each group would use a color family that would be represented in the same order as the base colors are listed. So, depending on the amount of nested variables you have, the first color family would be blue, then green, cyan, etc. The colors would start over if there are more than 6 groups, returning back to the blue family. An example of this type of data would be quarterly sales broken down by geographical locations.
+    If your dataset includes grouped variables, we recommend aligning each group to a color family. When you select more than one color family, your chart will arrange the order of colors as follows: blue, green, cyan, purple, gold, orange, red, and then gray. The colors would start over if there are more than 6 groups, returning back to the blue family. 
+    <br />
+    Shown in the following image is an example of this type of chart, which includes quarterly sales data broken down by geographical locations.
   </GridItem>
   <GridItem xl={6} lg={12}>
     <img width="480px" src={nestedVariables} alt="Nested variables example" />
@@ -66,7 +84,9 @@ Colors for charts includes a recommended set of colors proposed for bar charts,
 <Grid hasGutter>
   <GridItem xl={6} lg={12} className="ws-chart-colors-gridtext">
     ### Chart with many variables (>7)
-    If the set of data includes more than six variables, we recommend applying the multichromatic order system, which uses all of the colors in the color system, to the data. This includes a mix of base colors and colors from their family. An example of this type of data would be the cost of living expenses during a period of time.
+    If the set of data includes more than 7 variables, we recommend applying a multichromatic order system, which includes all of the colors in the color system.
+    <br />
+    Shown in the following image is an example of this type of chart, which displays the cost of living expenses during a period of time.
   </GridItem>
   <GridItem xl={6} lg={12}>
     <img width="480px" src={manyVariables} alt="Many variables example" />
@@ -79,7 +99,7 @@ Colors for charts includes a recommended set of colors proposed for bar charts,
 
 <Grid hasGutter>
   <GridItem xl={6} lg={12} className="ws-chart-colors-gridtext">
-    You can also use the color order system with one color family. This creates a monochromatic effect. It works using the same logic and order. We recommend using this system for charts with nested variables. The order begins by going through each base color, then lightest, darkest, second lightest, and ending with second darkest. In variable-terms: #1 [color]-300 (base color), #2 [color]-100, #3 [color]-500, #4 [color]-200, #5 [color]-400. The hues will always follow this order.
+    You can also use the color order system with one color family to create a monochromatic effect. We recommend using this approach for charts with nested variables. The order begins by going through each base color, then the lightest, darkest, second lightest, and second darkest colors in a family. In variable-terms, this order looks like: #1 [color]-300 (base color), #2 [color]-100, #3 [color]-500, #4 [color]-200, #5 [color]-400. Regardless of color family, hues will always follow this order.
   </GridItem>
   <GridItem xl={6} lg={12}>
     <img width="480px" src={oneFamily} alt="Monochromatic chart color system example" />