archive-gh-me/Chart.js
1
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2025-12-08 20:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Added support for manually specifying bar thickness in bar charts

Browse Source
This commit is contained in:
Josh Baker 2016-07-06 13:06:43 -07:00 committed by Joshua Baker
parent 524493fe06
commit 191c280387
2 changed files with 8 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/04-Bar-Chart.md
View File

@ -99,6 +99,7 @@ type | String | "Category" | As defined in [Scales](#scales-category-scale).
display | Boolean | true | If true, show the scale. display | Boolean | true | If true, show the scale.
id | String | "x-axis-0" | Id of the axis so that data can bind to it id | String | "x-axis-0" | Id of the axis so that data can bind to it
stacked | Boolean | false | If true, bars are stacked on the x-axis stacked | Boolean | false | If true, bars are stacked on the x-axis
barThickness | Number | | Manually set width of each bar in pixels. If not set, the bars are sized automatically.
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) 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) 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 | Object | [See Scales](#scales) | gridLines | Object | [See Scales](#scales) |
@ -110,6 +111,7 @@ type | String | "linear" | As defined in [Scales](#scales-linear-scale).
display | Boolean | true | If true, show the scale. display | Boolean | true | If true, show the scale.
id | String | "y-axis-0" | Id of the axis so that data can bind to it. id | String | "y-axis-0" | Id of the axis so that data can bind to it.
stacked | Boolean | false | If true, bars are stacked on the y-axis stacked | Boolean | false | If true, bars are stacked on the y-axis
barThickness | Number | | Manually set height of each bar in pixels. If not set, the bars are sized automatically.
You can override these for your `Chart` instance by passing a second argument into the `Bar` method as an object with the keys you want to override. You can override these for your `Chart` instance by passing a second argument into the `Bar` method as an object with the keys you want to override.

6
src/controllers/controller.bar.js
View File

@ -171,6 +171,9 @@ module.exports = function(Chart) {
calculateBarWidth: function(index) { calculateBarWidth: function(index) {
var xScale = this.getScaleForId(this.getMeta().xAxisID); var xScale = this.getScaleForId(this.getMeta().xAxisID);
if (xScale.options.barThickness) {
return xScale.options.barThickness;
}
var ruler = this.getRuler(index); var ruler = this.getRuler(index);
return xScale.options.stacked ? ruler.categoryWidth : ruler.barWidth; return xScale.options.stacked ? ruler.categoryWidth : ruler.barWidth;
}, },
@ -520,6 +523,9 @@ module.exports = function(Chart) {
calculateBarHeight: function (index) { calculateBarHeight: function (index) {
var me = this; var me = this;
var yScale = me.getScaleForId(me.getMeta().yAxisID); var yScale = me.getScaleForId(me.getMeta().yAxisID);
if (yScale.options.barThickness) {
return yScale.options.barThickness;
}
var ruler = me.getRuler(index); var ruler = me.getRuler(index);
return yScale.options.stacked ? ruler.categoryHeight : ruler.barHeight; return yScale.options.stacked ? ruler.categoryHeight : ruler.barHeight;
}, },