# Bar

### Basic Options

<details>

<summary>Name</summary>

**Type**: string

**Documentation**: Sets the trace name. The trace name appears as the legend item and on hover.

**Path**: data.index.name

</details>

<details>

<summary>Offset</summary>

**Type**: number

**Accept List**: true

**Documentation**: Shifts the position where the bar is drawn (in position axis units). In *group* barmode, traces that set *offset* will be excluded and drawn in *overlay* mode instead.

**Path**: data.index.offset

</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 bars. With *v* (*h*), the value of the each bar spans along the vertical (horizontal).

**Path**: data.index.orientation

</details>

***

### Data Source

<details>

<summary>Base</summary>

**Type**: any

**Accept List**: true

**Documentation**: Sets where the bar base is drawn (in position axis units). In *stack* or *relative* barmode, traces that set *base* will be excluded and drawn in *overlay* mode instead.

**Path**: data.index.base

</details>

<details>

<summary>Text</summary>

**Default Value**:

**Type**: string

**Accept List**: true

**Documentation**: Sets text elements associated with each (x,y) pair. 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. If trace `hoverinfo` contains a *text* flag and *hovertext* is not set, these elements will be seen in the hover labels.

**Path**: data.index.text

</details>

<details>

<summary>X</summary>

**Type**: any

**Accept List**: true

**Documentation**: Sets the x coordinates.

**Path**: data.index.x

</details>

<details>

<summary>Y</summary>

**Type**: any

**Accept List**: true

**Documentation**: Sets the y coordinates.

**Path**: data.index.y

</details>

***

### Items Styling

<details>

<summary>Color</summary>

**Type**: color

**Accept List**: true

**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>Width</summary>

**Type**: number

**Accept List**: true

**Min**: 0

**Documentation**: Sets the bar width (in position axis units).

**Path**: data.index.width

</details>

<details>

<summary>Line Color</summary>

**Type**: color

**Accept List**: true

**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**: true

**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**: true

**Min**: 0

**Max**: 1

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

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

</details>

***

### Items Pattern Options

<details>

<summary>Pattern Fg Color</summary>

**Type**: color

**Accept List**: true

**Documentation**: When there is no colorscale sets the color of foreground pattern fill. Defaults to a `marker.color` background when `fillmode` is *replace*. Otherwise, defaults to dark grey or white to increase contrast with the `bgcolor`.

**Path**: data.index.marker.pattern.fgcolor

</details>

<details>

<summary>Pattern Fill Mode</summary>

**Default Value**: replace

**Type**: enumerated

**Enum Options**: replace,overlay

**Documentation**: Determines whether `marker.color` should be used as a default to `bgcolor` or a `fgcolor`.

**Path**: data.index.marker.pattern.fillmode

</details>

<details>

<summary>Pattern Shape</summary>

**Default Value**:

**Type**: enumerated

**Accept List**: true

**Enum Options**: ,/,,x,-,|,+,.

**Documentation**: Sets the shape of the pattern fill. By default, no pattern is used for filling the area.

**Path**: data.index.marker.pattern.shape

</details>

<details>

<summary>Pattern Size</summary>

**Default Value**: 8

**Type**: number

**Accept List**: true

**Min**: 0

**Documentation**: Sets the size of unit squares of the pattern fill in pixels, which corresponds to the interval of repetition of the pattern.

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

</details>

***

### Text Formatting

<details>

<summary>Text Angle</summary>

**Default Value**: auto

**Type**: angle

**Documentation**: Sets the angle of the tick labels with respect to the bar. For example, a `tickangle` of -90 draws the tick labels vertically. With *auto* the texts may automatically be rotated to fit with the maximum size in bars.

**Path**: data.index.textangle

</details>

<details>

<summary>Color</summary>

**Type**: color

**Accept List**: true

**Path**: data.index.textfont.color

</details>

<details>

<summary>Size</summary>

**Type**: number

**Accept List**: true

**Min**: 1

**Path**: data.index.textfont.size

</details>

<details>

<summary>Text Position</summary>

**Default Value**: auto

**Type**: enumerated

**Accept List**: true

**Enum Options**: inside,outside,auto,none

**Documentation**: Specifies the location of the `text`. *inside* positions `text` inside, next to the bar end (rotated and scaled if needed). *outside* positions `text` outside, next to the bar end (scaled if needed), unless there is another bar stacked on this one, then the text gets pushed inside. *auto* tries to position `text` inside the bar, but if the bar is too small and no bar is stacked on this one the text is moved outside. If *none*, no text appears.

**Path**: data.index.textposition

</details>

<details>

<summary>Text Template</summary>

**Default Value**:

**Type**: string

**Accept List**: true

**Documentation**: Template string used for rendering the information text that appear on points. Note that this will override `textinfo`. Variables are inserted using %{variable}, for example "y: %{y}". 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. Every attributes that can be specified per-point (the ones that are `arrayOk: true`) are available. Finally, the template string has access to variables `value` and `label`.

**Path**: data.index.texttemplate

</details>

<details>

<summary>Inside Text Anchor</summary>

**Default Value**: end

**Type**: enumerated

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

**Documentation**: Determines if texts are kept at center or start/end points in `textposition` *inside* mode.

**Path**: data.index.insidetextanchor

</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 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. Finally, the template string has access to variables `value` and `label`. 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>

***

### 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>

***