Combine Bar Chart with Line + add secondary axis

[gerripro]

How can one combine bar chart and line chart? is it possible to make secondary axis for either?
Currently I can't find such features in the library and that will be awesome if you have those possibilities

[verscph]

+1

I'm having the same requirement.

[jimbengtsson92]

I am doing this right now by adding a BarChartData and a LineChartData in a stack. To get them correctly aligned I show the left and right SideTitles of both charts, but set getTitles: (value) => '' in the axis of a chart which should not show any labels for the axis.

The only problem I see at the moment with this is responding to touch, since only the top chart will receive any touches.

[florianhenonin]

Same requirement for me.
To handle display tooltip item for bar and line charts, I've duplicate bar values in line chart and set a transparent color to dot and line.
It works fine : bar and line are displayed, and on touch, tooltip display bar values.
Hope this helps

[jimbengtsson92]

@florianhenonin Could you please further explain your solution? If you could copy some code I would be really grateful 😃

[florianhenonin]

I can't share my code because of company privacy...

But I can explain you how reproduce this code !
Stack( children: [ _BarChart(...), _LineChart(...), ], )

Do not display grid on the BarChart. Touch will not be available because LineChart is over, don't worry.
On the LineChart you should integrate BarChart data with transparent color for lines & dots + add your line data with normal lines & dot colors.
Doing this, on touch, because of transparent lines & dots corresponding to BarChart data, you can show the tooltip with BarChart & LineChart data !✌🏻

[jimbengtsson92]

Ok thank you for the explanation! I will try to do this for my chart as well :)

[gabcarneiro]

I have the same requirement

I will try @florianhenonin's solution for now

[Nolat]

Same here 👍🏻

[dmlzj]

Same here 👍🏻

[jingen11]

thanks @florianhenonin !

[imaNNeo]

@florianhenonin I appreciate your approach.
It will be great if you implement and add one example of combined BarChart/LineChart in our sample app.
Regards!

[imaNNeo]

There is an issue to follow up the secondary axis here: #429.

But about the combined bar chart and line chart, let's keep this issue.

[imaNNeo]

For the combined bar chart, there is an issue which has 16 thumbs up (more than this issue),
So I will close this issue, we can follow it here: #764