Skip to content
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

Closed
wants to merge 4 commits into from
Closed

Conversation

ahrex
Copy link

@ahrex ahrex commented Oct 1, 2014

Prototype of a fix for issue 9

@3xmo
Copy link

3xmo commented Oct 22, 2014

Works like a charm. Useful extension. Thanks.
If you are using the option Chart.defaults.global.responsive = true;you might also want to add this small customization. Without that small workaround the chart won't show up in the intended way after resizing the window.
reflow : function() around line > 2200
Original (line 2200)

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
  });

@ahrex
Copy link
Author

ahrex commented Nov 14, 2014

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.

@tannerlinsley
Copy link
Contributor

@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?

@jakesylvestre
Copy link
Contributor

@ahrex Can you please repoint this PR to the dev branch? Thanks. If your not sure how to repoint this PR please see: http://stackoverflow.com/questions/24159036/how-to-modify-a-pull-request-on-github-to-change-target-branch-to-merge-into Also +1

@jenswegar
Copy link

@ahrex I'm getting the same result as @tannerlinsley using the code in this PR:
negative_bar_chart_overflow

Using the following defaults:

Chart.defaults.global.responsive = true;
Chart.defaults.global.scaleBeginAtZero = false;
Chart.defaults.global.barBeginAtOrigin = false,
Chart.defaults.global.animation = false;

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...

@fulldecent
Copy link
Contributor

SHOUT
requesting nomination / review from
@jakesyl @etimberg @n8mauer @etimberg @derekperkins

@jenswegar
Copy link

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:

Chart.defaults.global.responsive = true;
Chart.defaults.global.scaleBeginAtZero = false;
Chart.defaults.global.barBeginAtOrigin = false,
Chart.defaults.global.animation = false;

I had to use a separate config object and pass it into the chart constructor:

var chartOptions = {
        responsive:true,
        scaleBeginAtZero:false,
        barBeginAtOrigin:true
}
var chartInstance = new Chart(ctx).Bar(myChartData, chartOptions);

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?

@tannerlinsley
Copy link
Contributor

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?

@fulldecent
Copy link
Contributor

Options:
#994
#628
#555
#1057
#542
#640
#867

Other issues:
#9
#939

@fulldecent
Copy link
Contributor

@ahrex Could you please add a note to the documentation for this API change?

@fulldecent
Copy link
Contributor

@ahrex Could you please add this new option to http://www.chartjs.org/docs/#bar-chart-chart-options

@ahrex
Copy link
Author

ahrex commented May 2, 2015

@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,
Alex

@ahrex ahrex closed this May 2, 2015
@ranstyr
Copy link

ranstyr commented Jan 21, 2016

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,
Ran.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

9 participants