Chart.js: Multiple axis [BOUNTY $100]

[AuspeXeu]

Is there a way to have multiple axis at one side of a chart? If not, do you plan to have this option in a newer release?

[luisrudge]

any news on this?

[gustavomonarin]

+1

[NanneHuiges]

This is a serious game-stopper for me. I have checked the current branch that @wikunia made, but as it is based on an older version I'm afraid that doesn't work. Would it be possible for someone knowing a lot of the new structure to refactor the code into a doubleline-block for the new Chart.js?

I saw this discussion: https://github.com/nnnick/Chart.js/pull/220 ending in 'please rewrite', but couldn't you (@fulldecent ) or maybe @nnnick give a hand here?

[NanneHuiges]

Currently looking at this, can anyone comment on the following idea to quickly implement this.

• change the this.scale to an array containing a scale per dataset
• add a scale for each dataset
• use the right scale per set

I have made a proof-of-concept, which doesn't yet include drawing the scales themselves here:
https://github.com/NanneHuiges/Chart.js/tree/feature/MultipleYAxis

the Chart.MultiAxisLine.js is a copy of Chart.Line.js, easiest way to review would probably to look at a diff with that file. I have made a gist of that and you can view it here:

https://cdn.rawgit.com/NanneHuiges/1490655646edd4a6944f/raw/bdbfd0bac471594f5f0eff0a1be3d191ee69fd2e/chart.js.diff.html

[NanneHuiges]

I have made some minor improvements. The axis-of choice is now a property of a dataset. Currently each dataset gets the next axis number, but this makes it ready to add the axis-of-choice for each dataset. This way you can have several datasets with the same axis.

The main feature that is missing is drawing of the scales: currently only the first scale gets drawn. If someone could take a look as how to add that functionality I'd be thankfull.

• branch: https://github.com/NanneHuiges/Chart.js/tree/feature/MultipleYAxis
• diff with the Chart.line.js (as it is heavily based on that file)

example:

[NanneHuiges]

I have added a 'right scale' feature, but for some reason the text gets rendered very ugly. The rendering is fine until a certain cutoff point. I've made the padding a bit smaller in this example, so you can see the effect:

I'd really like someone who knows more about canvas to take a quick peak.

(another todo is update/redraw I think, as I haven't checked that out yet).

[NanneHuiges]

I have yet again changed some things. labels now live on the left, you can select what axis get labels and which get strokes. Still hopeing on some interest here.

[Duffcase]

@NanneHuiges, thanks it works great, would love to see it pulled into the official repo.

[outrunthewolf]

:+1:

[derekperkins]

+:100:

[jtomasrl]

+1

[danteoh]

+1 to have this merged in sooner than later!

[danst0]

+0.5, the current version from NanneHuiges seems to break the legend and the axis on the same side look kind of ugly

[toytonic]

+1

[luisrudge]

@nnnick will you ever merge this pr?

[tomwayson]

+1

[jakesyl]

Not sure wether or not we want this in the core

[luisrudge]

Why?

Enviado pelo meu Windows Phone

---

From: Jakemailto:[email protected]
Sent: ‎29/‎12/‎2014 18:14
To: nnnick/Chart.jsmailto:[email protected]
Cc: Luís Rudgemailto:[email protected]
Subject: Re: [Chart.js] Multiple axis (#17)

Not sure wether or not we want this in the core

---

Reply to this email directly or view it on GitHub:
https://github.com/nnnick/Chart.js/issues/17#issuecomment-68298109

[etimberg]

@jakesyl I feel like this would be a good feature in the future, but it's definitely needs some sort of discussion first. For example, is there a limit of 2 axes? are you allowed unlimited axes? how do we handle grid lines for multiple axes? Do the 0 points always line up?

[aaronstaves]

+1 Definitely interested in this, even if it was just an extension

[jakesyl]

Any PR's pertaining to this feature?

[etimberg]

@jakesyl at the moment, I'm unaware of any PRs. I think we should try and get a list of requirements before we try and implement all or part of it.

[luisrudge]

You can open the PR so we can discuss requirements there

[NanneHuiges]

I have not made a PR at the moment: I ran into problems and was hoping that someone with a bit more insight into the current chart.js could help me figure out (e.g. de labels messing things up, and the way I've implemented the new feature, etc) how to make it better.

There hasn't been any dev with time for that sadly, so the current status is, I think, proof-of-concept ? For instance, the "rendering of labels becomes bold halfway through" issue is completely unexpected for me. Not sure where, how and why that started ;)

[robrez]

I'd like to see multiple scales + the option to have a line/bar combo....

http://nvd3.org/examples/linePlusBar.html

[rappo]

We'd love to see this implemented for a stats page we're building for Bountysource.com. I put a $100 bounty on the issue:

[halmartin]

+1

[wkonkel]

To expand on @rappo's comment and the $100 bounty, we're using chart.js on the Bountysource stats page https://www.bountysource.com/stats and would like to utilize a two-axis charts. These are very close: https://github.com/nnnick/Chart.js/issues/17#issuecomment-57480504 and https://github.com/nnnick/Chart.js/issues/184#issuecomment-23995749). We would have two lines where one corresponds to a $ scale on the left axis and the other to a # scale on the right axis.

[luisrudge]

That is awesome @wkonkel and @rappo. Thanks for the initiative! We actually need an unknown amount of axis, so just two won't fit our solution.

[tylerdavis]

+1

[rafaelhc]

Can someone please tell me how to implement @NanneHuiges extension?
I have downloaded from https://github.com/NanneHuiges/Chart.js/tree/feature/MultipleYAxis , and it only displays samples pages containing one axis. Any help would be highly appreciated!

[NanneHuiges]

That #220 you refer to is a really old one. If you want to try the images I posted above, use my branch. It's not completely production ready (see e.g. the 'bold' text in the axis) . This is the branch I used to make those images, it's not completely up-to-date with master probably: https://github.com/NanneHuiges/Chart.js/tree/feature/MultipleYAxis

[rafaelhc]

Thank you for your quick reply.
I posted the wrong url, sorry. Updated it shortly after, but not fast enough I can tell. I am using that branch, but I still can't make it work. The Chart.js/samples/line.html for example only displays one axis, what should I do to make two?

[NanneHuiges]

Check out the example for multiple lines: https://github.com/NanneHuiges/Chart.js/blob/feature/MultipleYAxis/samples/multiaxisline.html

I'm not sure anymore, but I assume (hope) I put something in there that works :)

[rafaelhc]

Nevermind, got it to work:)

[NanneHuiges]

check. I just did a clean checkout of the branch and it worked for me :)

For anyone interested ( @rappo maybe? ): this it what it currently looks like:

[jtomasrl]

the problem with @NanneHuiges branch is that if i set the canvas CSS to width: 100%, the chart doesnt get resized as in the current Chart.js release

[NanneHuiges]

@jtomasrl could that be because it's an old branch? I have currently not the time to update it, but that shouldn't be too hard

[sebucando]

+1

[gabadi]

+1

[optikfluffel]

+1

[derekperkins]

UPDATE: The core team is currently working on supporting multiple axes. We're hoping to have it available within the next month.

[bischofs]

+1

[grex22]

Love it! Can't wait, @derekperkins!

[derekperkins]

I can't take any credit for it, this is all @etimberg. This is an early prototype supporting multiple axes on a new scatterplot chart type. It's being tested and support pushed out to the other charts types, so we're on schedule to have it available hopefully by the middle of June.

[grex22]

_Drool_

[cdipaolo]

+1. Looking forward to this

[derekperkins]

Huzzah! The first alpha of Chart.js 2.0 has landed and should fix this issue. Check out the release and try it out! We've got a lot of momentum right now, so please help us test so we can launch 2.0 Gold by the end of the month.
https://github.com/nnnick/Chart.js/releases/tag/v2.0-alpha

I'm closing this issue for now, but if you have implementation questions or find bugs, please create a jsfiddle and post the link here and we'll reopen this issue and get it fixed.

Thanks for the bounty! @etimberg - you're going to be a wealthy man. :)

[grex22]

Awesome!! Downloading and will be testing this week -- THANK YOU core team!!

[cdipaolo]

👍👍 sick!

[devonuto]

HI @derekperkins, how do we get the second set of values to have their own y axis value labels on the right? Also in a different format would be good (Money for instance)?

http://jsfiddle.net/devonuto/177muxju/18/

[derekperkins]

@devonuto - I'm not seeing anything in that jsfiddle. If you look at samples/line-multi-axis.html, you'll see how to implement multiple axes.

@tannerlinsley / @etimberg - I believe there are also callbacks on all the axis labels now that let you customize the display, right?

[devonuto]

@derekperkins it's a modified version of that which I'm using, try this link: https://jsfiddle.net/devonuto/pa7k6xn9/

Edit: It's working for me in firefox, but not chrome
Edit2: Working on Chrome now.

[etimberg]

@devonuto you need to add a yAxisID string that matches the ID of the axis to the dataset. This is an example of it in action.

[devonuto]

@etimberg, thanks but that wasn't the issue. However comparing my code to yours, I had
yAxes: [{ scaleType: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance display: true, position: "left",

as
yAxes: [{ scaleType: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance show: true, position: "left",

Not sure if that was something I changed, or if I had an older version of the line-multi-axis.html. Either way, I have it working now.

[etimberg]

Glad it's working :smile:

I think an early dev build had it as show but display seemed more fitting and was closer to the current config.

[adw0rd]

@devonuto thank you!

[Shadowstep33]

is this feature still in alpha or is it in the current master branch?

[cuongpro2511]

@derekperkins + @etimberg Thanks!