You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/charts/bar.md
+17-15Lines changed: 17 additions & 15 deletions
Original file line number
Diff line number
Diff line change
@@ -125,9 +125,8 @@ The interaction with each bar can be controlled with the following properties:
125
125
126
126
All these values, if `undefined`, fallback to the associated [`elements.point.*`](../configuration/elements.md#point-configuration) options.
127
127
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:
131
130
132
131
| Name | Type | Default | Description
133
132
| ---- | ---- | ------- | -----------
@@ -138,29 +137,32 @@ The bar chart defines the following configuration options. These options are mer
138
137
| `minBarLength` | `Number` | | Set this to ensure that bars have a minimum length in pixels.
139
138
| `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)
140
139
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
152
141
153
142
```javascript
154
143
options = {
155
144
scales: {
156
145
xAxes: [{
146
+
barPercentage:0.5,
147
+
barThickness:6,
148
+
maxBarThickness:8,
149
+
minBarLength:2,
157
150
gridLines: {
158
151
offsetGridLines:true
159
152
}
160
153
}]
161
154
}
162
155
}
163
156
```
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.
164
166
165
167
## Default Options
166
168
@@ -287,6 +289,6 @@ var myBarChart = new Chart(ctx, {
287
289
```
288
290
289
291
## 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.
291
293
292
294
The default horizontal bar configuration is specified in `Chart.defaults.horizontalBar`.
0 commit comments