diff --git a/docs/docs/charts/bar.mdx b/docs/docs/charts/bar.mdx
index 7d0bbbcaa..6fefb7f84 100644
--- a/docs/docs/charts/bar.mdx
+++ b/docs/docs/charts/bar.mdx
@@ -79,6 +79,7 @@ the color of the bars is generally set this way.
| Name | Type | [Scriptable](../general/options.md#scriptable-options) | [Indexable](../general/options.md#indexable-options) | Default
| ---- | ---- | :----: | :----: | ----
| [`backgroundColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
+| [`base`](#general) | `number` | Yes | Yes |
| [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
| [`borderSkipped`](#borderskipped) | `string` | Yes | Yes | `'start'`
| [`borderWidth`](#borderwidth) | number|object | Yes | Yes | `0`
@@ -97,6 +98,7 @@ the color of the bars is generally set this way.
| Name | Description
| ---- | ----
+| `base` | Base value for the bar in data units along the value axis. If not set, defaults to the value axis base value.
| `clip` | How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. `0` = clip at chartArea. Clipping can also be configured per side: `clip: {left: 5, top: false, right: -2, bottom: 0}`
| `indexAxis` | The base axis of the dataset. `'x'` for vertical bars and `'y'` for horizontal bars.
| `label` | The label for the dataset which appears in the legend and tooltips.
@@ -161,6 +163,7 @@ The bar chart accepts the following configuration from the associated dataset op
| `barPercentage` | `number` | `0.9` | Percent (0-1) of the available width each bar should be within the category width. 1.0 will take the whole category width and put the bars right next to each other. [more...](#barpercentage-vs-categorypercentage)
| `categoryPercentage` | `number` | `0.8` | Percent (0-1) of the available width each category should be within the sample width. [more...](#barpercentage-vs-categorypercentage)
| `barThickness` | number|string | | Manually set width of each bar in pixels. If set to `'flex'`, it computes "optimal" sample widths that globally arrange bars side by side. If not set (default), bars are equally sized based on the smallest interval. [more...](#barthickness)
+| `base` | `number` | | Base value for the bar in data units along the value axis. If not set, defaults to the value axis base value.
| `maxBarThickness` | `number` | | Set this to ensure that bars are not sized thicker than this.
| `minBarLength` | `number` | | Set this to ensure that bars have a minimum length in pixels.
diff --git a/src/controllers/controller.bar.js b/src/controllers/controller.bar.js
index aafe80856..173c649cb 100644
--- a/src/controllers/controller.bar.js
+++ b/src/controllers/controller.bar.js
@@ -404,9 +404,10 @@ export default class BarController extends DatasetController {
const me = this;
const meta = me._cachedMeta;
const vScale = meta.vScale;
- const minBarLength = options.minBarLength;
+ const {base: baseValue, minBarLength} = options;
const parsed = me.getParsed(index);
const custom = parsed._custom;
+ const floating = isFloatBar(custom);
let value = parsed[vScale.axis];
let start = 0;
let length = meta._stacked ? me.applyStack(vScale, parsed) : value;
@@ -417,7 +418,7 @@ export default class BarController extends DatasetController {
length = value;
}
- if (isFloatBar(custom)) {
+ if (floating) {
value = custom.barStart;
length = custom.barEnd - custom.barStart;
// bars crossing origin are not stacked
@@ -431,7 +432,8 @@ export default class BarController extends DatasetController {
// So we don't try to draw so huge rectangles.
// https://github.com/chartjs/Chart.js/issues/5247
// TODO: use borderWidth instead (need to move the parsing from rectangle)
- let base = _limitValue(vScale.getPixelForValue(start),
+ const startValue = !isNullOrUndef(baseValue) && !floating ? baseValue : start;
+ let base = _limitValue(vScale.getPixelForValue(startValue),
vScale._startPixel - 10,
vScale._endPixel + 10);
@@ -521,6 +523,7 @@ BarController.defaults = {
'borderWidth',
'barPercentage',
'barThickness',
+ 'base',
'categoryPercentage',
'maxBarThickness',
'minBarLength',
diff --git a/test/fixtures/controller.bar/bar-base-value.js b/test/fixtures/controller.bar/bar-base-value.js
new file mode 100644
index 000000000..0bb96dc6e
--- /dev/null
+++ b/test/fixtures/controller.bar/bar-base-value.js
@@ -0,0 +1,31 @@
+module.exports = {
+ config: {
+ type: 'bar',
+ data: {
+ labels: [0, 1, 3, 4],
+ datasets: [
+ {
+ data: [5, 20, 10, 11],
+ base: 10,
+ backgroundColor: '#00ff00',
+ borderColor: '#ff0000',
+ borderWidth: 2,
+ }
+ ]
+ },
+ options: {
+ legend: false,
+ title: false,
+ scales: {
+ x: {display: false},
+ y: {display: false}
+ }
+ }
+ },
+ options: {
+ canvas: {
+ height: 256,
+ width: 512
+ }
+ }
+};
diff --git a/test/fixtures/controller.bar/bar-base-value.png b/test/fixtures/controller.bar/bar-base-value.png
new file mode 100644
index 000000000..5d5986bdf
Binary files /dev/null and b/test/fixtures/controller.bar/bar-base-value.png differ
diff --git a/types/elements/index.d.ts b/types/elements/index.d.ts
index c58795cc2..7ca94de02 100644
--- a/types/elements/index.d.ts
+++ b/types/elements/index.d.ts
@@ -253,6 +253,11 @@ export interface IRectangleProps {
}
export interface IRectangleOptions extends ICommonOptions {
+ /**
+ * The base value for the bar in data units along the value axis.
+ */
+ base: number;
+
/**
* Skipped (excluded) border: 'start', 'end', 'bottom', 'left', 'top' or 'right'.
* @default 'start'