Entered data is normalized automatically i.e. proportions are calculated of any three positive values you enter. This means you do not need to calculate the fractions/percentages yourself before plotting.
| A | B | A | Total | |
|---|---|---|---|---|
Data | 300 | 50 | 50 | 400 |
Normalized | 75% | 12.5% | 12.5% | 100% |
The color cell accepts any valid CSS color format, including:
- Hex codes:
#FF0000 - RGB/RGBA
rgb(255, 0, 0) - HSL/HSLA
hsl(0, 100%, 50%) - Named colors
red
You can paste any of these CSS color formats directly into a color cell.
Clicking on a color cell will open the color editor. Colors can be selected in several ways in the color cell editor:
- Choose from a list of named colors
- Enter a hexadecimal color code
- Use the eyedropper tool to pick from your screen
- Use the visual color picker with hue, saturation and brightness controls
The editor provides a live preview of your selected color and validates that the entered value is a valid color format.
Named colors are keywords that you can use directly instead of color codes like hex, RGB, or HSL.
In the color cell editor, you can select a named color. The colors are grouped by hue family (reds, blues, greens, etc.) for easy reference.
Here are two neat tools to view named colors
In the color cell editor, you can also paste a hexadecimal value. For example #D68989 or #2551B8.
In the color cell editor, you can press the eyedropper tool to pick a color anywhere on your screen. This tool only works in the most recent browsers.
In the color cell editor, you can use the color picker to visually select any color. The picker provides three components:
- A 2D area that lets you adjust saturation and brightness
- A slider to select the hue
You can interact with any of these components to create your desired color:
- Click and drag in the color area to adjust saturation and brightness
- Slide the hue slider to change the base color
The color picker provides immediate visual feedback as you make adjustments, making it easy to find exactly the right shade.
Dash provides a way to create dashed or dotted lines. It takes numbers that define the pattern of dashes and gaps.
- A single number like
20creates equal dashes and gaps:
- Two numbers like
40 10create alternating dash and gap lengths:
- More numbers like
20 5 10 5create complex repeating patterns:
The pattern keeps repeating along the line. Small numbers create dotted effects, while larger numbers create longer dashes.
There are also predefined patterns. The predefined line style options are:
Learn more about stroke-dasharray on MDN.
The opacity property controls how transparent or 'see-through' an element is. Its value range goes from 0.0 (completely transparent) to 1.0 (completely solid). By default, all elements are solid (1).
Here's a visual example of different opacity values: