From: Evert Timberg Date: Sat, 17 Oct 2020 20:15:40 +0000 (-0400) Subject: Bar chart base value overrides (#7904) X-Git-Tag: v3.0.0-beta.5~40 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=30d09f47015e536d91dbb5dd606c2e1a3f38ac75;p=thirdparty%2FChart.js.git 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 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'