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.

[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

[olavocarvalho]

+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

[ghost]

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

[sgarcia30]

@paulers could you provide more information on the work around for getting to tooltips to work for both graphs. when I add the CSS stuff you mention, it allows the tooltip on the bottom graph to work, but now the top one doesn't work. would it be different for a bar graph versus a line graph?

Update... that was it, I had to implement the auto part for both the points and the bars.