-
Notifications
You must be signed in to change notification settings - Fork 11.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add bar chart option to start bars at the origin, instead of the bottom. #669
Conversation
Works like a charm. Useful extension. Thanks. reflow : function(){
helpers.extend(this.BarClass.prototype,{
y: this.scale.endPoint,
base : this.scale.endPoint
}); Working customization reflow : function(){
if (this.options.barBeginAtOrigin && this.scale.min < 0) {
var scalebase = (-1 * parseFloat(this.scale.min) /
((this.scale.max - this.scale.min) * 1.00) *
(this.scale.endPoint - this.scale.startPoint) +
this.scale.startPoint);
}
else {
var scalebase = this.scale.endPoint;
}
helpers.extend(this.BarClass.prototype,{
y: scalebase,
base : scalebase
}); |
Hey @3xmo, I'm not sure why you flipped the arithmetic with this.scale.startPoint, but I tried your addition and it didn't work. Instead, I ended up wrapping my initial logic in a method and calling it wherever this.scale.endPoint was used in the Bar chart. |
@ahrex - I checked out the pending pull request here, and changed some of the bar values to negative values, but this resulted in the negative bar flowing outside of the scale and canvas. Can you confirm? |
@ahrex Can you please repoint this PR to the |
@ahrex I'm getting the same result as @tannerlinsley using the code in this PR: Using the following defaults:
It does not matter what combination of responsive = true/false, barBeginAtOrigin = true/false and scaleBeginAtZero = true/false I use, the negative bar is still overflown onto the x-axis label. I tried with various data sets as well, having negative values in the beginning/end, multiple groups of data, production data/test data, all with the same result... |
SHOUT |
I got this pull request working now and was able to draw negative values as well. Instead of using the global configuration object, i.e. setting:
I had to use a separate config object and pass it into the chart constructor:
And now the bar chart draws negative values correctly :) Not sure if one is even meant to be able to configure these options through the global defaults or not, perhaps requires some clarification in the documentation? |
There are some other PR's out there to support negative bars in bar charts. Are they duplicates? Or this the one left in the spotlight? |
@ahrex Could you please add a note to the documentation for this API change? |
@ahrex Could you please add this new option to http://www.chartjs.org/docs/#bar-chart-chart-options |
@tannerlinsley: sorry for the silence, you can view an example of the latest PR at https://jsfiddle.net/ahrex/jy8nnaem/ Thanks @jenswegar for the explanation; I should have made it clearer. @fulldecent, @jakesyl: I've created a new PR #1094 that applies on top of dev. Closing this PR. Thanks, |
Hi Alex, at your example i can see that the negative values goes until -100. what is the best way to limit it? for example to render until -50 or -42 (minimum value at the dataset). Thanks, |
Prototype of a fix for issue 9