Combine Bar Chart with Line + add secondary axis
Closed this issue · 13 comments
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
+1
I'm having the same requirement.
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.
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
@florianhenonin Could you please further explain your solution? If you could copy some code I would be really grateful 😃
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 !✌🏻
Ok thank you for the explanation! I will try to do this for my chart as well :)
I have the same requirement
I will try @florianhenonin's solution for now
Same here 👍🏻
Same here 👍🏻
thanks @florianhenonin !
@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!