]> git.ipfire.org Git - thirdparty/Chart.js.git/commitdiff
Add more explanation of bar and category percentage. 1693/head
authorwcatron <wcatron@catrondevelopment.com>
Tue, 24 Nov 2015 19:25:15 +0000 (14:25 -0500)
committerwcatron <wcatron@catrondevelopment.com>
Tue, 24 Nov 2015 19:25:15 +0000 (14:25 -0500)
docs/03-Bar-Chart.md

index ed51201bbf5f060c027a7a21f89eed799c9488f5..b448dcb5a97c39a748b212c8a4511e5bc71d1846 100644 (file)
@@ -86,8 +86,8 @@ type | String | "Category" | As defined in [Scales](#scales-category-scale).
 display | Boolean | true | If true, show the scale.
 position | String | "bottom" | Position of the scale. Options are "top" and "bottom" for dataset scales.
 id | String | "x-axis-1" | Id of the axis so that data can bind to it
-categoryPercentage | Number | 0.8 | Percent (0-1) of the available width (the space between the gridlines for small datasets) for each data-point to use for the bars.
-barPercentage | Number | 0.9 | Percent (0-1) of the available width each bar should be within the category percentage. 1.0 will take the whole category width and put the bars right next to each other.
+categoryPercentage | Number | 0.8 | Percent (0-1) of the available width (the space between the gridlines for small datasets) for each data-point to use for the bars. [Read More](#bar-chart-barpercentage-vs-categorypercentage)
+barPercentage | Number | 0.9 | Percent (0-1) of the available width each bar should be within the category percentage. 1.0 will take the whole category width and put the bars right next to each other. [Read More](#bar-chart-barpercentage-vs-categorypercentage)
 gridLines | Array |  [See Scales](#scales) |
 *gridLines*.offsetGridLines | Boolean | true | If true, the bars for a particular data point fall between the grid lines. If false, the grid line will go right down the middle of the bars.
 scaleLabel | Array | [See Scales](#scales) |
@@ -130,6 +130,29 @@ new Chart(ctx,{
 
 We can also change these defaults values for each Bar type that is created, this object is available at `Chart.defaults.Bar`.
 
+#### barPercentage vs categoryPercentage
+
+The following shows the relationship between the bar percentage option and the category percentage option.
+
+```text
+// categoryPercentage: 1.0
+// barPercentage: 1.0
+Bar:          | 1.0 | 1.0 |
+Category:      |    1.0    |   
+Sample:           |===========|
+
+// categoryPercentage: 1.0
+// barPercentage: 0.5
+Bar:             |.5|  |.5|
+Category:      |      1.0     |   
+Sample:           |==============|
+
+// categoryPercentage: 0.5
+// barPercentage: 1.0
+Bar:              |1.||1.|
+Category:      |  .5  |   
+Sample:           |==============|
+```
 ### Prototype methods
 
 #### .getBarsAtEvent( event )