You must be logged in to post your query.
Home › Forums › Chart Support › Create scrollbar when access column chart on mobile
Hi,
I want to created guest monitoring while I can monitoring the guest on my apartment every 1 hour, and I have chosen using a column chart, it work’s fine. The problem is when I’m open page in responsive mode (mobile phone), the x label is not good looking.
Here’s the code
<script type="text/javascript"> $(function () { var chart3 = new CanvasJS.Chart("chartContainer3",{ title: { fontFamily: "tahoma" }, axisX: { interval: 1 }, axisY: { title: "Guest " }, data: [{ type: "column", dataPoints: [ { label: "12AM", y: 0 }, { label: "1AM", y: 0 }, { label: "2AM", y: 0 }, { label: "3AM", y: 0 }, { label: "4AM", y: 0 }, { label: "5AM", y: 0 }, { label: "6AM", y: 0 }, { label: "7AM", y: 1 }, { label: "8AM", y: 5 }, { label: "9AM", y: 10 }, { label: "10AM", y: 20 }, { label: "11AM", y: 15 }, { label: "12PM", y: 10 }, { label: "1PM", y: 3 }, { label: "2PM", y: 7 }, { label: "3PM", y: 0 }, { label: "4PM", y: 0 }, { label: "5PM", y: 0 }, { label: "6PM", y: 0 }, { label: "7PM", y: 0 }, { label: "8PM", y: 0 }, { label: "9PM", y: 0 }, { label: "10PM", y: 0 }, { label: "11PM", y: 0 } ] }] }); }); </script>
How do I can create my column chart responsive looking very well when I need to see so much data ?
Thank you
@ikram,
Setting the interval to 1 forces chart to show labels at every x-value of 1 over the x-axis. Removing it and let chart show labels at auto calculated interval should look better in this case.
— Shashi Ranjan Team CanvasJS
You must be logged in to reply to this topic. Login/Register