> For the complete documentation index, see [llms.txt](https://nocode-artisan.gitbook.io/plotly-charts/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nocode-artisan.gitbook.io/plotly-charts/additional-resources/elements-fields-reference/traces/statistical-charts/box.md).

# Box & Violin

### Box Formatting

<details>

<summary>Box Mean</summary>

**Type**: enumerated

**Enum Options**: true,sd,false

**Documentation**: If *true*, the mean of the box(es)' underlying distribution is drawn as a dashed line inside the box(es). If *sd* the standard deviation is also drawn. Defaults to *true* when `mean` is set. Defaults to *sd* when `sd` is set Otherwise defaults to *false*.

**Path**: data.index.boxmean

</details>

<details>

<summary>Box Points</summary>

**Type**: enumerated

**Enum Options**: all,outliers,suspectedoutliers,false

**Documentation**: If *outliers*, only the sample points lying outside the whiskers are shown If *suspectedoutliers*, the outlier points are shown and points either less than 4*Q1-3*Q3 or greater than 4*Q3-3*Q1 are highlighted (see `outliercolor`) If *all*, all sample points are shown If *false*, only the box(es) are shown with no sample points Defaults to *suspectedoutliers* when `marker.outliercolor` or `marker.line.outliercolor` is set. Defaults to *all* under the q1/median/q3 signature. Otherwise defaults to *outliers*.

**Path**: data.index.boxpoints

</details>

***

### Fill Options

<details>

<summary>Fill Color</summary>

**Type**: color

**Documentation**: Sets the fill color. Defaults to a half-transparent variant of the line color, marker color, or marker line color, whichever is available.

**Path**: data.index.fillcolor

</details>

***

### Hover Formatting

<details>

<summary>Hover Info</summary>

**Default Value**: all

**Type**: flaglist

**Accept List**: true

**Flag Options**: x,y,z,text,name

**Flag Single**: all,none,skip

**Documentation**: Determines which trace information appear on hover. If `none` or `skip` are set, no information is displayed upon hovering. But, if `none` is set, click and hover events are still fired.

**Path**: data.index.hoverinfo

</details>

<details>

<summary>Hover On</summary>

**Default Value**: boxes+points

**Type**: flaglist

**Flag Options**: boxes,points

**Documentation**: Do the hover effects highlight individual boxes or sample points or both?

**Path**: data.index.hoveron

</details>

<details>

<summary>Hover Template</summary>

**Default Value**:

**Type**: string

**Accept List**: true

**Documentation**: Template string used for rendering the information that appear on hover box. Note that this will override `hoverinfo`. Variables are inserted using %{variable}, for example "y: %{y}" as well as %{xother}, {%*xother}, {%xother}, {%xother*}. When showing info for several points, *xother* will be added to those with different x positions from the first point. An underscore before or after *(x|y)other* will add a space on that side, only when this field is shown. Numbers are formatted using d3-format's syntax %{variable:d3-format}, for example "Price: %{y:$.2f}". <https://github.com/d3/d3-format/tree/v1.4.5#d3-format> for details on the formatting syntax. Dates are formatted using d3-time-format's syntax %{variable|d3-time-format}, for example "Day: %{2019-01-01|%A}". <https://github.com/d3/d3-time-format/tree/v2.2.3#locale\\_format> for details on the date formatting syntax. The variables available in `hovertemplate` are the ones emitted as event data described at this link <https://plotly.com/javascript/plotlyjs-events/#event-data>. Additionally, every attributes that can be specified per-point (the ones that are `arrayOk: true`) are available. Anything contained in tag `<extra>` is displayed in the secondary box, for example "{fullData.name}". To hide the secondary box completely, use an empty tag `<extra></extra>`.

**Path**: data.index.hovertemplate

</details>

***

### Exclusive Options

<details>

<summary>Jitter</summary>

**Type**: number

**Min**: 0

**Max**: 1

**Documentation**: Sets the amount of jitter in the sample points drawn. If *0*, the sample points align along the distribution axis. If *1*, the sample points are drawn in a random jitter of width equal to the width of the box(es).

**Path**: data.index.jitter

</details>

<details>

<summary>Notched</summary>

**Type**: boolean

**Documentation**: Determines whether or not notches are drawn. Notches displays a confidence interval around the median. We compute the confidence interval as median +/- 1.57 \* IQR / sqrt(N), where IQR is the interquartile range and N is the sample size. If two boxes' notches do not overlap there is 95% confidence their medians differ. See <https://sites.google.com/site/davidsstatistics/home/notched-box-plots> for more info. Defaults to *false* unless `notchwidth` or `notchspan` is set.

**Path**: data.index.notched

</details>

<details>

<summary>Notch Width</summary>

**Default Value**: 0.25

**Type**: number

**Min**: 0

**Max**: 0.5

**Documentation**: Sets the width of the notches relative to the box' width. For example, with 0, the notches are as wide as the box(es).

**Path**: data.index.notchwidth

</details>

<details>

<summary>Point Pos</summary>

**Type**: number

**Min**: -2

**Max**: 2

**Documentation**: Sets the position of the sample points in relation to the box(es). If *0*, the sample points are places over the center of the box(es). Positive (negative) values correspond to positions to the right (left) for vertical boxes and above (below) for horizontal boxes

**Path**: data.index.pointpos

</details>

<details>

<summary>Whisker Width</summary>

**Default Value**: 0.5

**Type**: number

**Min**: 0

**Max**: 1

**Documentation**: Sets the width of the whiskers relative to the box' width. For example, with 1, the whiskers are as wide as the box(es).

**Path**: data.index.whiskerwidth

</details>

***

### Lines Styling

<details>

<summary>Color</summary>

**Type**: color

**Documentation**: Sets the color of line bounding the box(es).

**Path**: data.index.line.color

</details>

<details>

<summary>Width</summary>

**Default Value**: 2

**Type**: number

**Min**: 0

**Documentation**: Sets the width (in px) of line bounding the box(es).

**Path**: data.index.line.width

</details>

***

### Items Styling

<details>

<summary>Angle</summary>

**Default Value**: 0

**Type**: angle

**Accept List**: false

**Documentation**: Sets the marker angle in respect to `angleref`.

**Path**: data.index.marker.angle

</details>

<details>

<summary>Color</summary>

**Type**: color

**Accept List**: false

**Documentation**: Sets the marker color. It accepts either a specific color or an array of numbers that are mapped to the colorscale relative to the max and min values of the array or relative to `marker.cmin` and `marker.cmax` if set.

**Path**: data.index.marker.color

</details>

<details>

<summary>Line Color</summary>

**Default Value**: #444

**Type**: color

**Accept List**: false

**Documentation**: Sets the marker.line color. It accepts either a specific color or an array of numbers that are mapped to the colorscale relative to the max and min values of the array or relative to `marker.line.cmin` and `marker.line.cmax` if set.

**Path**: data.index.marker.line.color

</details>

<details>

<summary>Line Width</summary>

**Default Value**: 0

**Type**: number

**Accept List**: false

**Min**: 0

**Documentation**: Sets the width (in px) of the lines bounding the marker points.

**Path**: data.index.marker.line.width

</details>

<details>

<summary>Opacity</summary>

**Default Value**: 1

**Type**: number

**Accept List**: false

**Min**: 0

**Max**: 1

**Documentation**: Sets the marker opacity.

**Path**: data.index.marker.opacity

</details>

<details>

<summary>Size</summary>

**Default Value**: 6

**Type**: number

**Accept List**: false

**Min**: 0

**Documentation**: Sets the marker size (in px).

**Path**: data.index.marker.size

</details>

<details>

<summary>Symbol</summary>

**Default Value**: circle

**Type**: enumerated

**Accept List**: false

**Enum Options**: 0,0,circle,100,100,circle-open,200,200,circle-dot,300,300,circle-open-dot,1,1,square,101,101,square-open,201,201,square-dot,301,301,square-open-dot,2,2,diamond,102,102,diamond-open,202,202,diamond-dot,302,302,diamond-open-dot,3,3,cross,103,103,cross-open,203,203,cross-dot,303,303,cross-open-dot,4,4,x,104,104,x-open,204,204,x-dot,304,304,x-open-dot,5,5,triangle-up,105,105,triangle-up-open,205,205,triangle-up-dot,305,305,triangle-up-open-dot,6,6,triangle-down,106,106,triangle-down-open,206,206,triangle-down-dot,306,306,triangle-down-open-dot,7,7,triangle-left,107,107,triangle-left-open,207,207,triangle-left-dot,307,307,triangle-left-open-dot,8,8,triangle-right,108,108,triangle-right-open,208,208,triangle-right-dot,308,308,triangle-right-open-dot,9,9,triangle-ne,109,109,triangle-ne-open,209,209,triangle-ne-dot,309,309,triangle-ne-open-dot,10,10,triangle-se,110,110,triangle-se-open,210,210,triangle-se-dot,310,310,triangle-se-open-dot,11,11,triangle-sw,111,111,triangle-sw-open,211,211,triangle-sw-dot,311,311,triangle-sw-open-dot,12,12,triangle-nw,112,112,triangle-nw-open,212,212,triangle-nw-dot,312,312,triangle-nw-open-dot,13,13,pentagon,113,113,pentagon-open,213,213,pentagon-dot,313,313,pentagon-open-dot,14,14,hexagon,114,114,hexagon-open,214,214,hexagon-dot,314,314,hexagon-open-dot,15,15,hexagon2,115,115,hexagon2-open,215,215,hexagon2-dot,315,315,hexagon2-open-dot,16,16,octagon,116,116,octagon-open,216,216,octagon-dot,316,316,octagon-open-dot,17,17,star,117,117,star-open,217,217,star-dot,317,317,star-open-dot,18,18,hexagram,118,118,hexagram-open,218,218,hexagram-dot,318,318,hexagram-open-dot,19,19,star-triangle-up,119,119,star-triangle-up-open,219,219,star-triangle-up-dot,319,319,star-triangle-up-open-dot,20,20,star-triangle-down,120,120,star-triangle-down-open,220,220,star-triangle-down-dot,320,320,star-triangle-down-open-dot,21,21,star-square,121,121,star-square-open,221,221,star-square-dot,321,321,star-square-open-dot,22,22,star-diamond,122,122,star-diamond-open,222,222,star-diamond-dot,322,322,star-diamond-open-dot,23,23,diamond-tall,123,123,diamond-tall-open,223,223,diamond-tall-dot,323,323,diamond-tall-open-dot,24,24,diamond-wide,124,124,diamond-wide-open,224,224,diamond-wide-dot,324,324,diamond-wide-open-dot,25,25,hourglass,125,125,hourglass-open,26,26,bowtie,126,126,bowtie-open,27,27,circle-cross,127,127,circle-cross-open,28,28,circle-x,128,128,circle-x-open,29,29,square-cross,129,129,square-cross-open,30,30,square-x,130,130,square-x-open,31,31,diamond-cross,131,131,diamond-cross-open,32,32,diamond-x,132,132,diamond-x-open,33,33,cross-thin,133,133,cross-thin-open,34,34,x-thin,134,134,x-thin-open,35,35,asterisk,135,135,asterisk-open,36,36,hash,136,136,hash-open,236,236,hash-dot,336,336,hash-open-dot,37,37,y-up,137,137,y-up-open,38,38,y-down,138,138,y-down-open,39,39,y-left,139,139,y-left-open,40,40,y-right,140,140,y-right-open,41,41,line-ew,141,141,line-ew-open,42,42,line-ns,142,142,line-ns-open,43,43,line-ne,143,143,line-ne-open,44,44,line-nw,144,144,line-nw-open,45,45,arrow-up,145,145,arrow-up-open,46,46,arrow-down,146,146,arrow-down-open,47,47,arrow-left,147,147,arrow-left-open,48,48,arrow-right,148,148,arrow-right-open,49,49,arrow-bar-up,149,149,arrow-bar-up-open,50,50,arrow-bar-down,150,150,arrow-bar-down-open,51,51,arrow-bar-left,151,151,arrow-bar-left-open,52,52,arrow-bar-right,152,152,arrow-bar-right-open,53,53,arrow,153,153,arrow-open,54,54,arrow-wide,154,154,arrow-wide-open

**Documentation**: Sets the marker symbol type. Adding 100 is equivalent to appending *-open* to a symbol name. Adding 200 is equivalent to appending *-dot* to a symbol name. Adding 300 is equivalent to appending *-open-dot* or *dot-open* to a symbol name.

**Path**: data.index.marker.symbol

</details>

<details>

<summary>Width</summary>

**Default Value**: 0

**Type**: number

**Min**: 0

**Documentation**: Sets the width of the box in data coordinate If *0* (default value) the width is automatically selected based on the positions of other box traces in the same subplot.

**Path**: data.index.width

</details>

***

### Basic Options

<details>

<summary>Name</summary>

**Type**: string

**Documentation**: Sets the trace name. The trace name appears as the legend item and on hover. For box traces, the name will also be used for the position coordinate, if `x` and `x0` (`y` and `y0` if horizontal) are missing and the position axis is categorical

**Path**: data.index.name

</details>

<details>

<summary>Opacity</summary>

**Default Value**: 1

**Type**: number

**Min**: 0

**Max**: 1

**Documentation**: Sets the opacity of the trace.

**Path**: data.index.opacity

</details>

<details>

<summary>Orientation</summary>

**Type**: enumerated

**Enum Options**: v,h

**Documentation**: Sets the orientation of the box(es). If *v* (*h*), the distribution is visualized along the vertical (horizontal).

**Path**: data.index.orientation

</details>

***

### Data Source

<details>

<summary>Text</summary>

**Default Value**:

**Type**: string

**Accept List**: true

**Documentation**: Sets the text elements associated with each sample value. If a single string, the same string appears over all the data points. If an array of string, the items are mapped in order to the this trace's (x,y) coordinates. To be seen, trace `hoverinfo` must contain a *text* flag.

**Path**: data.index.text

</details>

<details>

<summary>X</summary>

**Type**: any

**Accept List**: true

**Documentation**: Sets the x sample data or coordinates. See overview for more info.

**Path**: data.index.x

</details>

<details>

<summary>Y</summary>

**Type**: any

**Accept List**: true

**Documentation**: Sets the y sample data or coordinates. See overview for more info.

**Path**: data.index.y

</details>

***

### Calendar Options

<details>

<summary>X Calendar</summary>

**Default Value**: gregorian

**Type**: enumerated

**Enum Options**: chinese,coptic,discworld,ethiopian,gregorian,hebrew,islamic,jalali,julian,mayan,nanakshahi,nepali,persian,taiwan,thai,ummalqura

**Documentation**: Sets the calendar system to use with `x` date data.

**Path**: data.index.xcalendar

</details>

<details>

<summary>X Period</summary>

**Default Value**: 0

**Type**: any

**Documentation**: Only relevant when the axis `type` is *date*. Sets the period positioning in milliseconds or *M* on the x axis. Special values in the form of *M* could be used to declare the number of months. In this case `n` must be a positive integer.

**Path**: data.index.xperiod

</details>

<details>

<summary>X Period Alignment</summary>

**Default Value**: middle

**Type**: enumerated

**Enum Options**: start,middle,end

**Documentation**: Only relevant when the axis `type` is *date*. Sets the alignment of data points on the x axis.

**Path**: data.index.xperiodalignment

</details>

***

### Multi Trace Options

<details>

<summary>Box Gap</summary>

**Default Value**: 0.3

**Type**: number

**Min**: 0

**Max**: 1

**Documentation**: Sets the gap (in plot fraction) between boxes of adjacent location coordinates. Has no effect on traces that have *width* set.

**Path**: layout.boxgap

</details>

<details>

<summary>Box Group Gap</summary>

**Default Value**: 0.3

**Type**: number

**Min**: 0

**Max**: 1

**Documentation**: Sets the gap (in plot fraction) between boxes of the same location coordinate. Has no effect on traces that have *width* set.

**Path**: layout.boxgroupgap

</details>

<details>

<summary>Box Mode</summary>

**Default Value**: overlay

**Type**: enumerated

**Enum Options**: group,overlay

**Documentation**: Determines how boxes at the same location coordinate are displayed on the graph. If *group*, the boxes are plotted next to one another centered around the shared location. If *overlay*, the boxes are plotted over one another, you might need to set *opacity* to see them multiple boxes. Has no effect on traces that have *width* set.

**Path**: layout.boxmode

</details>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://nocode-artisan.gitbook.io/plotly-charts/additional-resources/elements-fields-reference/traces/statistical-charts/box.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
