Chartist-js: Enable compound charts where different types can be combined

[danreed121]

First off, loving the simple and clean look (not to mention all the other cool features, current and planned).

Wondering if there were plans to do combo charts. I know that a bar/line (where you could have a couple of each on the same canvas) would be useful. Has any design been put in to this? I know there are complications with data ranges/etc, but a simple example would be something that shows "widgets built" for each period as bars, with a trend line as a line. Happy to perhaps start looking at doing it, but didn't want to step on any other efforts.

Again, great lib, great start. So nice and so clean.

[danreed121]

Sorry, not sure I quite follow the reply. I realize that both Bar and Line charts exist, but best I can tell you can't have both on the same canvas at the same time. (and perhaps I am mistaken). Not clear what you mean by "domain has trust issues and don't want to go out his way for nota." Sorry!

[gionkunz]

@danreed121, thanks for the kind words! :smiley: I actually had this in mind for a long time and it's definitely something we should provide in the future. However, it's a challenging design issue and I'd like to solve this right. The technical approach so far is to provide abstraction by functional style and higher order functions. The problem of multiple charts on the same grid screams for polymorphism and a more prototypical / OO approach At least I couldn't come up with a functional approach to design this, although I did only spent some thinking in the shower without any research. I think chartist should provide a way to divide the Charts into polar and cartesian charts where the ones in the same group can be layered however the users wish to. This could be done with a new compound chart that is able to layer sub charts if they use the same coordinate system. I'd like to refactor the whole code into this direction anyway, but it will definitely happen after the accessibility work I'm working on with @JamieKnight under #2 and probably also after the testability issues we currently have tracked by #8 (only the SVG DOM manipulation component is actually covered with test currently :x: ). My prediction is also that this will also result in the first major semver release with backwards compatibility issues. Nothing really bad but just to show you how deep this will go into the architecture of Chartist.

@jordanpolo can't really decode your message :smiley: Please elaborate.

[danreed121]

a bot?

[danreed121]

@gionkunz I like the idea of a breakdown on coordinate systems... and it does make sense that ones from one system can't be included on a chart canvas of a different coordinate system. I also understand that you have priorities, makes sense.

I haven't grabbed the code to even look at how things are organized, but I will at some point to see if there is anywhere I can help out. Looking forward to staying in the loop on this lib.

[gionkunz]

@danreed121 , yeah I guess so. Even a bad google translate usage could not explain such a context-less discussion :smile: I've removed his comments and blocked the user in my profile. I hope this will also block him from any actions on repos I own. Damn robots, they will take over the world one time! :mans_shoe:

[gionkunz]

Sure, lets use this task for further discussions. I'll rename the task to be more generic on this topic.

[danreed121]

A very typical example would be an Agile burndown chart...

http://en.wikipedia.org/wiki/Burn_down_chart#mediaviewer/File:SampleBurndownChart.png

[gionkunz]

Nice example :-) Thanks

[yellow1912]

+1 for this, would really love to see it.

[moneytree-doug]

I think there should be two options for multiple charts on the same graph. 1) One that uses the same data/axis 2) One that uses two different sets of data and uses two different axes

[studentIvan]

:+1:

[hristod]

I got a little confused here. I am also looking for the multiple Y-axis feature, mentioned in #60. Do we have anything on that already?

[moneytree-doug]

@hristod No, but some people are just using the same canvas and painting over the original graph

[Lenninlasd]

+1 @gionkunz all we love you for this feature :)

[mikerandall]

So I am looking for a way to make the Y Axis have a fixed position in a line graph. What I'd like is to have a graph in an overflow-x:scroll window, so that the user can scroll the graph. During that scroll, I would like to keep the Y-Axis in a fixed position so that the data is measurable against the axis. Would compound graphs be able to accomplish this?

[cyb-master]

+1 @gionkunz Very very so much need!

[HopefulLlama]

+1 @gionkunz again. Once this is supported, it will be possible for me to switch from NVD3 to this!

[cyb-master]

+0.1 BTC for feature. Look on chartist in production! It's awesome! But so much need compound charts!

[moneytree-doug]

@gionkunz Just out of curiosity, where in the process is this? Is it still being planned and brainstormed? Do you need help extra programming help?

[gionkunz]

Currently we are still discussing about design of this feature. Deep support / polymorph chart vs. creating multiple charts for the different types in one container where they are linked to some sort (grid etc.). I'd appreciate any ideas, concepts, references etc. before we start with any implementation.

[moneytree-doug]

@gionkunz Where can I read more about this discussion and get caught up?

[lucasmaldonado]

Hey, is this something that will be developed in the near future? Chartist is great, the best library out there but without dual Y axis for line charts, I'm afraid I have to find another solution.

Thanks!

[ChrisCooney]

I've just begun using this and a dual axis chart would be incredibly welcome. It would really open up what we can do with data comparison.

[cyb-master]

It seems that dual axis is a very hot topic! How we can boost it?

[gionkunz]

I'll spend some time in Berlin end of October where I'll work dedicated on Chartist to release 1.0 and this feature is in the top 5 for 1.0 readiness.

[cyb-master]

Thanks! Really want to implement!

[aoghina]

:+1: that would be great!

[gionkunz]

Unfortunately I didn't had time to pick this up during my time in Berline due to other priorities. :( Still, this feature is the first one on my priority list for Chartist.

[allinurl]

+1

[GaryStanton]

Great library, but I'd love to see this too.

[zxpower]

I'm voting for this to be implemented, too!

It would help to reduce the number of charts in my app's Dashboard ;)

[brwinkle]

+1 For dual-axis charts

[vinalys]

+1

[moneytree-doug]

Just wanted to share my solution on today's existing framework. What I ended up doing was placing hooks on the data points and then drawing my on line above my bar charts.

[mriahi1]

+1

[GeneralCan]

+1

[Quas94]

Would love to have this feature also.

[enricleon]

+1

[abpai]

+1

[uaNikita]

+1

[ryanlin1986]

Just found plotly support this.

[cyb-master]

@ryanlin1986 Yes. They do. But I like lightweight design of Chartist.
Though I don't sure that I'll be able to wait this feature :-( It is mandatory for my service.

[ryanlin1986]

@21xhipster Totally agree, plotly is great but too heavy-weight, 1MB+ minimized.
Don't know when will they modularise it:
https://github.com/plotly/plotly.js/issues/41#issuecomment-164554750

[cyb-master]

@ryanlin1986 Even if plotly will be modularised it depends on d3.js. And d3.js is 152kb minimized as of now. One thing I like in Chartist is nice design by default. Plotly lack of it. So, @gionkunz, it is better to wait a bit :100: My bounty is still active!

[fealXX]

+1

[Seb33300]

+1

[chrisdeeming]

+1

[jonathanmendes]

+1

[luispablo]

+1

[brugnara]

+1 any chance to get this with a plugin?

EDIT: For now, a good solution for me is to normalize data to a %. Ps: thanks for this great library :+1:

[HudsonAfonso]

+1

[gionkunz]

This feature is the major missing bit for 1.0 and I'll have plenty of time working on this after my book is finished in April. For now I have prepared a bin so you can see how easy it is to create overlapping charts: http://jsbin.com/qufoma/edit?js,output

[Martinomagnifico]

Tell us about the book! Is it about Chartist?

[gionkunz]

No sorry, it's not about Chartist :-) It's about component based development using Angular 2 https://www.packtpub.com/web-development/mastering-angular-2-components

[gionkunz]

This is currently blocking all my time, but after that I'll invest a large amount of time into Chartist and we can start working on all those missing features.

[willfong]

Thanks for the overlapping example. Super helpful workaround!

[gionkunz]

Good news! My book is now in production stage. Ill be recovering now slowly and soon have much more time again to work on chartist. Please stay tuned!

[Maxhodges]

I want to combine bar and line charts so I can have a moving average (trendline) overlay across my bar graph. This is not currently possible?

example from excel with 7 day moving average

[gionkunz]

@Maxhodges did you check the jsbin a few comments above? The current work around id to create two overlaping charts

[Maxhodges]

ah funny, after I posted I starting thinking along the same lines. I'll give it a try!
thanks!

[jacobq]

@Maxhodges that's basically the same thing that I want to do, except in my case the curve represents a distribution function that's been fit to a histogram. Something like this: http://thydzik.com/histogram-with-normal-distribution-overlay-in-excel/ I plan to try the work-around soon...

[corneliutusnea]

Hi guys, I'd like to implement this as I really need to be able to render multiple charts overlying together, either lines + bars and with different Y axis.

Here is my proposal:

1. Create a new class Chartist.Chart - yey, what a unique name. This should only be a "host" for other chart types.
2. Move the implementation for creating the svg, grid, series, labels out of the grid/line into the Chart component.
3. Make the Line/Bar classes delegate the creation of the svg/grid/series to the chart.
4. If the Line/Bar don't have a "parent" chart set they create one and use it

This means we should have the code backward compatible without any overhead.
If you want to create a simple chart you use existing code. The Line/Bar will simply work as before but delegate some work to the implicitly created parent.

To create a multi-layer chart you simply create first a new Chartist.Chart, with the various shared properties, then add to it as many Line/Bar charts as you need. Every time you add a Line/Bar the Chart will set itself as the parent so they can nicely delegate the work.

The only other new thing would be to add an option to have the y-labels on the right-hand-side of the chart. That would be an option directly on the Line/Bar so they each can control where their labels are.

Thoughts?

[dhavaljani]

+1 Love Chartist and would love to see this feature added or a workaround for it...

[Maxhodges]

workaround posted above

[dhavaljani]

@Maxhodges I saw the option to stack charts but still not sure how to add labels on 2nd y-axis

[swinston100]

+1

[lucasbastianik]

+1

[olavocarvlho]

+1

[IharKrasnik]

+1

[robsonalves]

+1 - Bar Chart with Line !

[gjurgens]

+1

[pakoros]

i need bar chart with line this too.

[AdamMarkowski]

+1

[rschiang]

I've tried with the "two charts stack on each other" approach, and it worked perfectly. If compound charts are too heavy to implement, maybe a helper function would make the trick.

(For all +1 friends, the Reaction button could prevent flooding everyone on this thread:
)

[timhurt]

+1

[orlandoWexus]

+1

[bargar]

@gionkunz overlapping charts does indeed get us a good portion of the way there, many thanks for the example pointing me in the right direction.

One drawback to this approach is that you cannot have tooltips working on both charts at the same time. For example, I have a line chart + bar chart combo and only the second chart (in terms of DOM order) supports mouseover tooltips.

[sinpaout]

+1

[saitam1]

+1
Can you already estimate when the combined line/bars feature will be available?

[rschiang]

_Free_ in free software indicates _liberty_ instead of _free lunch_; if this really matters to you, you could write a implementation yourself and strike up a pull request. Keep commenting +1 just drives folks following this issue away, making this feature less likely to be reviewed / fixed by community. Please.

[gionkunz]

Composite charts will follow a major refactoring in #810 which is part of the Chartist 1.0 release. You can track progress on this project https://github.com/gionkunz/chartist-js/projects/1

Chartist 1.0 will be located in a different repository: https://github.com/chartist-js/chartist

[gionkunz]

Any contribution would be appreciated after #810

[toddler4372]

+1

[malthe]

@bargar do you know the reason why tooltips aren't working on both charts – is it something that can be worked around?

[bargar]

@malthe sure - it's a matter of layering. The tooltip triggers are presumably relying on mouseover events, and only the chart on top is exposed to such events.

[MLohrentz]

Chartist.js is definitely on top of the rankings regardless of any other plugins out there.

It would be awesome if it was possible to have a multiple bar graph where one series displays a target total and the next series displaying combined stacked total.

For example:
First series:
[ Ford 100, Mazda 20, Volvo 40, Renault 30 ]
Second series
[ 10+50+40, 5+10+5, 10+10+20, 10+10+10 ]

Where the first series is a normal bar (1 colour) and the second series is a stacked bar (3 colours)

Creating a graph combining bars and stacked bars.

If this is already possible could you please point me to the correct topic please?

[sladec]

Please ... need this ... I can't get X axis to line up bar with line overlay. too fiddly
Don't want to switch to another lib 😫

[CatoAntonsen]

I like the way chart.js does it with reuse of axis. Overlay works, but I wish it was a feature of Chartist.

[paulers]

@bargar There's a workaround actually. For each graph you render, set pointer-events: none;. Then, for each graph you render, set its ct-point class to pointer-events: auto; I managed to get tooltips working on all layers that way. :-)

[neslieang]

+1

[fcostarodrigo]

+1

[cyau73]

+1

[smaameri]

+1

[dmrickey]

@paulers Can you provide a more in depth example of how you got your charts to stack?

[jonsploder]

So I take it we still don't have dual axis labels? Drawing a second graph on top seems really hacky.

[thiscodeworks]

+1

[sreenumalae]

The Dual Y-axis issue #37 started in 2014 and now its 2020
But still the Issue is not closed.
I would like to know the update whether the chartist supports dual Y axis feature or not?

[netronicus]

is there any double Y axis option?

[quackadillyblip]

any news?