Skip to content

Commit b228909

Browse files
jedrekdomanskisimonbrunel
authored andcommitted
Enhance documentation for bar specific scale options (chartjs#5854)
1 parent a70fc4e commit b228909

File tree

1 file changed

+17
-15
lines changed

1 file changed

+17
-15
lines changed

docs/charts/bar.md

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -125,9 +125,8 @@ The interaction with each bar can be controlled with the following properties:
125125

126126
All these values, if `undefined`, fallback to the associated [`elements.point.*`](../configuration/elements.md#point-configuration) options.
127127

128-
## Configuration Options
129-
130-
The bar chart defines the following configuration options. These options are merged with the global chart configuration options, `Chart.defaults.global`, to form the options passed to the chart.
128+
## Scale Configuration
129+
The bar chart accepts the following configuration from the associated `scale` options:
131130

132131
| Name | Type | Default | Description
133132
| ---- | ---- | ------- | -----------
@@ -138,29 +137,32 @@ The bar chart defines the following configuration options. These options are mer
138137
| `minBarLength` | `Number` | | Set this to ensure that bars have a minimum length in pixels.
139138
| `gridLines.offsetGridLines` | `Boolean` | `true` | If true, the bars for a particular data point fall between the grid lines. The grid line will move to the left by one half of the tick interval. If false, the grid line will go right down the middle of the bars. [more...](#offsetgridlines)
140139

141-
### barThickness
142-
If this value is a number, it is applied to the width of each bar, in pixels. When this is enforced, `barPercentage` and `categoryPercentage` are ignored.
143-
144-
If set to `'flex'`, the base sample widths are calculated automatically based on the previous and following samples so that they take the full available widths without overlap. Then, bars are sized using `barPercentage` and `categoryPercentage`. There is no gap when the percentage options are 1. This mode generates bars with different widths when data are not evenly spaced.
145-
146-
If not set (default), the base sample widths are calculated using the smallest interval that prevents bar overlapping, and bars are sized using `barPercentage` and `categoryPercentage`. This mode always generates bars equally sized.
147-
148-
### offsetGridLines
149-
If true, the bars for a particular data point fall between the grid lines. The grid line will move to the left by one half of the tick interval, which is the space between the grid lines. If false, the grid line will go right down the middle of the bars. This is set to true for a category scale in a bar chart while false for other scales or chart types by default.
150-
151-
This setting applies to the axis configuration. If axes are added to the chart, this setting will need to be set for each new axis.
140+
### Example Usage
152141

153142
```javascript
154143
options = {
155144
scales: {
156145
xAxes: [{
146+
barPercentage: 0.5,
147+
barThickness: 6,
148+
maxBarThickness: 8,
149+
minBarLength: 2,
157150
gridLines: {
158151
offsetGridLines: true
159152
}
160153
}]
161154
}
162155
}
163156
```
157+
### barThickness
158+
If this value is a number, it is applied to the width of each bar, in pixels. When this is enforced, `barPercentage` and `categoryPercentage` are ignored.
159+
160+
If set to `'flex'`, the base sample widths are calculated automatically based on the previous and following samples so that they take the full available widths without overlap. Then, bars are sized using `barPercentage` and `categoryPercentage`. There is no gap when the percentage options are 1. This mode generates bars with different widths when data are not evenly spaced.
161+
162+
If not set (default), the base sample widths are calculated using the smallest interval that prevents bar overlapping, and bars are sized using `barPercentage` and `categoryPercentage`. This mode always generates bars equally sized.
163+
164+
### offsetGridLines
165+
If true, the bars for a particular data point fall between the grid lines. The grid line will move to the left by one half of the tick interval, which is the space between the grid lines. If false, the grid line will go right down the middle of the bars. This is set to true for a category scale in a bar chart while false for other scales or chart types by default.
164166

165167
## Default Options
166168

@@ -287,6 +289,6 @@ var myBarChart = new Chart(ctx, {
287289
```
288290

289291
## Config Options
290-
The configuration options for the horizontal bar chart are the same as for the [bar chart](#configuration-options). However, any options specified on the x axis in a bar chart, are applied to the y axis in a horizontal bar chart.
292+
The configuration options for the horizontal bar chart are the same as for the [bar chart](#scale-configuration). However, any options specified on the x axis in a bar chart, are applied to the y axis in a horizontal bar chart.
291293

292294
The default horizontal bar configuration is specified in `Chart.defaults.horizontalBar`.

0 commit comments

Comments
 (0)