> 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/basic-charts/bar.md).

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

***


---

# 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://nocode-artisan.gitbook.io/plotly-charts/additional-resources/elements-fields-reference/traces/basic-charts/bar.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.