Bar chart base value overrides (#7904)

* Bar chart base value overrides
* Ensure that `base` is marked as indexable and scriptable in the docs

diff --git a/docs/docs/charts/bar.mdx b/docs/docs/charts/bar.mdx
index 7d0bbbcaa54ed380be148babf58ed068431bb4b0..6fefb7f847b35c88dd12bda0d7211eba59cb31cb 100644 (file)
--- 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) | <code>number&#124;object</code> | 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` | <code>number&#124;string</code> | | 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 aafe8085624803fc115137b84e4205a09980f5d2..173c649cbde4bd79b9477b617dfdec55f95a32d4 100644 (file)
--- 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 (file)
index 0000000..0bb96dc
--- /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 (file)
index 0000000..5d5986b
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 c58795cc2b085354619d68191d3dde437bbf419e..7ca94de02be6326dda798c85460fe9ed8356076f 100644 (file)
--- 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'