From 3f4a0a46556c67007779f4b7e5d23b2dec5a194d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C4=99drek=20Doma=C5=84ski?= Date: Wed, 21 Nov 2018 18:54:11 +0100 Subject: [PATCH 1/5] Supply docs for barThickness --- docs/charts/bar.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/docs/charts/bar.md b/docs/charts/bar.md index e71c38e24ba..90fea2ad439 100644 --- a/docs/charts/bar.md +++ b/docs/charts/bar.md @@ -139,6 +139,16 @@ The bar chart defines the following configuration options. These options are mer | `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) ### barThickness +This option needs to be configured on x axis in scales property. +```javascript +options: { + scales: { + xAxes: [{ + barThickness: 6 + }] + } +} +``` 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. 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. From 329546887ef049375ad3b2091e4a239628419057 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C4=99drek=20Doma=C5=84ski?= Date: Thu, 22 Nov 2018 08:06:47 +0100 Subject: [PATCH 2/5] Update description and indentation --- docs/charts/bar.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/charts/bar.md b/docs/charts/bar.md index 90fea2ad439..db5ec0d3d04 100644 --- a/docs/charts/bar.md +++ b/docs/charts/bar.md @@ -139,14 +139,14 @@ The bar chart defines the following configuration options. These options are mer | `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) ### barThickness -This option needs to be configured on x axis in scales property. +This setting applies to the axis configuration. ```javascript options: { - scales: { - xAxes: [{ - barThickness: 6 - }] - } + scales: { + xAxes: [{ + barThickness: 6 + }] + } } ``` 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. From 52e1028ea9f7ea9d5d9d42342834cc38478dea1e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C4=99drek=20Doma=C5=84ski?= Date: Mon, 26 Nov 2018 21:53:47 +0100 Subject: [PATCH 3/5] Reword parent section and description - barThickness and other options no longer belong to `global` options, they now belong to `scale` options - example of usage of options provided in the table in the description --- docs/charts/bar.md | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/docs/charts/bar.md b/docs/charts/bar.md index db5ec0d3d04..3b8c43912ec 100644 --- a/docs/charts/bar.md +++ b/docs/charts/bar.md @@ -125,9 +125,8 @@ The interaction with each bar can be controlled with the following properties: All these values, if `undefined`, fallback to the associated [`elements.point.*`](../configuration/elements.md#point-configuration) options. -## Configuration Options - -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. +## Scale Configuration +The bar chart accepts the following configuration from the associated `scale` options: | Name | Type | Default | Description | ---- | ---- | ------- | ----------- @@ -138,17 +137,24 @@ The bar chart defines the following configuration options. These options are mer | `minBarLength` | `Number` | | Set this to ensure that bars have a minimum length in pixels. | `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) -### barThickness -This setting applies to the axis configuration. +### Example Usage + ```javascript -options: { +options = { scales: { xAxes: [{ - barThickness: 6 + barPercentage: 0.5, + barThickness: 6, + maxBarThickness: 8, + minBarLength: 2, + gridLines: { + offsetGridLines: true + } }] } } ``` +### barThickness 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. 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. From 2efce11fadea4da7b04dcba73c4556152f23ae88 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C4=99drek=20Doma=C5=84ski?= Date: Tue, 27 Nov 2018 18:45:15 +0100 Subject: [PATCH 4/5] Remove redundant text and code snippet --- docs/charts/bar.md | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/docs/charts/bar.md b/docs/charts/bar.md index 3b8c43912ec..b33577c452d 100644 --- a/docs/charts/bar.md +++ b/docs/charts/bar.md @@ -164,20 +164,6 @@ If not set (default), the base sample widths are calculated using the smallest i ### offsetGridLines 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. -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. - -```javascript -options = { - scales: { - xAxes: [{ - gridLines: { - offsetGridLines: true - } - }] - } -} -``` - ## Default Options It is common to want to apply a configuration setting to all created bar charts. The global bar chart settings are stored in `Chart.defaults.bar`. Changing the global options only affects charts created after the change. Existing charts are not changed. From c80656811462e72bb56f98cfedce47c19a1f476a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C4=99drek=20Doma=C5=84ski?= Date: Tue, 27 Nov 2018 18:46:48 +0100 Subject: [PATCH 5/5] Update anchor link to point to new heading name --- docs/charts/bar.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/charts/bar.md b/docs/charts/bar.md index b33577c452d..945539ea59a 100644 --- a/docs/charts/bar.md +++ b/docs/charts/bar.md @@ -289,6 +289,6 @@ var myBarChart = new Chart(ctx, { ``` ## Config Options -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. +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. The default horizontal bar configuration is specified in `Chart.defaults.horizontalBar`.