Axis legends and axis title collision issue (best solution to implement)

[deathsh0ot]

Overview

Bug 🐛 : #57

I've tried using many libraries most of which did have this collision issue to some extent, I've also tried looking for the best implementation to avoid this problem and this is what I found : Most libraries have these collision issues, I would assume they leave it up to the developer to preprocess the data before visualizing it or provide customization options to resolve them.

Comparing other libraries solutions 🔍 📄

Recharts

link to the code sample RechartsSample

As we can see the tick labels themselves can collide.

C3 js

link to the code sample: C3jsSample

In here the tick text and axis label collide.

HighCharts

link to the code sample: HighChartsSample

HighCharts has no collision but I'm not sure about the implementation, long tick text may take up more precious screen space than the chart itself which seems kind of counterproductive.

Nvd3

link to the code sample Nvd3Sample

Tick labels collide among themselves.

Chart.js

link to the code sample Chart.jsSample

Chart.js has a similar solution to HighCharts but it appears that above a certain limit the collision occurs.

ApexCharts

link to the code sample ApexChartsSample

ApexCharts solution is that they'd truncate the axis tick text if it got over a certain length and the full text would be displayed as a tooltip when hovered over.

Conclusion 🔚

After trying out these libraries ApexCharts solution was the most appropriate in my opinion.
I created this discussion to share my findings and to get more opinions on this matter, so if you think you have a better solution or disagree on some parts please feel free to share.

[marrouchi]

Looks like the ApexCharts way of solving this is the best. @deathsh0ot I would suggest we start on solving this only for the vertical axis.

[deathsh0ot]

Alright I'm on it.