This is a migrated thread and some comments may be shown as answers.

Mobile-friendly x-Axis Labels

1 Answer 22 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Justin
Top achievements
Rank 1
Justin asked on 10 Mar 2014, 04:33 PM
I’ve created the DataViz control and I’ve gotten it pretty much the way I want it.  However, I am unable (don't know how) to use jQuery/JS to change the Labels on
the X-Axis.  I am currently displaying hours 1-24.  I’m using Bootstrap to make your chart(s) more mobile-friendly (if you have a sample of that, other than the one online, it’d be greatly appreciated!).  So when I use Bootstrap [or don’t] and look at it on a mobile emulator, it’s cramming all 24 labels into a tiny little 300pixel spot, and obviously they all overlap.   This is a line chart and I'm using ASP.NET MVC4.  Is there any means to do this, preferably in jQuery or JS?

Thanks!

1 Answer, 1 is accepted

Sort by
0
T. Tsonev
Telerik team
answered on 12 Mar 2014, 10:11 AM
Hello,

I don't think there's a way to do this automatically, but you can try setting the categoryAxis.maxDateGroups to a lower value for mobile devices:

    $("#chart").kendoChart({
      categoryAxis: {
        categories: [
          new Date("2014/01/01"),
          new Date("2014/01/02")
        ],
        baseUnit: "hours",
        baseUnitStep: "auto",
        maxDateGroups: 12
      }
    });

-- Live demo --

I hope this helps.

Regards,
T. Tsonev
Telerik
 

DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

 
Tags
Charts
Asked by
Justin
Top achievements
Rank 1
Answers by
T. Tsonev
Telerik team
Share this question
or