search

chinmaymk / angular-charts

angular directives for creating common charts using d3
MIT License
1.03k stars 270 forks source link

Angular Chart X-axis Text overlap on each other #199

Open santoshshinde2012 opened 9 years ago

santoshshinde2012 commented 9 years ago

First, let me thank you for your grate code which is helpful for me.

Second,I have use this code with ionic framework i got result properly but unfortunately my x-axis chart text overlap on each other.

Please help me what i will do with this or any changes in code which show text properly or any another solution. screenshot_2015-04-09-10-23-51

screenshot_2015-04-09-10-23-43

lvarayut commented 9 years ago

Did you figure it out? I'm facing the same issue.

santoshshinde2012 commented 9 years ago

This issue on small screen device , you may be solved by using notation on x - axis.

lvarayut commented 9 years ago

@santoshshinde2012 Thanks for your response. Could you give me some example?

santoshshinde2012 commented 9 years ago

Simple way to use single character on x axis and it define on next screen

lvarayut commented 9 years ago

I'm not sure what do you mean. Did you mean setting the xAxisTickFormat option? Could you show some code example instead?

AVatch commented 8 years ago

I would suggest for the option to rotate the x-axis text so that it is vertical this way you can have longer text without overlapping, like timestamps.

screen shot 2015-09-15 at 12 41 51 pm

I believe d3 has this: http://stackoverflow.com/questions/11252753/rotate-x-axis-text-in-d3

This can be configured in the config property