Shared Settings
Learn about shared settings that appear across multiple picta types, and how to use them.
This chapter documents settings that appear inside multiple sections. Instead of repeating them in every parent section, they are defined here once and referenced from the sections that use them.
Alignment
Contains two dropdowns for positioning text or elements within their container:
| Setting | Options |
|---|---|
| Horizontal | left, center, or right |
| Vertical | top, center, or bottom |
Background
Contains three settings for styling the background area of chart elements:
| Setting | Description |
|---|---|
| Background Color | Click the color picker to choose a color from the dialog, or paste a hex value directly (e.g., #FF0000) |
| Border Color | Click the color picker to choose a color from the dialog, or paste a hex value directly (e.g., #FF0000) |
| Border Width | The thickness of the border around the background in pixels |
Border
Contains four settings for styling borders around chart elements:
| Setting | Description |
|---|---|
| Color | Click the color picker to choose a color from the dialog, or paste a hex value directly (e.g., #FF0000) |
| Width | The thickness of the border in pixels |
| Radius | Roundness of the border corners in pixels |
| Type | Choose from Solid, Dashed, or Dotted |
Font
Contains six settings for customizing text:
| Setting | Description |
|---|---|
| Color | Click the color picker to choose a color from the dialog, or paste a hex value directly |
| Size | The font size in pixels |
| Opacity | The opacity of the text as a percentage |
| Weight | A dropdown where you can choose a value between 100 and 900 in steps of 100 |
| Style | Choose Normal or Italic |
| Family | Choose from nine font families (see table below) |
Available font families:
| Font Name | Type |
|---|---|
| Arial | Sans-serif |
| Verdana | Sans-serif |
| Tahoma | Sans-serif |
| Trebuchet MS | Sans-serif |
| Times New Roman | Serif |
| Georgia | Serif |
| Garamond | Serif |
| Courier New | Monospace |
| Brush Script MT | Cursive |
Inactive
Contains three settings for styling the appearance of inactive chart elements:
| Setting | Description |
|---|---|
| Background Color | Click the color picker to choose a color from the dialog, or paste a hex value directly (e.g., #FF0000) |
| Border Color | Click the color picker to choose a color from the dialog, or paste a hex value directly (e.g., #FF0000) |
| Border Width | The thickness of the border around inactive elements in pixels |
Location
Contains four settings for positioning labels relative to their chart elements:
| Setting | Description |
|---|---|
| Position | Choose from options like Top, Bottom, Left, Right for both outside and inside positions |
| Rotation | The angle of the label in degrees |
| Distance | The distance in pixels from the chart element to the label |
| Padding | The space in pixels between the label and the chart element |
Position
Contains four number input fields that control the positioning of chart elements within their container:
| Setting | Description |
|---|---|
| Distance from Left | Distance from the left edge of the container. Positive values move the element right |
| Distance from Right | Distance from the right edge of the container. Positive values move the element left |
| Distance from Top | Distance from the top edge of the container. Positive values move the element down |
| Distance from Bottom | Distance from the bottom edge of the container. Positive values move the element up |
Each input field has a built-in toggle to choose between pixels (px) or percentages (%). Percentages are relative to the container size and scale automatically when the chart resizes. Pixels give you a fixed distance that stays the same regardless of the container.
Radius
Contains two number input fields that control the size of circular chart elements:
| Setting | Description |
|---|---|
| Inner Radius | Controls the radius of the empty center space — think of it as the "donut hole" in a pie chart, or the empty center of a gauge. A value of 0 creates a full circle; a larger value creates a ring or donut shape |
| Outer Radius | Controls the overall radius of the circular chart element — larger values make a bigger chart, smaller values make it more compact |
Each input field has a built-in toggle to choose between pixels (px) or percentages (%). Percentages are relative to the chart container size and scale automatically when the chart resizes. Pixels give you a fixed size that stays the same regardless of the container. Use percentages for responsive charts, or pixels when you need precise control.
Shadow
Contains four settings for adding drop shadows to chart elements:
| Setting | Description |
|---|---|
| Color | Click the color picker to choose a color from the dialog, or paste a hex value directly |
| X Offset | The horizontal shadow offset in pixels. Positive values cast the shadow to the right; negative values to the left |
| Y Offset | The vertical shadow offset in pixels. Positive values cast the shadow downward; negative values upward |
| Blur | The softness of the shadow in pixels. Higher values create a softer, more diffuse shadow |
Shape
Contains one dropdown for the shape type and four number inputs within their container:
| Setting | Description |
|---|---|
| Shape | Choose from circle, rectangle, triangle, diamond, and more. Use different shapes to distinguish multiple series when colors alone aren't enough (helpful for accessible or black-and-white charts) |
| Shape Size | Controls how large the shapes are. Larger shapes make data points stand out; smaller shapes create a cleaner look when there are many points |
| Rotate | Controls the rotation angle of the shape in degrees. Use this to rotate individual data point markers for visual variety or to align them with a specific direction |
| X Offset | Shifts the shape horizontally from its default position. Positive values move it right; negative values move it left. Fine-tune the placement of data point markers |
| Y Offset | Shifts the shape vertically from its default position. Positive values move it down; negative values move it up. Fine-tune the placement of data point markers |
Size
Contains two number input fields that control the dimensions of chart elements:
| Setting | Description |
|---|---|
| Width | The horizontal size of the element |
| Height | The vertical size of the element |
Each input field has a built-in toggle to choose between pixels (px) or percentages (%). Percentages are relative to the container size and scale automatically when the chart resizes. Pixels give you a fixed size that stays the same regardless of the container.
Text Border
Contains four settings for styling the outline around text:
| Setting | Description |
|---|---|
| Color | Click the color picker to choose a color from the dialog, or paste a hex value directly |
| Width | The thickness of the text border in pixels |
| Dash Offset | The starting offset of any dash pattern in pixels |
| Type | Choose from Solid, Dashed, or Dotted |
Text Shadow
Contains four settings for adding drop shadows to text:
| Setting | Description |
|---|---|
| Color | Click the color picker to choose a color from the dialog, or paste a hex value directly |
| X Offset | The horizontal shadow offset in pixels. Positive values cast the shadow to the right; negative values to the left |
| Y Offset | The vertical shadow offset in pixels. Positive values cast the shadow downward; negative values upward |
| Blur | The softness of the shadow in pixels. Higher values create a softer, more diffuse shadow |
Area Style
Controls the fill area beneath lines in line charts. When enabled, you can set:
| Setting | Description |
|---|---|
| Color | Click the color picker to choose a color from the dialog, or paste a hex value directly |
| Opacity | The opacity of the area as a percentage |
| Origin | Choose the baseline for the area fill: Start (fills from bottom), End (fills from top) |
| Shadow | Opens the Shadow section for adding a drop shadow to the area |
Handle Style
Contains four settings for styling the handles found in legends and data-zoom sliders:
| Setting | Description |
|---|---|
| Color | Click the color picker to choose a color from the dialog, or paste a hex value directly |
| Opacity | The opacity of the handle as a percentage |
| Border | Opens the Border section for styling the handle's border |
| Shadow | Opens the Shadow section for adding a drop shadow to the handle |
Highlight
Controls how chart elements appear when hovered or highlighted. You can configure special colors, sizes, borders, and opacity for the highlighted state. Use this to make interactive charts where hovering reveals details more clearly.
| Setting | Description |
|---|---|
| Focus | Controls how other data elements appear when one element is highlighted (e.g., on hover). Choose from: None: all elements remain fully visible when one is highlighted (default) Self: only the highlighted element remains fully visible; all others are faded out Series: all elements in the same series as the highlighted element remain fully visible; all others are faded out |
| Item Style | Opens the Item Style section to customize the appearance of highlighted items |
| Label | Opens the Label section to customize the appearance of labels on highlighted items |
| Label Line | Opens the Label Line section to customize the lines connecting labels to highlighted items |
Item Style
Controls the appearance of individual chart elements (bars, pie slices, data points, etc). Customize:
| Setting | Description |
|---|---|
| Color | Click the color picker to choose a color from the dialog, or paste a hex value directly |
| Opacity | The opacity of the item as a percentage |
| Border | Opens the Border section for styling the item's border |
| Shadow | Opens the Shadow section for adding a drop shadow to the item |
Label
Customizes the text labels on chart elements. Control:
| Setting | Description |
|---|---|
| Compose Text | Opens the Compose Text dialog to customize the labels with dynamic placeholders for data values and formatting options |
| Location | Opens the Location section to control where labels are positioned relative to their chart elements |
| Alignment | Opens the Alignment section to control the horizontal and vertical alignment of label text |
| Font | Opens the Font section to customize the font properties of the label text |
| Text Border | Opens the Border section to customize the outline around label text |
| Text Shadow | Opens the Shadow section to add a drop shadow to label text |
| Border | Opens the Border section to customize the outline around the label itself (not the text) |
| Shadow | Opens the Shadow section to add a drop shadow to the label itself (not the text) |
Label Line
A label line is the small connector line that appears when a label is placed outside the visual element. Only available in picta types pie, funnel and sunburst. It helps visually connect the label to its corresponding slice or segment when the label is positioned outside the chart element.
| Setting | Description |
|---|---|
| Smoothness | Controls the curvature of the label line. A value of 0 percent creates straight lines, while higher values create smoother, more curved lines |
| First Segment Length | Controls the length of the first segment of the label line in pixels. This is the segment that extends from the chart element to the first bend in the line |
| Second Segment Length | Controls the length of the second segment of the label line in pixels. This is the segment that extends from the first bend to the label itself |
| Line Style | Opens the Line Style section to customize the appearance of the label line |
Line Style
Controls the appearance of lines in line charts and chart borders. You can set:
| Setting | Description |
|---|---|
| Color | Click the color picker to choose a color from the dialog, or paste a hex value directly |
| Width | The thickness of the line in pixels |
| Type | Choose from Solid, Dashed, or Dotted |
| Shadow | Opens the Shadow section for adding a drop shadow to the line |
Text Style
Contains settings for controlling how text behaves within its container:
| Setting | Description |
|---|---|
| Overflow | Choose how text behaves when it exceeds its container: Truncate with ellipsis: cuts off excess text and adds ... Break by word: wraps text at word boundaries to the next line Break by character: wraps text at individual characters to the next line |
| Width | The width of the text area in pixels |
| Height | The height of the text area in pixels |
| Font | Opens the Font section to customize the font properties |
| Text Border | Opens the Text Border section to customize the border around the text |
| Text Shadow | Opens the Text Shadow section to add a drop shadow to the text |